abtx/create-react-app-lambda

⚠️You may not need netlify-lambda. Netlify Dev 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.

This project is based on latest versions of Create React App v3 and netlify-lambda v1.

The 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.

As 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.

Video

Learn 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

Babel/webpack compilation

All functions are compiled with webpack using the Babel Loader, so you can use modern JavaScript, import npm modules, etc., without any extra setup.

Local Development

Before developing, clone the repository and run yarn from the root of the repo to install all dependencies.

Start each server individually

Run the functions dev server

From inside the project folder, run:

yarn start:lambda

This will open a local server running at http://localhost:9000 serving your Lambda functions, updating as you make changes in the src/lambda folder.

You 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 with the setupProxy.js file.

Run the app dev server

While the functions server is still running, open a new terminal tab and run:

yarn start

This will start the normal create-react-app dev server and open your app at http://localhost:3000.

Local in-app requests to the relative path /.netlify/functions/* will automatically be proxied to the local functions dev server.

Note: You can also use npm-run-all to run the functions dev server and app dev server concurrently. Note that you don't need this if you use netlify dev as function builder detection does that for you.

Typescript

Click for instructions

You 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:

1. yarn add -D typescript @types/node @types/react @types/react-dom @babel/preset-typescript @types/aws-lambda
2. convert src/lambda/hello.js to src/lambda/hello.ts
3. use types in your event handler:

import { Handler, Context, Callback, APIGatewayEvent } from "aws-lambda"

interface HelloResponse {
  statusCode: number
  body: string
}

const handler: Handler = (event: APIGatewayEvent, context: Context, callback: Callback) => {
  const params = event.queryStringParameters
  const response: HelloResponse = {
    statusCode: 200,
    body: JSON.stringify({
      msg: `Hello world ${Math.floor(Math.random() * 10)}`,
      params
    })
  }

  callback(undefined, response)
}

export { handler }

rerun and see it work!

You are free to set up your tsconfig.json and tslint as you see fit.

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.

Routing and authentication

For a full demo of routing and authentication, check this branch: netlify/create-react-app-lambda#18 This example will not be maintained but may be helpful.

Service Worker

The 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). 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.