Deploy ReactJS App with S3 Static Hosting
Let’s learn how to deploy a Serverless web application using ReactJS and AWS S3.
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.
- AWS Account created
- AWS IAM User
- AWS CLI installed (and additional dependencies)
- AWS Credentials Locally Setup
Setup your AWS Account
Create an account, https://portal.aws.amazon.com/billing/signup.
Log in to the AWS console, https://signin.aws.amazon.com/signin.
Click Services at the top left and search for IAM.
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.
Give the user the name serverless-admin with Programmatic access selected. Click Next: Permissions.
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.
Now hit Create user.
We need to copy the Access Key ID and the Secret Access Key for later use. So click Download .csv. Click Close.
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.
With the terminal open, it’s time to install the AWS CLI.
$ brew install awscli
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.
$ aws configure
AWS Access Key ID [None]: AKIAIOSFODNN7EXAMPLE
AWS Secret Access Key [None]: wJalrXUtnFEMI/K7MDENG/bfiCYEXAMPLEKEY
Default region name [None]: us-west-2
Default output format [None]: ENTER
Awesome, now that we have AWS CLI and local configuration squared away. Let’s download some dependencies.
$ brew install node
$ node -v
$ npm -v
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.
$ yarn create react-app serverless-guru-app
$ cd serverless-guru-app
$ yarn start
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.
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.
Awesome, now we are going to create a S3 bucket to house our website!
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 😃
In the Set properties tab, you can just hit next.
On the Set permissions tab, select Grant public read access to this bucket and hit next.
Finally, hit Create Bucket!
Now that your S3 bucket has been created. Click on the name of your bucket to view the contents!
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.
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.
aws s3 sync build/ s3://example-bucket --acl public-read
Now when you build and deploy your app using yarn it will automatically send it up to AWS. Making your site live. 🎉
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.
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.
- 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!
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.
- Industry Predictions for 2019
- Best Practices for Serverless Development
- Serverless CI/CD
- Serverless Web Applications — AWS v GCP
- Serverless Impact, Developer Velocity
- Guide, First Serverless Project
What does Serverless Guru do?
At Serverless Guru, we work with companies who want to accelerate their move to Serverless/Cloud Native event-driven development rapidly. We help clients with cloud development, backend development, frontend development, automation, best practices, and training to elevate entire teams. We are engineers first.
What did we miss?
When you leave your answer make sure to either comment below or tweet your answer to @serverlessgurux on Twitter.
Salesforce Cloud Developer — Serverless Guru
LinkedIn — @lintonjh
Thanks for reading 😃