Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/iknowjavascript/create-react-app-lambda
https://github.com/iknowjavascript/create-react-app-lambda
Last synced: 5 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/iknowjavascript/create-react-app-lambda
- Owner: iKnowJavaScript
- Created: 2019-07-31T05:05:46.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T05:53:26.000Z (almost 2 years ago)
- Last Synced: 2023-03-07T06:12:27.967Z (almost 2 years ago)
- Language: JavaScript
- Size: 7 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
> ⚠️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).
This 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).
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`](https://www.netlify.com/docs/netlify-toml-reference/).
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`.
[![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)
## 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](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#configuring-the-proxy-manually) 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](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.
## 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:```ts
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: https://github.com/netlify/create-react-app-lambda/pull/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](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.