CodepediaOrg / multi-stage-react-app-example

Repo for blog post - "A cleaner multi-stage continuous deployment on Kubernetes of a Create React App with kustomize, helm and skaffold"

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

Deploy on Kubernetes

Normal objects

Build docker image

docker build --tag multi-stage-react-app-example:latest .

Deploy with native kubectl commands

kubectl apply -f kubernetes/config-dev.yaml # creates the configMap in the Kubernetes cluster
kubectl apply -f kubernetes/deployment.yaml
kubectl apply -f kubernetes/service.yaml

** Undo deployments **

kubectl delete configMap multi-stage-react-app-example-config
kubectl delete deployment multi-stage-react-app-example
kubectl delete service multi-stage-react-app-example

Forward port

kubectl port-forward svc/multi-stage-react-app-example 3001:80

Then access the app at http://localhost:3001

Deploy with helm

Create release

helm upgrade dev-release ./helm-chart/ --install --force --values helm-chart/config-values/config-dev.yaml
helm ls #verify dev-release is present

Undo release

helm delete --purge dev-release

Deploy with kustomize

Build with kustomize to see what Kubernetes objects are generated

kustomize build kustomize/base/

Apply base

kubectl apply -k kustomize/base

Undo

kubectl delete -k kustomize/base

Apply DEV overlay

kubectl apply -k kustomize/overlays/dev

Undo

kubectl delete -k kustomize/overlays/dev

Cherry on the cake - use skaffold

We will use skaffold profiles

Deploy via kubectl

skaffold run -p native-kubernetes

skaffold delete -p native-kubernetes

Deploy via kustomize

For example build the prod thing:

skaffold run -p kustomize-prod

skaffold delete -p kustomize-prod