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
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://www.netlify.com/docs/cli/?utm_source=github&utm_medium=swyx-CRAL&utm_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:
4
-
5
-
6
-
[](https://app.netlify.com/start/deploy?repository=https://github.com/netlify/create-react-app-lambda&utm_source=github&utm_medium=swyx-CRAL&utm_campaign=devex)
7
-
8
-
> ⚠️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)).
9
-
10
-
## Project Setup
11
-
12
-
**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"`.
13
-
14
-
**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&utm_medium=swyx-CRAL&utm_campaign=devex).
15
-
16
-
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`.
17
-
18
-
## Video
19
-
20
-
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
21
-
22
-
## Babel/webpack compilation
23
-
24
-
All functions (inside `src/lambda`) are compiled with webpack using Babel, so you can use modern JavaScript, import npm modules, etc., without any extra setup.
3
+
Started with this Lambda starter kit: https://github.com/netlify/create-react-app-lambda
25
4
26
5
## Local Development
27
6
@@ -36,73 +15,16 @@ yarn # install all dependencies
36
15
ntl dev ## nice shortcut for `netlify dev`, starts up create-react-app AND a local Node.js server for your Netlify functions
37
16
```
38
17
39
-
This fires up [Netlify Dev](https://www.netlify.com/docs/cli/?utm_source=github&utm_medium=swyx-CRAL&utm_campaign=devex#netlify-dev-beta), which:
40
-
41
-
- 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
42
-
- 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.
43
-
44
-
You can view the project locally via Netlify Dev, via `localhost:8888`.
18
+
View site: `localhost:8888`.
45
19
46
20
Each function will be available at the same port as well:
47
21
48
22
-`http://localhost:8888/.netlify/functions/hello` and
During deployment, this project is configured, inside `netlify.toml` to run the build `command`: `yarn build`.
54
-
55
-
`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`).
56
-
57
-
## Typescript
26
+
Add functions that export with the `handler` name inside `src/lambda` and it will be available at: `http://localhost:8888/.netlify/functions/{function_name}`
58
27
59
-
<details>
60
-
<summary>
61
-
<b id="typescript">Click for instructions</b>
62
-
</summary>
63
-
64
-
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)}`,
84
-
params,
85
-
}),
86
-
}
87
-
88
-
callback(undefined, response)
89
-
}
90
-
91
-
export { handler }
92
-
```
93
-
94
-
rerun and see it work!
95
-
96
-
You are free to set up your `tsconfig.json` and `tslint` as you see fit.
97
-
98
-
</details>
99
-
100
-
**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.
101
-
102
-
## Routing and authentication with Netlify Identity
103
-
104
-
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.
105
-
106
-
## Service Worker
28
+
## Deployment
107
29
108
-
`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.
30
+
Push to master and it will be updated on Netlify: https://react-apollo-lambda-netlify.netlify.app/
0 commit comments