React App CI/CD with Github Actions And AWS S3

Hello Folks,
I was working on setting up CI/CD pipeline for deploying React js web applications.
Along with that I used Vite for setting up react js typescript application.

In this short blog we are going to see how we can do that

1. Set up React js Web application with typescript template using Vite
2. Use Github action to build and push build contents to S3
3. Host a static website using AWS S3 Service

1. Set up React js Web application using Vite

Let’s first understand advantages of vite over create-react-app.
Vite improves the dev server start time by first dividing the modules in an application into two categories: dependencies and source code.
Check more details at https://vitejs.dev/guide/
Now Let’s set up react js application from scratch
Use `yarn create vite react-ci-cd — template react-ts` command to create new react project.
It will create a react js template inside directory currently you’re in.
Use `yarn` to install dependencies and `yarn dev` to run your local server.
Head over to http://localhost:5173/ to see the app running.
Bravo we have set up react app with vite, it’s pretty fast for live reload.

2. Use Github action to build and push build contents to S3

For this step, let’s create a empty git repository and add source code into that directory.
I have created https://github.com/abhay-321/react-ci-cd and cloned it into my local. I have added all source code into that directory.
Let’s add git hub action to build our source code.
Create .github folder at root level and add workflows folder in that.
Inside you can create different workflows.
Let’s add workflow to build source code, so create dev-workflow.yml and add following code in it

Let’s understand what we are doing over here.
name : We have given name to our workflow as React CI
push : Our workflow will get triggered whenever we push something to master
jobs : We can create multiple jobs inside jobs
build : We have created build job for configuration of source code in it
steps : Using available step to fetch code and run commands
We’re done. Let’s commit and push this code to master and you’ll be able to see build triggered on git hub page.
You can check build triggered on github repository page.

You can click on that yellow dot to see the build details or go to actions tab in repository page. Let’s add one more step to push build to S3 bucket. But before that let’s create s3 bucket

3. Host a static website using AWS S3 Service

Head over aws s3 console and create s3 bucket, add name to bucket and disable block public access and click on Create bucket button.

Now to go to properties section and Enable Static Web hosting, also add index.html as index document

Also in Permissions section Add following bucket policy with your bucket arn

We are done with set up for S3.
Let’s go to github dashboard and click on settings for repository
Click on Secrets and then Actions and add secrets as follows

You can get access and secret key from IAM service and bucket name from s3.
Now let’s update our github workflow to push build to s3.

Add above step just below the build step. Here we are using already built step which helps us to push build into s3. We need to specify access key, secret key and bucket name. We have already stored them inside secrets.
Let’s commit this code and push to git. You can see the action triggered in git. Once build is finished, you can go to S3’s Properties section and copy url from Static web hosting section. Open that url in web browser
Hooray, We are able to automate web hosting for our react ci cd app.
Now every time you push something to master branch that will be automatically reflected in your web site.
Facing issues in work flows, no worries, checkout ready code base at
GitHub Repo for CI/CD

In next article we’ll take this more further with Cloudfront and Route53 services

Stay tuned, Thanks for reading :)