About

This app is a Todo app that use React, Redux, and Netlify Lambda functions. This is basically a demo to make sure we containerize the app and deploy it to Kubernetes using helm charts, and using Minikube or Kind.

Prerequisites

• You will need to have Docker installed on your machine.
• You will need to have Minikube or Kind installed on your machine.
• You will need to have Helm installed on your machine.
• You will need to have kubectl installed on your machine.

How to run the app

• Clone the repo
• Run npm ci to install the dependencies
• Run npm start to start the app
• Run npm run build to build the app
• Run npm run test to run the tests

How to run the app in a container

• Run docker build -t todo-app . to build the image
• Run docker run -p 3000:3000 todo-app to run the container

If you have a container registry

• Run docker tag todo-app <your-registry>/todo-app to tag the image
• Run docker push <your-registry>/todo-app to push the image to the registry

Build the image with helmchart

• Add your registry to the helmchart/values.yaml file
• Add the deployment.yaml file to the helmchart/templates folder
• Add the service.yaml file to the helmchart/templates folder

How to run the app in Kubernetes

• Run minikube start to start the cluster
• Run helm install todo-app ./helmchart to build the app within helmchart
• Run helm uninstall todo-app to uninstall the app

Check the app

• Run minikube service todo-app to check the app
• Run minikube dashboard to check the dashboard
• Check the pods, deployments, and services:
  • Run kubectl get pods
  • Run kubectl get deployments
  • Run kubectl get services

How to run the app in Kind

• Run kind create cluster --name todo-app to create the cluster
• Run helm install todo-app ./helmchart to build the app within helmchart
• Run helm uninstall todo-app to uninstall the app
• Check the pods, deployments, and services:
  • Run kubectl get pods
  • Run kubectl get deployments
  • Run kubectl get services

Create-React-App-Lambda

This project is a reference demo showing you how to use Create React App v3 and netlify-lambda v1 together in a Netlify Dev 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:

⚠️NOTE: You may not need this project at all. Netlify Dev 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).

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.

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

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.

Local Development

## 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, 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, 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

Deployment

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).

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:

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.

Routing and authentication with Netlify Identity

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.

Service Worker

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.