Automating a React App Hosted on AWS S3 (Part 3): Snowflake Healthcheck
Automating a React app with CircleCI and GitHub
Introduction to Part 3 of the Series
This is the final article in a three-part series. In this demo, I will automate a React app that is hosted on S3 with GitHub and CircleCI. React is an amazing tool that developers use to build interactive and component-based user interfaces. CircleCI is a CI/CD tool that enables project automation. If you choose to follow along, you will have an automated, working React app hosted on S3 by the end of this demonstration.
If you missed the first part of the series where I demonstrate how to set up an S3 bucket and IAM user on AWS, be sure to check it out here. The React app we are automating today is the same app we created and hosted on S3 in part 2. If you haven’t done so, feel free to read part 2 of the series so you can follow along.
I’ve also been highlighting certain aspects of Snowflake that merit consideration if you are considering a cloud data platform. We focus on building Snowflake utilities because the ratio of requests that we get to implement Snowflake for customers versus all other cloud data platforms is over 6:1 — the data speaks for itself.
Here are my final three aspects to consider that I believe set Snowflake apart from other platforms:
- Snowflake’s autosuspend and autoresume allow you to avoid a great deal of manual effort and control costs at the same time.
- Snowflake enables you to dynamically switch compute on the fly.
- Snowflake’s UI is intuitive and easy to pick up and become productive with quickly.
During this series, I’ve been building the basic automation framework we are using to develop Snowflake Healthcheck. Healthcheck is the latest Snowflake utility in development at Hashmap to help users measure and improve the health of their Snowflake environment. However, this series is not specific to Snowflake Healthcheck and the concepts learned here can be applied to any React app hosted on S3.
If you have been following along, you should have a working React app deployed on an S3 bucket that looks similar to the above screenshot. The app works correctly and we can manually update the app on S3 by repeating the process we used in part 2.
However, this process is error-prone and inefficient. Wouldn’t it be great if there was a way to update our deployed application with a simple git push? This is where CircleCI and automation come into play.
Automate a React App Using CircleCI
Let’s work on automating the deployment of the app. Before tackling automation with CircleCI, we need to link our React project to a remote GitHub repository. Here is the tutorial I used.
Now that you have linked your project with a GitHub repo, let’s automate the app. First, create a free CircleCI account. Then, navigate to Pipelines and add a project. As you can see, I have all of my personal GitHub repositories listed. The snowflake-healthcheck repository isn’t listed because it is owned by Hashmap.
Set Up Project on the desired repo and Add Config. This will commit a config.yml file to the chosen repo on a branch called circleci-project-setup.
On this branch, CircleCI pulls the code from master and adds a .circleci directory to the project. Inside the directory is the config.yml file. This is where we will configure our automation for the React app.
To get this remote branch on your terminal, you need to checkout a new local branch and pull the code from the remote branch into the local branch.
- Create and checkout a new local branch:
git checkout -b react-automation - Pull the code from the remote branch:
git pull origin circleci-project-setup
Now you should have the config.yml file in your local branch. Please note that I create and checkout a branch called “react-automation”. Name your branch anything you like.
Setting Up the Config File
You should see the .circleci folder inside the root of your project. It’s time to automate our React app!
Copy the above code and paste it into your config.yml file. Change both occurrences of <your_React_app_directory> to the relative path of the directory that contains your React app files. Also, change <your_S3_bucket> to your S3 bucket name.
Important: Notice the last three lines of code in config.yml that are commented out. In normal circumstances, I would uncomment those lines of code. If they are uncommented, the deploy_react job will only run when I change is made to the master branch of the git repo. In the file’s current state, the job runs every time I commit and push from any branch in the git repo. This means that the S3 bucket will update anytime there is a git push. For a real project, it is best practice to only update the files in the S3 bucket when the master branch is changed. Therefore, after you are done testing the automation for your project, you should uncomment the last three lines of code so the app updates in S3 only when master is changed.
Before diving into the specifics of the above config file, I will briefly cover how config.yml files are used in CircleCI. There are two major concepts to understand: jobs and workflows.
Every job contains steps. These steps serve as instructions for the job. There can be multiple steps defined in one job. A workflow assigns which jobs to run when it is triggered. A workflow is triggered when there is a git push from a local branch to the remote branch.
My config.yml is simple. I have one job and one workflow. The deploy_react job contains three steps and runs on a Nodejs Docker image that is provided by CircleCI. This image comes pre-installed with node 14.11.0.
The first step runs checkout. This command checks out the current version of the code in my working git branch.
The second step installs the dependencies that are required to upload the React app to AWS S3. Let’s go through the major commands.
npm install:
Installs the node dependencies from package.json
sudo apt-get update && sudo apt-get install -y python-dev:
Installs python
sudo curl -O https://bootstrap.pypa.io/get-pip.py:
Gets a zip file that contains a copy of pip
sudo python get-pip.py:
Installs pip
sudo pip install awscli — upgrade:
Installs the AWS CLI
The final step builds the static files of the React app and deploys those static files to my AWS S3 bucket.
npm run build:
Packages the static React files up for production
aws s3 sync build/ s3://<your_S3_bucket> --delete:
Syncs the files in the S3 bucket with the files in the build directory
The deploy_react job completes all of the tasks that we manually performed in part 2 of the series. It packages up the React app and deploys it to an S3 bucket. This job is called in my build_and_deploy workflow.
CircleCI Environment Variables
Important: Notice that there is no step that runs aws configure
How does CircleCI connect to my AWS account? The answer is environment variables.
Environment variables in CircleCI allow developers to securely add important variables to a config.yml file. Let’s set up a few environment variables for our project. In CircleCI, navigate to Project > Your-Project > Project Settings >Environment Variables. Your screen should look similar to this:
To create a new environment variable, Add Variable. Then, enter a variable Name and Value. Please note that all characters of an environment variable Name must be uppercase. I make two environment variables for this project.
- AWS_ACCESS_KEY_ID
- AWS_SECRET_ACCESS_KEY
Both AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY can be found in the new_user_credentials.csv that you created in part 1 of the series. Enter those values found in the new_user_credentials.csv as the Values for your variables in CircleCI.
Including AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY as environment variables automatically configures AWS for us. We do not have to worry about running aws configure as we did in part 2. Make sure to name the above two variables exactly as I did. The AWS CLI looks for specific, CircleCI provided variable names to connect with AWS.
If I had included these important variables in my config.yml file, anyone could access my AWS account just by looking at the file on the GitHub repository. This would have been a security issue.
Testing the Automation
Now that we have configured our config file, it’s time to see if our automation actually works. Before we do this, change the <p> in App.js from “Edit src/App.js and save to reload” to “Testing Automation”.
This is not a functional change, but it ensures our automation actually adds the new React files to the S3 bucket and deletes the old files.
Let’s commit and push this change to our remote branch and see if it updates our React app in S3. You can watch the progress in the CircleCI console by going to the project’s Pipelines. To see the files updated in S3, navigate back to the Static Website Hosting endpoint URL in the S3 bucket.
Congratulations!
You have successfully automated your React app. You can now make changes locally on your machine and push those changes to your GitHub branch to automatically update your React app in your S3 bucket.
This is the automation framework for Snowflake Healthcheck by Hashmap. It is currently in development, but I’ll be sure to update this article when it is released so you can check it out!
Ready to accelerate your digital transformation?
At Hashmap, we work with our clients to build better, together.
If you’d like additional assistance in this area, Hashmap offers a range of enablement workshops and consulting service packages as part of our consulting service offerings, and would be glad to work through your specifics in this area.
How does Snowflake compare to other data platforms? Our technical experts have implemented over 250 cloud/data projects in the last 3 years and conducted unbiased, detailed analyses across 34 business and technical dimensions, ranking each cloud data platform.
Feel free to share on other channels and be sure and keep up with all new content from Hashmap here. To listen in on a casual conversation about all things data engineering and the cloud, check out Hashmap’s podcast Hashmap on Tap as well on Spotify, Apple, Google, and other popular streaming apps.
Other Tools and Content You Might Like
Sam Kohlleffel is in Hashmap’s RTE Internship program developing data and cloud applications and is also a student at Texas A&M University studying Economics, Math, and Statistics.
