{"id":23257237,"url":"https://github.com/iknowjavascript/create-react-app-lambda","last_synced_at":"2025-04-06T04:42:25.487Z","repository":{"id":39443301,"uuid":"199782595","full_name":"iKnowJavaScript/create-react-app-lambda","owner":"iKnowJavaScript","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-04T05:53:26.000Z","size":7345,"stargazers_count":0,"open_issues_count":21,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-06T02:12:07.546Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iKnowJavaScript.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-31T05:05:46.000Z","updated_at":"2019-07-31T05:07:08.000Z","dependencies_parsed_at":"2023-02-02T00:02:08.865Z","dependency_job_id":null,"html_url":"https://github.com/iKnowJavaScript/create-react-app-lambda","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iKnowJavaScript%2Fcreate-react-app-lambda","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iKnowJavaScript%2Fcreate-react-app-lambda/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iKnowJavaScript%2Fcreate-react-app-lambda/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iKnowJavaScript%2Fcreate-react-app-lambda/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iKnowJavaScript","download_url":"https://codeload.github.com/iKnowJavaScript/create-react-app-lambda/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247436139,"owners_count":20938532,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-19T12:27:31.067Z","updated_at":"2025-04-06T04:42:25.374Z","avatar_url":"https://github.com/iKnowJavaScript.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e ⚠️You may not need `netlify-lambda`. [Netlify Dev](https://github.com/netlify/netlify-dev-plugin) works with `create-react-app` out of the box, give it a try! Only use `netlify-lambda` if you need a build step for your functions. [See its README for details](https://github.com/netlify/netlify-lambda/blob/master/README.md#netlify-lambda).\n\nThis project is based on latest versions of [Create React App v3](https://github.com/facebookincubator/create-react-app) and [netlify-lambda v1](https://github.com/netlify/netlify-lambda).\n\nThe main addition to base Create-React-App is a new folder: `src/lambda`. Each JavaScript file in there will be built for Lambda function deployment in `/built-lambda`, specified in [`netlify.toml`](https://www.netlify.com/docs/netlify-toml-reference/).\n\nAs an example, we've included a small `src/lambda/hello.js` function, which will be deployed to `/.netlify/functions/hello`. We've also included an async lambda example using async/await syntax in `async-chuck-norris.js`.\n\n[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/netlify/create-react-app-lambda)\n\n## Video\n\nLearn how to set this up yourself (and why everything is the way it is) from scratch in a video: https://www.youtube.com/watch?v=3ldSM98nCHI\n\n## Babel/webpack compilation\n\nAll functions are compiled with webpack using the Babel Loader, so you can use modern JavaScript, import npm modules, etc., without any extra setup.\n\n## Local Development\n\nBefore developing, clone the repository and run `yarn` from the root of the repo to install all dependencies.\n\n### Start each server individually\n\n**Run the functions dev server**\n\nFrom inside the project folder, run:\n\n```\nyarn start:lambda\n```\n\nThis will open a local server running at `http://localhost:9000` serving your Lambda functions, updating as you make changes in the `src/lambda` folder.\n\nYou can then access your functions directly at `http://localhost:9000/{function_name}`, but to access them with the app, you'll need to start the app dev server. Under the hood, this uses `react-scripts`' [advanced proxy feature](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#configuring-the-proxy-manually) with the `setupProxy.js` file.\n\n**Run the app dev server**\n\nWhile the functions server is still running, open a new terminal tab and run:\n\n```\nyarn start\n```\n\nThis will start the normal create-react-app dev server and open your app at `http://localhost:3000`.\n\nLocal in-app requests to the relative path `/.netlify/functions/*` will automatically be proxied to the local functions dev server.\n\n\u003e Note: You can also use [npm-run-all](https://github.com/mysticatea/npm-run-all#readme) to run the functions dev server and app dev server concurrently. Note that you don't need this if you use [`netlify dev`](https://github.com/netlify/netlify-dev-plugin/) as [function builder detection](https://www.netlify.com/blog/2019/04/24/zero-config-yet-technology-agnostic-how-netlify-dev-detectors-work/) does that for you.\n\n## Typescript\n\n\u003cdetails\u003e\n  \u003csummary\u003e\n    \u003cb id=\"typescript\"\u003eClick for instructions\u003c/b\u003e\n  \u003c/summary\u003e\nYou can use Typescript in both your React code (with `react-scripts` v2.1+) and your lambda functions )with `netlify-lambda` v1.1+). Follow these instructions:\n\n1. `yarn add -D typescript @types/node @types/react @types/react-dom @babel/preset-typescript @types/aws-lambda`\n2. convert `src/lambda/hello.js` to `src/lambda/hello.ts`\n3. use types in your event handler:\n\n```ts\nimport { Handler, Context, Callback, APIGatewayEvent } from \"aws-lambda\"\n\ninterface HelloResponse {\n  statusCode: number\n  body: string\n}\n\nconst handler: Handler = (event: APIGatewayEvent, context: Context, callback: Callback) =\u003e {\n  const params = event.queryStringParameters\n  const response: HelloResponse = {\n    statusCode: 200,\n    body: JSON.stringify({\n      msg: `Hello world ${Math.floor(Math.random() * 10)}`,\n      params\n    })\n  }\n\n  callback(undefined, response)\n}\n\nexport { handler }\n```\n\nrerun and see it work!\n\nYou are free to set up your `tsconfig.json` and `tslint` as you see fit.\n\n\u003c/details\u003e\n\n**If you want to try working in Typescript on the client and lambda side**: There are a bunch of small setup details to get right. Check https://github.com/sw-yx/create-react-app-lambda-typescript for a working starter.\n\n## Routing and authentication\n\nFor a full demo of routing and authentication, check this branch: https://github.com/netlify/create-react-app-lambda/pull/18 This example will not be maintained but may be helpful.\n\n## Service Worker\n\nThe service worker does not work with lambda functions out of the box. It prevents calling the function and returns the app itself instead ([Read more](https://github.com/facebook/create-react-app/issues/2237#issuecomment-302693219)). To solve this you have to eject and enhance the service worker configuration in the webpack config. Whitelist the path of your lambda function and you are good to go.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiknowjavascript%2Fcreate-react-app-lambda","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiknowjavascript%2Fcreate-react-app-lambda","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiknowjavascript%2Fcreate-react-app-lambda/lists"}