Automating a React App Hosted on AWS S3 (Part 2): Snowflake Healthcheck
Building and Hosting a React App with an S3 Bucket
Introduction to Part 2 of the Series
This is the second article in a three-part series. 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. In this demo, I will walk through the process of how to set up a sample React App and host that app using an AWS S3 Bucket.
React is an amazing tool developers use to build interactive and component-based user interfaces. If you choose to follow along, you will have an automated, working React app hosted on S3 by the end of this demonstration.
During this series, I will be 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.
Before we get to building the app, if you are considering a cloud data platform in AWS, Azure, or GCP, we highly recommend taking a hard look at Snowflake. We’ve implemented more than 65 Snowflake projects since 2018 and one of our customers (the lead data scientist on the analytics team) said it best: “What we were able to do with Snowflake in just 2 days, can take up to 2 months in our current Hadoop platform”.
Below are three more aspects to consider that I believe set Snowflake apart from other platforms:
- Snowflake is cloud-native and brings no legacy baggage to the table.
- Snowflake really is SQL, but there is also a range of connectors available for other tools such as Python, Kafka, Spark, etc.
- Every virtual warehouse operates off the same copy of data.
Alright, let’s get rolling with React and Snowflake Healthcheck.
Building a React App
To start, we need to build a working React app locally in the terminal. This step is very simple. First, we need to install npm. Npm is the package manager for javascript. Let’s use Homebrew to install npm.
Once homebrew is installed, run brew install node. This installs the stable release of Nodejs and npm on your machine.
Now, we’re ready to create the React app. To initiate the app for Snowflake Healthcheck, I run npx create-react-app snowflake_healthcheck in the terminal.
The command for creating a React app is broken down as follows: npx create-react-app <app name> where <app name> is the directory in which the React app files will be located. After I run the above command, my app files are located in the snowflake_healthcheck directory. You can name your app anything you like. Just keep in mind that every character in your <app name> must be lowercase.
To test that the app is working, I am going to cd into the snowflake_healthcheck directory and run npm start in the terminal. This command will take me to the React app webpage. It looks like everything is working correctly:
Host React App on S3 Bucket
Before we can host the React app, we need to install the AWS CLI tool. This tool allows you to interact with your AWS account from the local terminal. To install this tool easily, it is recommended to have python installed. Once python is installed, run pip install awscli. After you have the CLI tool, run aws s3 ls to confirm the installation. If it installs correctly, you should get an AWS error.
The tool is installed, but you still need to configure your AWS IAM account that you made earlier.
To do this, run aws configure. You will be asked to enter your AWS Access Key ID. To find the Access Key, you need to open new_user_credentials.csv and copy the Access Key ID value then paste it into the terminal. You will then be asked to enter your AWS Secret Key ID. This can once again be found in the .csv file. For the Default region name, enter your AWS region. My region is us-east-1. Leave the Default output format as blank.
To confirm everything was set up correctly, I run aws s3 ls again:
As you can see, this command lists my S3 buckets including the react-test-healthcheck bucket that I created in the AWS Console earlier.
Now that you have the AWS CLI installed, cd into the directory containing the React app. Then, run npm run build. This command creates a build directory and uses that directory to package the app up for production. The build directory contains all of the js, HTML, and CSS files that are needed to power the React app.
Once the app is packaged up, run:
aws s3 sync build/ s3://<bucket name> --delete
Specifically, I run:
aws s3 sync build/ s3://react-test-healthcheck --delete
This command synchronizes the files in the build directory with the files in the react-test-healthcheck bucket. The --delete tag ensures that the S3 bucket deletes any files that do not match the files in the build directory.
Time to see if the app deployed to S3 correctly. Sign in to the AWS Console and navigate to the S3 bucket containing our app. Once inside the S3 bucket, click on Properties then Static Website Hosting.
Let’s click on the Endpoint URL and see what we get!
Optional: Notice that while the React app works it isn’t HTTPS secured. If you need to secure your React app connection, you can follow this Cloudflare tutorial. Please note that Cloudflare is the DNS provider we use. If you choose to use a different DNS provider, steps to achieve HTTPS may vary slightly.
Closing Thoughts
We now have a React app with a public-facing endpoint. This is a major accomplishment, but what if there was a way to automatically update the app when I make a change? Stay tuned for the final part of the series where I show you how to automate the S3 hosted React app with CircleCI and GitHub:
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.
