Automating a React App Hosted on AWS S3: Snowflake Healthcheck
Part 1: Setting up an IAM Account and S3 Bucket on AWS
Introduction to the Series
This is the first article in a three-part series that will walk through the process of how to set up a sample React App and host that app using an AWS S3 Bucket. Then, we’ll work through how to build automation for the app using CircleCI and GitHub.
During this series, I will be building the basic automation framework we are using to develop Snowflake Healthcheck. Healthcheck is the latest Snowflake utility 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 haven’t taken Snowflake for a test drive yet, I would encourage you to do that today. Also, with each article in this three-part series, I’ll quickly share three aspects to consider that I believe set Snowflake apart from other platforms:
- Snowflake speeds time to business impact and there is almost no infrastructure effort required, they take care of it for you.
- Snowflake enables a modern data stack in the cloud with a very robust data integration and data consumption ecosystem that uses Snowflake’s virtual compute for everything from transformations to reporting and analytics.
- Snowflake makes it quick and easy to get started with a free 30-day trial that includes $400 in credits and you’ll be up and running in minutes.
Getting Started with AWS
Amazon Web Services (AWS) provides on-demand cloud computing platforms and APIs. I will use AWS to host the React application for this series. AWS has hundreds of services and resources but for the purposes of this tutorial, I will focus on two:
- Identity Access and Management (IAM): allows users to securely manage their AWS services and resources.
- Simple Storage Service (S3): allows users to store objects in buckets that are scalable and secure.
Creating an IAM user in the AWS Console
I set up a free AWS account prior to making this tutorial. If you want to follow along, set up a free AWS account.
With the newly created root AWS account, let’s create an IAM user so we can securely manage AWS resources and services. It is best practice to create an IAM user to manage resources instead of using the root user.
Login to your root user account at aws.amazon.com. Your page should look similar to this:
Click the orange button in the top right that says Sign In to the Console and sign in as the root user. After signing in, your page should look similar to this:
Next, click on the services tab in the top left, then go to IAM under Security, Identity, & Compliance. This takes you to the IAM dashboard.
First, you should give your account an easy to remember alias. To do this, navigate to Dashboard on the left-hand side of the IAM console. Next, find where it says Sign-in URL for IAM users in this account and click customize. Try to give your IAM URL a simple alias. This makes signing into the AWS Console as an IAM user much easier to remember.
If you are following along, try to remember this account alias or write it down somewhere. You will need it later to sign in to your IAM user account.
Next, navigate to groups on the left-hand side under Access Management and click Create New Group. Give your group a name. I choose to call my group Administrators because I will be giving this group full access to AWS resources and services.
Now let’s attach a policy to the Administrators group.
In the search bar, type “AdministratorAccess” and click the policy’s checkbox. Then, click through the next step and Create Group.
Now that you have an administrator group, go to the Users under Access Management on the left-hand side to create a new IAM user. Click Add user. Give your user both Programmatic and AWS Management Console access. You can leave the other options unchanged.
Move on to the user’s permissions page. You should see the group that you created earlier. Click the group’s checkbox to add the new user. This gives the user the permissions of that group. In our case, those are administrator permissions.
Next, click through until you get the option to Create User. After you create your new user, you should see this page:
Click on the Download.csv button. This .csv file contains the necessary credentials to sign in to the AWS Console as the IAM user you just created. Sign out of your root user account so you can set up your S3 bucket. We can now securely manage our AWS services with this IAM account!
Setting up an S3 Bucket
Now you’re ready to set up an S3 bucket to host the React app. First, open up your .csv file that contains your IAM user credentials. It should be named new_user_credentials.csv. Copy the Console login link and paste it into your browser:
Enter account alias (the one that you set up earlier), username, and password. Both username and password can be found in the .csv file.
After you sign in, find the services tab in the top left and navigate to S3 which is located under Storage. Now, click Create bucket:
Enter a bucket name and region. I am going to call my bucket react-test-healthcheck and set the region to US East (N. Virginia). Bucket names must be unique, so you will have to give yours a different name. This will be the bucket we will use to host our React App in part two of this series.
Click through Configure Options. For this tutorial, uncheck Block Public Access when you reach Set Permissions. Finally, click next and Create Bucket. Click on your new S3 bucket and navigate to Permissions > Bucket Policy:
Copy the above S3 policy, paste it to your Bucket policy editor, and save. Make sure to change where it says <your s3 bucket name> to the name you gave your bucket. This will give users access to the React webpage with Read-Only permissions. You can find more examples of S3 Policies here. In general, be more specific with the bucket policies and permissions for real projects, but for the purpose of this tutorial, this policy will do. This is how your S3 Bucket Policy should look in the AWS Console:
Next, navigate to Properties > Static Website Hosting and click Use this bucket to host a website.
This enables you to host your static React files on your S3 bucket. Under Index Document and Error Document enter “index.html”. After you’ve completed this step, click Save.
Testing Our S3 Configuration
Now that we’ve created and configured an S3 bucket to host a static website, let’s make sure that it works. To do this, upload a file called index.html to your S3 Bucket. Feel free to copy the below code snippet or make your own index.html file. The contents of the file aren’t important. Just ensure that it’s named index.html because that's the static file name we configured our S3 bucket to look for:
Now it’s time to upload index.html. Click on your S3 bucket if you aren’t already inside and go to Overview > Upload > Add files:
Add index.html from your local machine to the S3 bucket. Next, navigate to Properties > Static website hosting > Endpoint and click on the URL:
Clean Up
Let’s clean up our S3 bucket so it can be ready to host a React app. Navigate to Overview and check index.html. Next, under Actions click Delete.
Closing Thoughts
Congratulations! We have successfully set up an IAM account and an S3 bucket on AWS. Stay tuned for part two of the series where we build a sample React application and deploy that app to our newly created S3 bucket! Also, be sure to checkout Snowflake Healthcheck. It’s free, open-source, and easy to use!
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.
