This is a sample project that uses create-react-app and netlify-lambda to fetch Star Wars characters from SWAPI
Install dependencies:
yarn install
Start it locally:
yarn run start
Build the front-end application and lambda functions:
yarn run build
Build only netlify lambda functions:
yarn run build:functions
Initialize your application with create-react-app package typing:
npx create-react-app your-project-name
Add the netlify-lambda package, which helps build Netlify lambda builds using Webpack and Babel, and axios to fulfill our requests.
yarn add netlify-lambda axios
Create a directory to store the lambda functions to be used. In our case, in /src/functions.
Create the netlify.toml file at the root path of the project to map the build destination of our lambdas.
[build]
functions = "/build/lambda"Create your lambda function. In our case, to fetch Star Wars character information from SWAPI.
Use netlify-lambda to test the lambda locally with:
npx netlify-lambda serve /src/functions
Access http://localhost:XXXX/.netlify/functions/{FUNCTION NAME} to get the lambda function response.
Set the following scripts in package.json:
"scripts": {
"start:server": "netlify-lambda serve /src/functions",
"start": "react-scripts start & yarn run start:server",
"build:functions": "netlify-lambda build /src/functions",
"build": "react-scripts build && yarn run build:functions",
},Add the http-proxy-middleware package with the following command:
yarn add http-proxy-middleware --dev
Then, set up the setupProxy.js file.
Develop the lambda function call at the front-end. In our case, in App.js file.
Connect and deploy your application to Netlify platform following these instructions.
MIT