Deploy ReactJS App with S3 Static Hosting

Let’s learn how to deploy a Serverless web application using ReactJS and AWS S3.

Serverless Guru
Aug 7, 2018 · 7 min read
Image for post
Image for post
https://d2908q01vomqb2.cloudfront.net/polly/da4b9237bacccdf19c0760cab7aec4a8359010b0amazon_polly_28098.mp3?version=1552253883

Youtube Video: https://www.youtube.com/watch?v=PqUYq2Wx0lc

When I made my first React app the first thing I wanted to do after it was finished, was put it up on AWS, Amazon Web Services. I’ve been studying to get my AWS certified developers certificate. Almost immediately after any project, I work on, I find some way to integrate it with AWS. I found that putting a ReactJS app up on S3 is pretty easy.

Here is what we will cover:

  • Create a simple react app.
  • Configure an S3 bucket for static web hosting.
  • Deploy!

Prerequisites:

Setup your AWS Account

Create an account, https://portal.aws.amazon.com/billing/signup.

Image for post
Image for post

Log in to the AWS console, https://signin.aws.amazon.com/signin.

Image for post
Image for post

Click Services at the top left and search for IAM.

Image for post
Image for post

On the IAM console, we need to create a user for the Serverless Framework. Giving the Serverless Framework permission to create, update, and delete resources on AWS. Click Add user.

Image for post
Image for post

Give the user the name serverless-admin with Programmatic access selected. Click Next: Permissions.

Image for post
Image for post

Switch to the Attach existing policies directly tab and select AdministratorAccess (for testing). In the future, make sure to scope the IAM permissions based on your level of access. As this is not a deep dive into IAM we will keep it simple. Then click Next: Review.

Image for post
Image for post

Now hit Create user.

Image for post
Image for post

We need to copy the Access Key ID and the Secret Access Key for later use. So click Download .csv. Click Close.

Image for post
Image for post

Now we’re ready to set up our local computer for deployments. To do that, open up Spotlight (Command–Space bar) then search for terminal.

Image for post
Image for post

With the terminal open, it’s time to install the AWS CLI.

Once the AWS CLI has been installed, copy the following command passing in your Access Key ID and your Secret Access Key from the file you downloaded called, credentials.csv. More information, here.

Awesome, now that we have AWS CLI and local configuration squared away. Let’s download some dependencies.

Install Node/Npm:

Sweet, now our setup is complete. Let’s jump into creating our basic React app.

Step 1 — Creation of your App.

We’re going to use the create-react-app to set up our app. Open the terminal if it’s not still open from above.

Once your react-app is created. Change into the directory and type yarn start. Immediately, a browser window will open and send you to http://localhost:3000/. You should see a page like the one below.

Image for post
Image for post

Step 2 — Configure your S3 bucket for hosting your app.

Sign into the AWS console at https://signin.aws.amazon.com/signin. If you aren’t already.

In the search bar type S3 and hit enter.

Image for post
Image for post

Awesome, now we are going to create a S3 bucket to house our website!

Image for post
Image for post

Remember: bucket names have to be completely unique across S3. Instead of serverless-guru-app, come up with your own name and hit next.

AWS S3 changed

There have been some changes to AWS S3 since originally writing this article. AWS now has options around blocking ACLs when you setup static web hosting.

If you get stuck please review this comment from one of our readers, https://medium.com/@edtimmer/s3-bucket-set-up-must-have-changed-a-bit-and-as-a-result-i-run-into-a-significant-issue-where-i-618641966703.

Shoutout to Edward Timmer 😃

Image for post
Image for post

In the Set properties tab, you can just hit next.

Image for post
Image for post

On the Set permissions tab, select Grant public read access to this bucket and hit next.

Image for post
Image for post

Finally, hit Create Bucket!

Image for post
Image for post

Now that your S3 bucket has been created. Click on the name of your bucket to view the contents!

Image for post
Image for post

Inside your bucket, click the Properties tab. You should see an option for Static Website Hosting, click it and a modal will pop up. Select Use this bucket to host a website option and enter index.html for the Index document. You can leave the rest of the options blank and hit save.

Image for post
Image for post

Now that our S3 bucket is set up for Static Hosting we need to set up permissions. To do this click the Permissions tab and select Bucket Policy. You can copy and paste what I have below, swapping out example-bucket with your bucket name.

This gives users read access to your bucket. Go ahead and hit save.

Note: You’ll get a warning letting your know you’ve given public access to your bucket.

Great work. Everything on the AWS side is ready to go!

Step 3 — Time to Deploy!

Let’s open up our react-app project in a text editor and create a deployment script to make updating our live ReactJS application easier.

Open up your package.json file. Inside there is a section called scripts. We’re going to add a script called deploy which will use the AWS CLI to sync our build directory to our S3 bucket. Swap out example-bucket for your bucket name and copy/paste it into your package.json file using the image below as a guide.

Image for post
Image for post

Now when you build and deploy your app using yarn it will automatically send it up to AWS. Making your site live. 🎉

Image for post
Image for post

Now open up your S3 bucket in the AWS Console and copy the URL from the Static Web Hosting modal. The URL should be similar to example-bucket.s3-website-us-east-1.amazonaws.com. Navigate to the URL and you should see your app.

Image for post
Image for post

Congratulations! You created you deployed a ReactJS web application to AWS and hosted the application using S3 Static Web Hosting! In this short article, we accomplished a lot.

Review:

  • Created an AWS account
  • Configured our local machine to make AWS deployments using the AWS CLI
  • Explored the AWS console
  • Setup S3 Static Web Hosting
  • Built a simple ReactJS app using create-react-app
  • Deployed our ReactJS app to the world!

What’s next?

Now that you have a basic idea for how to set up a static website on AWS. Try taking it a step further and learning the Serverless Framework. Which will give you the power to deploy entire applications (e.g. databases, websites, cloud magic) all with a single terminal command.

Additional Content:

What does Serverless Guru do?

Serverless Guru helps companies build scalable and cost-effective applications on the cloud. We help train companies on how to leverage IAC, serverless, and cloud-native services. We help migrate existing applications to the cloud and optimize existing applications on the cloud to be more cost-effective. We are a Serverless development partner and an AWS Consulting partner.

Image for post
Image for post

What did we miss?

When you leave your answer make sure to either comment below or tweet your answer to @serverlessgurux on Twitter.

Image for post
Image for post
https://www.serverlessguru.com

Josh Linton

Salesforce Cloud Developer — Serverless Guru

LinkedIn — @lintonjh

Thanks for reading 😃

If you would like to learn more about Serverless Guru, please follow us on Medium, Twitter, Instagram, Facebook, or LinkedIn!

Serverless Guru

Serverless guides on your cloud journey

Serverless Guru

Written by

We can help you migrate to serverless, build serverless applications, and train your team on serverless best practices. https://www.serverlessguru.com

Serverless Guru

Serverless Guru exists to be a change agent and overall guide to companies around the globe whom are moving to serverless at scale. We help companies understand where serverless fits and where it doesn’t. Then we lay a proven roadmap to move them along in their serverless journey

Serverless Guru

Written by

We can help you migrate to serverless, build serverless applications, and train your team on serverless best practices. https://www.serverlessguru.com

Serverless Guru

Serverless Guru exists to be a change agent and overall guide to companies around the globe whom are moving to serverless at scale. We help companies understand where serverless fits and where it doesn’t. Then we lay a proven roadmap to move them along in their serverless journey

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store