Built from create-react-app-lambda and deployed to Netlify.
A React powered E-Commerce site for Boom263, a small business selling airtime, data bundles and electricity tokens using Deriv balances.
A user can buy airtime, data bundles and electricity tokens using their Deriv balance. In future, they can also top up their Deriv balance using several payment methods.
Payment is in the form of a Deriv payment agent withdrawal. An email is sent to the user with a link to the payment agent withdrawal page. The user can then complete the withdrawal and the payment is made. The user is then shown their voucher code.
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
.
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
.
## 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/trevorsibanda/boom263 ## 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, which:
- Detects that you are running a
create-react-app
project and runs the npm script that containsreact-scripts start
, which in this project is thestart
script - Detects that you use
netlify-lambda
as a function builder, and runs the npm script that containsnetlify-lambda build
, which in this project is thebuild: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
andhttp://localhost:8888/.netlify/functions/async-dadjoke
During deployment, this project is configured, inside netlify.toml
to run the build command
: yarn build
.
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
).
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:
yarn add -D typescript @types/node @types/react @types/react-dom @babel/preset-typescript @types/aws-lambda
- convert
src/lambda/hello.js
tosrc/lambda/hello.ts
- use types in your event handler:
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 };
rerun and see it work!
You are free to set up your tsconfig.json
and tslint
as you see fit.
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.
For a full demo of routing and authentication, check this branch: netlify/create-react-app-lambda#18 This example will not be maintained but may be helpful.
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). 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.