This project is based on Create React App v2 and netlify-lambda v1. (For more information about Create react App, check their full documentation.)
The main addition is a new folder: src/lambda
. Each JavaScript file in there will automatically be prepared for Lambda function deployment.
As an example, we've included a small src/lambda/hello.js
function, which will be deployed to /.netlify/functions/hello
.
All functions are compiled with webpack using the Babel Loader, so you can use modern JavaScript, import npm modules, etc., without any extra setup.
Before developing, clone the repository and run yarn
from the root of the repo to install all dependencies.
Most people should be able to get up and running just by running:
yarn start
This uses npm-run-all to run the functions dev server and app dev server concurrently.
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:app
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.
Typescript
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:yarn add -D typescript @types/node @types/react @types/react-dom @babel/preset-typescript @types/aws-lambda
- convert
src/lambda/hello.js
tosrc/lambda/hello.ts
- use types in your event handler:
import { Handler, Context, Callback } from 'aws-lambda';
interface HelloResponse {
statusCode: number;
body: string;
}
const handler: Handler = (event: any, context: Context, callback: Callback) => {
const response: HelloResponse = {
statusCode: 200,
body: JSON.stringify({
msg: `Hello world ${Math.floor(Math.random() * 10)}`
})
};
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.
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.