You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
> ⚠️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).
1
+
## Create-React-App-Lambda
2
2
3
-
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).
3
+
This 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://github.com/netlify/netlify-dev-plugin) workflow.
4
4
5
-
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/).
5
+
⚠️NOTE: You may not need this project at all. [Netlify Dev](https://github.com/netlify/netlify-dev-plugin) already works with `create-react-app` out of the box! **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), eg if you want to use Babel or TypeScript.
6
6
7
-
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`.
7
+
## Project Setup
8
+
9
+
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"`.
10
+
11
+
Dist: 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/).
12
+
13
+
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-dadjoke.js`.
14
+
15
+
Your functions will be available locally at
8
16
9
17
[](https://app.netlify.com/start/deploy?repository=https://github.com/netlify/create-react-app-lambda)
10
18
@@ -18,60 +26,47 @@ All functions are compiled with webpack using the Babel Loader, so you can use m
18
26
19
27
## Local Development
20
28
21
-
Before developing, clone the repository and run `yarn` from the root of the repo to install all dependencies.
22
-
23
-
### Start both servers concurrently
24
-
25
-
From inside the project folder, run:
26
-
27
-
```
28
-
yarn start
29
-
```
30
-
31
-
This will run both `yarn start:lambda` and `yarn start:app` at the same time (more information about the commands can be found below).
32
-
33
-
> Note: 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.
34
-
35
-
### Start each server individually
36
-
37
-
**Run the functions dev server**
38
-
39
-
From inside the project folder, run:
29
+
```bash
30
+
## prep steps for first time users
31
+
npm i -g netlify-cli # Make sure you have the [Netlify CLI](https://github.com/netlify/cli) installed
32
+
git clone https://github.com/netlify/create-react-app-lambda ## clone this repo
33
+
cd create-react-app-lambda ## change into this repo
34
+
yarn # install all dependencies
40
35
41
-
```
42
-
yarn start:lambda
36
+
## done every time you start up this project
37
+
ntl dev ## nice shortcut for `neltify dev`
43
38
```
44
39
45
-
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.
40
+
This fires up [Netlify Dev](https://github.com/netlify/netlify-dev-plugin/), which:
46
41
47
-
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.
42
+
- 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
43
+
- 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.
48
44
49
-
**Run the app dev server**
45
+
You can view the project locally via Netlify Dev, via `localhost:8888`.
50
46
51
-
While the functions server is still running, open a new terminal tab and run:
47
+
Each function will be available at the same port as well: `http://localhost:8888/.netlify/functions/hello` and `http://localhost:8888/.netlify/functions/async-dadjoke`.
52
48
53
-
```
54
-
yarn start
55
-
```
49
+
## Deployment
56
50
57
-
This will start the normal create-react-app dev server and open your app at `http://localhost:3000`.
51
+
During deployment, this project is configured, inside `netlify.toml` to run the build `command`: `yarn build`.
58
52
59
-
Local in-app requests to the relative path `/.netlify/functions/*` will automatically be proxied to the local functions dev server.
53
+
`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`).
60
54
61
55
## Typescript
62
56
63
57
<details>
64
58
<summary>
65
59
<b id="typescript">Click for instructions</b>
66
60
</summary>
67
-
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:
61
+
62
+
You 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:
msg: `Hello world ${Math.floor(Math.random() *10)}`,
87
-
params
88
-
})
82
+
params,
83
+
}),
89
84
}
90
85
91
86
callback(undefined, response)
@@ -108,4 +103,4 @@ For a full demo of routing and authentication, check this branch: https://github
108
103
109
104
## Service Worker
110
105
111
-
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.
106
+
`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.
0 commit comments