{"id":21371576,"url":"https://github.com/carreraprogrammer/create-react-app-lambda","last_synced_at":"2025-10-09T11:37:06.502Z","repository":{"id":145677363,"uuid":"565024226","full_name":"carreraprogrammer/create-react-app-lambda","owner":"carreraprogrammer","description":null,"archived":false,"fork":false,"pushed_at":"2022-11-12T05:05:53.000Z","size":592,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-22T20:51:52.297Z","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/carreraprogrammer.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-12T05:04:55.000Z","updated_at":"2023-06-13T03:55:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"787f8ebe-6e9c-4571-b884-3510d2b72409","html_url":"https://github.com/carreraprogrammer/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/carreraprogrammer%2Fcreate-react-app-lambda","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carreraprogrammer%2Fcreate-react-app-lambda/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carreraprogrammer%2Fcreate-react-app-lambda/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carreraprogrammer%2Fcreate-react-app-lambda/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/carreraprogrammer","download_url":"https://codeload.github.com/carreraprogrammer/create-react-app-lambda/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243846982,"owners_count":20357297,"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-11-22T08:14:16.369Z","updated_at":"2025-10-09T11:37:01.481Z","avatar_url":"https://github.com/carreraprogrammer.png","language":"JavaScript","readme":"## Create-React-App-Lambda\n\nThis project is a reference demo showing you how to use [Create React App v3](https://github.com/facebookincubator/create-react-app) and [netlify-lambda v1](https://github.com/netlify/netlify-lambda) together in a [Netlify Dev](https://www.netlify.com/docs/cli/?utm_source=github\u0026utm_medium=swyx-CRAL\u0026utm_campaign=devex#netlify-dev-beta) workflow. You can clone this and immediately be productive with a React app with serverless Netlify Functions in the same repo. Alternatively you can deploy straight to Netlify with this one-click Deploy:\n\n\n[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg?utm_source=github\u0026utm_medium=swyx-CRAL\u0026utm_campaign=devex)](https://app.netlify.com/start/deploy?repository=https://github.com/netlify/create-react-app-lambda\u0026utm_source=github\u0026utm_medium=swyx-CRAL\u0026utm_campaign=devex)\n\n\u003e ⚠️NOTE: You may not need this project at all. [Netlify Dev](https://github.com/netlify/netlify-dev-plugin) works with `create-react-app` out of the box! Only use `netlify-lambda` if you need a build step for your functions, eg if you want to use Babel or TypeScript ([see its README for details](https://github.com/netlify/netlify-lambda/blob/master/README.md#netlify-lambda)).\n\n## Project Setup\n\n**Source**: The main addition to base Create-React-App is a new folder: `src/lambda`. This folder is specified and can be changed in the `package.json` script: `\"build:lambda\": \"netlify-lambda build src/lambda\"`.\n\n**Dist**: Each JavaScript file in there will be built for Netlify Function deployment in `/built-lambda`, specified in [`netlify.toml`](https://www.netlify.com/docs/netlify-toml-reference/?utm_source=github\u0026utm_medium=swyx-CRAL\u0026utm_campaign=devex).\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-dadjoke.js`.\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 (inside `src/lambda`) are compiled with webpack using Babel, so you can use modern JavaScript, import npm modules, etc., without any extra setup.\n\n## Local Development\n\n```bash\n## prep steps for first time users\nnpm i -g netlify-cli # Make sure you have the [Netlify CLI](https://github.com/netlify/cli) installed\ngit clone https://github.com/netlify/create-react-app-lambda ## clone this repo\ncd create-react-app-lambda ## change into this repo\nyarn # install all dependencies\n\n## done every time you start up this project\nntl dev ## nice shortcut for `netlify dev`, starts up create-react-app AND a local Node.js server for your Netlify functions\n```\n\nThis fires up [Netlify Dev](https://www.netlify.com/docs/cli/?utm_source=github\u0026utm_medium=swyx-CRAL\u0026utm_campaign=devex#netlify-dev-beta), which:\n\n- Detects that you are running a `create-react-app` project and runs the npm script that contains `react-scripts start`, which in this project is the `start` script\n- Detects that you use `netlify-lambda` as a [function builder](https://github.com/netlify/netlify-dev-plugin/#function-builders-function-builder-detection-and-relationship-with-netlify-lambda), and runs the npm script that contains `netlify-lambda build`, which in this project is the `build:lambda` script.\n\nYou can view the project locally via Netlify Dev, via `localhost:8888`.\n\nEach function will be available at the same port as well:\n\n- `http://localhost:8888/.netlify/functions/hello` and \n- `http://localhost:8888/.netlify/functions/async-dadjoke`\n\n## Deployment\n\nDuring deployment, this project is configured, inside `netlify.toml` to run the build `command`: `yarn build`.\n\n`yarn build` corresponds to the npm script `build`, which uses `npm-run-all` (aka `run-p`) to concurrently run `\"build:app\"` (aka `react-scripts build`) and `build:lambda` (aka `netlify-lambda build src/lambda`).\n\n## Typescript\n\n\u003cdetails\u003e\n  \u003csummary\u003e\n    \u003cb id=\"typescript\"\u003eClick for instructions\u003c/b\u003e\n  \u003c/summary\u003e\n\nYou can use Typescript in both your frontend React code (with `react-scripts` v2.1+) and your serverless 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 with Netlify Identity\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\n`create-react-app`'s default service worker (in `src/index.js`) 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","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcarreraprogrammer%2Fcreate-react-app-lambda","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcarreraprogrammer%2Fcreate-react-app-lambda","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcarreraprogrammer%2Fcreate-react-app-lambda/lists"}