React static hosting with AWS S3
published: Dec 07, 2019
There are many reasons for hosting a React app on AWS S3.
These reasons include:
- Easy to set up
- Easy to deploy
- Cost effective
Part 1: Setting up the S3 Bucket
- In the AWS Management Console open up the S3 console, which can be found under Services or at this link AWS S3.
- Choose the bucket you want to use for website hosting or create a new one. To create a new bucket:
- Click the create new bucket button.
- Pick a name.
- Click the Next button twice to get to the set permissions step.
- Uncheck the Block all public access check box.
- Click the Next button and then the Create bucket button.
- If you are using an existing bucket then make sure the bucket allows public access.
- Click on the bucket.
- Click on the Permissions tab.
- Click on the Block public access button.
- Make sure the Block all public access check box is deselected.
- Click on your bucket, and then click on the Properties tab.
- Select Static website hosting.
- Select Use this bucket to host a website.
- Enter the name of the website’s index document. (It is most likely index.html)
- (OPTIONAL) If you want to add an error page or custom redirection rules you can also do it here. Since we are using React you would most likely deal with both of these things in the actual code.
- Click Save.
- After saving take a look at the top section of this Static website hosting modal, you should see an endpoint that looks like http://your-bucket-name.s3-website-us-west-2.amazonaws.com, this is where your website will be hosted once it is deployed. It is also possible to change this to a custom domain, which I plan on covering in a different article.
- Click on the Permissions tab, then the Bucket Policy button.
- Copy paste the following bucket policy into the policy editor and replace
<YOUR BUCKET NAME> with the name of your bucket. (It gives anyone permission to read the files stored in this S3 bucket)
- Click the Save button.
"Resource":["arn:aws:s3:::<YOUR BUCKET NAME>/*"]
Part 2: Set up a React Project (Skip this step if you already have a react app)
For this demo we will use create-react-app to help us set up a React app. This part assumes you already have Node.js and npm version 5.2+ installed. I wont go into details about these two since they are a large topic by themselves.
To create and start up your React app just run the following 3 commands in your terminal. You should replace your-app-name with the actual name you are using for the app.
npx create-react-app your-app-name
Part 3: Install and configure the AWS CLI
If you don’t already have the AWS CLI installed you can get detailed instructions at install AWS CLI v1.
- In your AWS Console, go to Services and select IAM or just go to IAM Console.
- In the left panel click on Users.
- If you already have a user you can click on them of you can click the Add User button.
- Enter a user name, select the Programmatic access check button for Access Type then click the Next button.
- Select Attach Existing policies directly.
- In the filter search bar type S3.
- Select the AmazonS3FullAccess policy by clicking its checkbox.
- Click the Next button twice.
- You will then be shown the newly created user’s Access key ID and Secret access key, and given the option to download a .csv file. I recommend downloading it and storing it somewhere safe.
IMPORTANT: Do NOT share these keys with other people or commit them in your code.
Someone with these keys could delete all your S3 content. If you do accidentally share your keys or commit them to your code you can deactivate/delete them and create new keys. It is also possible to change the S3 access to only a specific bucket which is a better safety practice, but I don’t want to get too much into IAM policy.
- Now with the AWS CLI installed and the access keys in hand you can run the following command from your command line tool.
- You will be prompted for the following:
- AWS Access Key ID, enter the access key we just created.
- AWS Secret Access Key, enter the secret access key you just created.
- Default region name, enter the region of your s3 bucket.
- Default output format, just press enter.
Part 4: Deploy your app
Once parts 1–3 are completed deployment is very straightforward. You just need to copy paste the following line of code into the scripts section of your package.json file (found in the base folder of your react app). After pasting the script replace
<Your Bucket Name> with the actual name of your bucket. If you don’t use yarn you can replace yarn build with npm run build.
"deploy": "yarn build && cd build && aws s3 sync --delete . s3://<Your Bucket Name> && cd .."
This command will create the project build, change into the build directory, and then sync the new build files to S3 while deleting the old files. After the build/deploy process is complete you can go to the S3 bucket’s endpoint to view the deployed site.