DEV Community 👩‍💻👨‍💻

Cover image for How to host a React application on AWS S3
Andre de Vries
Andre de Vries

Posted on

How to host a React application on AWS S3

There are many ways to host your website on Amazon Web Services (AWS). One of the easiest is to use an S3 bucket to host your static website. Setup and configuration is fairly straightforward for this option. Take a look at the video and see how easy it is. In the video I explain how you can either manually build out your React application and then upload it to a bucket, or use the AWS CLI to automate the deployment.

Prerequisites

  1. AWS Account
  2. AWS CLI installed on your machine
  3. IAM User / role
  4. Local credentials of the AWS User
  5. NodeJS & npm installed

Steps to Upload to S3

As shown in the video:

  1. Scaffold a React application by running:
   npx create-react app nameofApp
Enter fullscreen mode Exit fullscreen mode
  1. Create an S3 bucket

  2. Change Properties to allow static website hosting (index.html for the Index document.)

  3. Change Permissions of Bucket Policy (replace NameOFBucket with your bucket name from 2)

   {
       "Version": "2012-10-17",
       "Statement": [
           {
               "Sid": "AllowPublicReadAccess",
               "Effect": "Allow",
               "Principal": "*",
               "Action": "s3:GetObject",
               "Resource": "arn:aws:s3:::NameOFBucket/*"
           }
       ]
   }
Enter fullscreen mode Exit fullscreen mode
  1. Build out the React application and copy contents of build folder over to S3
 yarn build
Enter fullscreen mode Exit fullscreen mode
  1. Setup S3 Sync - syncs directories and S3 prefixes. Recursively copies new and updated files from the source directory to the destination. Modify the package.json file and add a 'deploy' script that syncs the content of the build folder with the bucket:
  "deploy": "aws s3 sync build/ s3://nameofbucket"
Enter fullscreen mode Exit fullscreen mode
  1. Each time you want to deploy a new version of your app run:
  yarn build && yarn deploy
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
citysiva180 profile image
Sivarajan • Edited on

Hi, Is there a way that a static react app could consume json files dropped into it? What is the best way that the deployment could be automated so all the static changes reflect?

DEV has this feature:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠