<p>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.</p>
<p>I've been told Bitnami's repo for Helm Charts are a good place to start to solve this problem.
So my question is <strong>what Bitnami chart should I use to deploy a react SPA to a Kubernetes cluster? And where can I find the steps explained?</strong></p>
<h1>What I want</h1>
<p>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 <code>build</code> subdirectory holds the website.</p>
<h1>What I currently do (How to deploy a SPA to K8S my steps)</h1>
<p>What I currently do is described below.  I'm starting from a new app created by <code>create-react-app</code> 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).</p>
<p>The following commands do the following:</p>
<ol>
<li>Create a new React application</li>
<li>Create a docker container for it.</li>
<li>Build and test the SPA running in a local docker image .</li>
<li>Create a helm chart to deploy the image to K8S.</li>
<li>Configure the helm chart so it uses the docker image created in step 3.</li>
<li>Using the helm CLI deploy the SPA app to the k8s cluster.</li>
<li>Test the SPA running in k8s cluster.</li>
</ol>
<h3>#1 Create a new React application</h3>
<pre><code>npx create-react-app spatok8s
cd spatok8s
npm run build
</code></pre>
<p>At this point the static SPA website is created an is in the <code>build</code> directory.</p>
<h3>2. Create a docker container for it.</h3>
<p>Next, create Dockerfile with the following.  For example, <code>vi Dockerfile</code> and put the following in it.    The Dockerfile was what is described here <a href="https://hub.docker.com/_/nginx" rel="nofollow noreferrer">https://hub.docker.com/_/nginx</a>.</p>
<pre><code>FROM nginx
copy build /usr/share/nginx/html
</code></pre>
<p>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 <code>/usr/share/nginx/html/index.html</code> file.</p>
<h3>3. Build and test the SPA running in a local docker image .</h3>
<p>Next build the docker image <code>spatok8s</code> and run it locally, and open your browser to http://localhost:8082 (used in this example).</p>
<pre><code>docker build -t spatok8s .
docker run -d -p8082:80 spatok8s
</code></pre>
<p>After you've verified it works stop it using <code>docker stop #</code> where the <code>#</code> is the container number from <code>docker ps -q --filter ancestor=spatok8s</code>.</p>
<h3>4. Create a helm chart to deploy the image to K8S.</h3>
<p>Now create a helm chart so I can deploy this docker image to Kubernetes:</p>
<pre><code>helm create spatok8schart
</code></pre>
<h3>5. Configure the helm chart so it uses the docker image created in step 3.</h3>
<p>Update the helm chart for this application <code>vi spatok8schart</code></p>
<p>The lines changed are included below:</p>
<pre><code>  # 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: spatok8s.local
. . .
          serviceName: spatok8s.local
</code></pre>
<h3>6. Using the helm CLI deploy the SPA app to the k8s cluster.</h3>
<p>Deploy it</p>
<pre><code>helm install spatok8s spatok8schart
</code></pre>
<p>The output for the last command is:</p>
<pre><code>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/

</code></pre>
<h3>7. Test the SPA running in k8s cluster.</h3>
<p>Open the browser to <a href="http://spatok8s.local" rel="nofollow noreferrer">http://spatok8s.local</a>.
If you are doing local development and your Kubernetes environment is not automatically setting up your DNS names, then you'll have to manually set the hostname spatok8s.local to the IP address of the kubernetes cluster.
The files <code>/etc/hosts</code> or <code>c:\Windows\System32\Drivers\etc\hosts</code> can be used to hold that information.</p>
<h3>Searching for a solution</h3>
<p>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.</p>
<p>I searched <code>helm chart for deploying a single page app?</code> and found:</p>
<ul>
<li><p><a href="https://developer.ibm.com/depmodels/cloud/tutorials/convert-sample-web-app-to-helmchart/" rel="nofollow noreferrer">https://developer.ibm.com/depmodels/cloud/tutorials/convert-sample-web-app-to-helmchart/</a> - Which requires an IBM private cloud (a non-starter for me).</p>
</li>
<li><p><a href="https://wkrzywiec.medium.com/how-to-deploy-application-on-kubernetes-with-helm-39f545ad33b8" rel="nofollow noreferrer">https://wkrzywiec.medium.com/how-to-deploy-application-on-kubernetes-with-helm-39f545ad33b8</a> - A medium article which looked overly complicated for what I want to do.</p>
</li>
<li><p><a href="https://opensource.com/article/20/5/helm-charts" rel="nofollow noreferrer">https://opensource.com/article/20/5/helm-charts</a> - Good article but not what I'm looking for</p>
</li>
</ul>

PatS
<p>A search for &quot;What bitnami chart should I use to deploy a React SPA?&quot; is what worked for me.
See <a href="https://docs.bitnami.com/tutorials/deploy-react-application-kubernetes-helm/" rel="nofollow noreferrer">https://docs.bitnami.com/tutorials/deploy-react-application-kubernetes-helm/</a>.</p>
<p>I'll summarize the steps below but this website should be around for a while.</p>
<h1>The Binami Approach</h1>
<p>Step 1: Build and test a custom Docker image
Step 2: Publish the Docker image
Step 3: Deploy the application on Kubernetes</p>
<h3>Step 1: Build and test a custom Docker image</h3>
<p>The website provides a sample react app</p>
<pre><code>git clone https://github.com/pankajladhar/GFontsSpace.git
cd GFontsSpace
npm install
</code></pre>
<p>Create a Dockerfile with the following:</p>
<pre><code>FROM bitnami/apache:latest
COPY build /app
</code></pre>
<p>Build and test it.  <em>Build the Docker image, replacing the USERNAME placeholder in the command below with your Docker Hub username:</em></p>
<pre><code>docker build -t USERNAME/react-app .
</code></pre>
<p>Run it to verify it works:</p>
<pre><code>docker run -p 8080:8080 USERNAME/react-app
</code></pre>
<h3>Step 2: Publish the Docker image</h3>
<pre><code>docker login
docker push USERNAME/react-app
</code></pre>
<p><em>Again use your Docker hub username</em></p>
<h3>Step 3: Deploy the application on Kubernetes</h3>
<p>Make sure that you can to connect to your Kubernetes cluster by executing the command below:</p>
<pre><code>kubectl cluster-info
</code></pre>
<p>Update your Helm repository list:</p>
<pre><code>helm repo add bitnami https://charts.bitnami.com/bitnami
helm repo update
</code></pre>
<p>Deploy the application by executing the following (replace the USERNAME placeholder with your Docker username):</p>
<pre><code>helm install apache bitnami/apache \
    --set image.repository=USERNAME/react-app \
    --set image.tag=latest \
    --set image.pullPolicy=Always
</code></pre>
<p>If you wish to access the application externally through a domain name and you have installed the NGINX Ingress controller, use this command instead and replace the DOMAIN placeholder with your domain name:</p>
<pre><code>helm install apache bitnami/apache \
    --set image.repository=USERNAME/react-app \
    --set image.tag=latest \
    --set image.pullPolicy=Always \
    --set ingress.enabled=true \
    --set ingress.hosts[0].name=DOMAIN
</code></pre>
<p>You were actually doing the same steps, so your manual approach was &quot;spot on&quot;!</p>
<p>Thanks again to Vikram Vaswani, and this website <a href="https://docs.bitnami.com/tutorials/deploy-react-application-kubernetes-helm" rel="nofollow noreferrer">https://docs.bitnami.com/tutorials/deploy-react-application-kubernetes-helm</a> that had this answer!</p>
