Skip to content

Commit 7c40227

Browse files
committed
Update README
1 parent b882d53 commit 7c40227

File tree

1 file changed

+7
-85
lines changed

1 file changed

+7
-85
lines changed

README.md

Lines changed: 7 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,6 @@
1-
## Create-React-App-Lambda
1+
## React + Apollo + Lambda + Netlify
22

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://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-
[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg?utm_source=github&utm_medium=swyx-CRAL&utm_campaign=devex)](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
254

265
## Local Development
276

@@ -36,73 +15,16 @@ yarn # install all dependencies
3615
ntl dev ## nice shortcut for `netlify dev`, starts up create-react-app AND a local Node.js server for your Netlify functions
3716
```
3817

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`.
4519

4620
Each function will be available at the same port as well:
4721

4822
- `http://localhost:8888/.netlify/functions/hello` and
4923
- `http://localhost:8888/.netlify/functions/async-dadjoke`
24+
- `http://localhost:8888/.netlify/functions/graphql`
5025

51-
## Deployment
52-
53-
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}`
5827

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:
65-
66-
1. `yarn add -D typescript @types/node @types/react @types/react-dom @babel/preset-typescript @types/aws-lambda`
67-
2. convert `src/lambda/hello.js` to `src/lambda/hello.ts`
68-
3. use types in your event handler:
69-
70-
```ts
71-
import { Handler, Context, Callback, APIGatewayEvent } from 'aws-lambda'
72-
73-
interface HelloResponse {
74-
statusCode: number
75-
body: string
76-
}
77-
78-
const handler: Handler = (event: APIGatewayEvent, context: Context, callback: Callback) => {
79-
const params = event.queryStringParameters
80-
const response: HelloResponse = {
81-
statusCode: 200,
82-
body: JSON.stringify({
83-
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
10729

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

Comments
 (0)