diff --git a/.gitignore b/.gitignore
index 1fd13e6..3e6e06e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,9 +8,7 @@
# production
/build
-/built-lambda
-
-/.netlify
+/lambda
# misc
.DS_Store
diff --git a/.netlify/state.json b/.netlify/state.json
new file mode 100644
index 0000000..15a3e46
--- /dev/null
+++ b/.netlify/state.json
@@ -0,0 +1,3 @@
+{
+ "siteId": "7e90bfd6-f704-4384-8a3a-78e0d8ab77ef"
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index 1e5092a..e058a1d 100644
--- a/README.md
+++ b/README.md
@@ -1,108 +1,39 @@
-## Create-React-App-Lambda
+This project is based on [Create React App](https://github.com/facebookincubator/create-react-app). (For more information about Create react App, check their full [documentation](https://github.com/facebookincubator/create-react-app#create-react-app).)
-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:
+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`.
-[](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)
-
-> ⚠️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)).
-
-## Project Setup
-
-**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"`.
-
-**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).
-
-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`.
-
-## 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
+[](https://app.netlify.com/start/deploy?repository=https://github.com/netlify/create-react-app-lambda)
## Babel/webpack compilation
-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.
+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
-```bash
-## prep steps for first time users
-npm i -g netlify-cli # Make sure you have the [Netlify CLI](https://github.com/netlify/cli) installed
-git clone https://github.com/netlify/create-react-app-lambda ## clone this repo
-cd create-react-app-lambda ## change into this repo
-yarn # install all dependencies
-
-## done every time you start up this project
-ntl dev ## nice shortcut for `netlify dev`, starts up create-react-app AND a local Node.js server for your Netlify functions
-```
-
-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:
-
-- 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
-- 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.
-
-You can view the project locally via Netlify Dev, via `localhost:8888`.
-
-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`
+Before developing, clone the repository and run `yarn` from the root of the repo to install all dependencies.
-## Deployment
+### Run the functions dev server
-During deployment, this project is configured, inside `netlify.toml` to run the build `command`: `yarn build`.
+From inside the project folder, run:
-`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`).
-
-## Typescript
-
-
-
- Click for instructions
-
-
-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:
-
-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 }
+```
+yarn start:lambda
```
-rerun and see it work!
-
-You are free to set up your `tsconfig.json` and `tslint` as you see fit.
+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.
-**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.
+### Run the app dev server
-## Routing and authentication with Netlify Identity
+While the functions server is still running, open a new terminal tab and run:
-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.
+```
+yarn start
+```
-## Service Worker
+This will start the normal create-react-app dev server and open your app at `http://localhost:3000`.
-`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.
+Local in-app requests to the relative path `/.netlify/functions/*` will automatically be proxied to the local functions dev server.
diff --git a/netlify.toml b/netlify.toml
index b90fcb7..f4b3e35 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -1,4 +1,4 @@
[build]
- command = "yarn build" # the command you run to build this file
- functions = "built-lambda" # netlify-lambda builds to this folder AND Netlify reads functions from here
- publish = "build" # create-react-app builds to this folder, Netlify should serve all these files statically
\ No newline at end of file
+ Command = "yarn build && yarn build:lambda"
+ Functions = "lambda"
+ Publish = "build"
diff --git a/package.json b/package.json
index 4904211..2d92856 100644
--- a/package.json
+++ b/package.json
@@ -1,33 +1,43 @@
{
- "name": "create-react-app-lambda",
- "version": "0.5.0",
+ "name": "react-lambda",
+ "version": "0.3.0",
"private": true,
"dependencies": {
- "axios": "^0.19.0",
- "react": "^16.8.6",
- "react-dom": "^16.8.6",
- "react-scripts": "^3.0.1"
+ "react": "^16.3.1",
+ "react-dom": "^16.3.1",
+ "react-scripts": "^2.0.0-next.a671462c",
+ "netlify-lambda": "^0.4.0"
},
"scripts": {
"start": "react-scripts start",
"start:lambda": "netlify-lambda serve src/lambda",
- "build": "run-p build:**",
- "build:app": "react-scripts build",
+ "build": "react-scripts build",
"build:lambda": "netlify-lambda build src/lambda",
- "test": "react-scripts test",
+ "test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
- "eslintConfig": {
- "extends": "react-app"
+ "proxy": {
+ "/.netlify/functions": {
+ "target": "http://localhost:9000",
+ "pathRewrite": {
+ "^/\\.netlify/functions": ""
+ }
+ }
},
- "browserslist": [
- ">0.2%",
- "not dead",
- "not ie <= 11",
- "not op_mini all"
- ],
"devDependencies": {
- "netlify-lambda": "^1.4.5",
- "npm-run-all": "^4.1.5"
+ "@babel/plugin-proposal-class-properties": "^7.0.0-rc.2",
+ "@babel/plugin-transform-object-assign": "^7.0.0-rc.2"
+ },
+ "browserslist": {
+ "development": [
+ "last 2 chrome versions",
+ "last 2 firefox versions",
+ "last 2 edge versions"
+ ],
+ "production": [
+ ">0.25%",
+ "not op_mini all",
+ "ie 11"
+ ]
}
}
diff --git a/src/App.css b/src/App.css
index 92f956e..c5c6e8a 100644
--- a/src/App.css
+++ b/src/App.css
@@ -4,29 +4,25 @@
.App-logo {
animation: App-logo-spin infinite 20s linear;
- height: 40vmin;
+ height: 80px;
}
.App-header {
- background-color: #282c34;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: calc(10px + 2vmin);
+ background-color: #222;
+ height: 150px;
+ padding: 20px;
color: white;
}
-.App-link {
- color: #61dafb;
+.App-title {
+ font-size: 1.5em;
+}
+
+.App-intro {
+ font-size: large;
}
@keyframes App-logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
+ from { transform: rotate(0deg); }
+ to { transform: rotate(360deg); }
}
diff --git a/src/App.js b/src/App.js
index 6a24a0d..0f1e5a5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,33 +1,38 @@
-import React, { Component } from "react"
-import logo from "./logo.svg"
-import "./App.css"
+import React, { Component } from "react";
+import logo from "./logo.svg";
+import "./App.css";
class LambdaDemo extends Component {
constructor(props) {
- super(props)
- this.state = { loading: false, msg: null }
+ super(props);
+ this.state = { loading: false, msg: null };
}
- handleClick = api => e => {
- e.preventDefault()
+ handleClick = e => {
+ e.preventDefault();
- this.setState({ loading: true })
- fetch("/.netlify/functions/" + api)
+ this.setState({ loading: true });
+ fetch("/.netlify/functions/hello")
.then(response => response.json())
- .then(json => this.setState({ loading: false, msg: json.msg }))
- }
+ .then(
+ json =>
+ console.log({ json }) ||
+ this.setState({ loading: false, msg: json.msg })
+ );
+ };
render() {
- const { loading, msg } = this.state
+ const { loading, msg } = this.state;
return (
- {loading ? "Loading..." : "Call Lambda"}
- {loading ? "Loading..." : "Call Async Lambda"}
+
+ {loading ? "Loading..." : "Call Lambda"}
+
{msg}
- )
+ );
}
}
@@ -37,14 +42,15 @@ class App extends Component {
+
+ To get started, edit src/App.js and save to reload.
+
+
- )
+ );
}
}
-export default App
+export default App;
diff --git a/src/App.test.js b/src/App.test.js
index a754b20..b84af98 100644
--- a/src/App.test.js
+++ b/src/App.test.js
@@ -5,5 +5,4 @@ import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(