How can I package and run a React Single Page App using Bitnami?

I have a react SPA (Single Page Application) and want to deploy it to a Kubernetes environment. For the sake of keeping it simple, assume the SPA is stand alone.

I've been told Bitnami's repo for Helm Charts are a good place to start to solve this problem. So my question is what Bitnami chart should I use to deploy a react SPA to a Kubernetes cluster? And where can I find the steps explained?

What I want

The desired solution should be a Helm Chart that serves up static content. Typically app.js and index.html page, and other static content. And lets me specify the sub-directory to use as the contents of the website. In react, the build subdirectory holds the website.

What I currently do (How to deploy a SPA to K8S my steps)

What I currently do is described below. I'm starting from a new app created by create-react-app so that others could follow along and do this if needed to helm answer the question. This assumes you have Docker, Kubernetes and helm installed (as well as node and npm for React).

The following commands do the following:

  1. Create a new React application
  2. Create a docker container for it.
  3. Build and test the SPA running in a local docker image .
  4. Create a helm chart to deploy the image to K8S.
  5. Configure the helm chart so it uses the docker image created in step 3.
  6. Using the helm CLI deploy the SPA app to the k8s cluster.
  7. Test the SPA running in k8s cluster.

#1 Create a new React application

npx create-react-app spatok8s
cd spatok8s
npm run build

At this point the static SPA website is created an is in the build directory.

2. Create a docker container for it.

Next, create Dockerfile with the following. For example, vi Dockerfile and put the following in it. The Dockerfile was what is described here https://hub.docker.com/_/nginx.

FROM nginx
copy build /usr/share/nginx/html

These commands say to use the NGINX docker image (from dockerhub) and copy my website onto the image so my website will be self contained within the image. When the image starts (nginx starts) and the only content to be served will be my index.html file in the /usr/share/nginx/html/index.html file.

3. Build and test the SPA running in a local docker image .

Next build the docker image spatok8s and run it locally, and open your browser to http://localhost:8082 (used in this example).

docker build -t spatok8s .
docker run -d -p8082:80 spatok8s

After you've verified it works stop it using docker stop # where the # is the container number from docker ps -q --filter ancestor=spatok8s.

4. Create a helm chart to deploy the image to K8S.

Now create a helm chart so I can deploy this docker image to Kubernetes:

helm create spatok8schart

5. Configure the helm chart so it uses the docker image created in step 3.

Update the helm chart for this application vi spatok8schart

The lines changed are included below:

  # Update the repo to use the Docker image just built
  repository: spatok8s
. . .
   # Update the URL to use to access the SPA when it is deployed to Kubernetes
   - host: spato8ks.local
. . .
          serviceName: spato8ks.local

6. Using the helm CLI deploy the SPA app to the k8s cluster.

Deploy it

helm install spatok8s spatok8schart

The output for the last command is:

NAME: spatok8s
LAST DEPLOYED: Thu Apr  8 22:50:26 2021
NAMESPACE: default
STATUS: deployed
REVISION: 1
NOTES:
1. Get the application URL by running these commands:
  http://spatok8s.local/

7. Test the SPA running in k8s cluster.

Open the browser to http://spatok8s

So it works but it isn't as easy as I've been told it could be, so I'm searching for the Bitnami chart that will make this easier.

Searching for a solution

I searched helm chart for deploying a single page app? and found:



Read more here: https://stackoverflow.com/questions/67014857/how-can-i-package-and-run-a-react-single-page-app-using-bitnami

Content Attribution

This content was originally published by PatS at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: