o9s
is a microblog
home archives search feed blogroll


Host A React App On Amazon S3

Install Node

Visit https://nodejs.org/en/download/ and install Node.

Alternatively, if you are on macOS and have Homebrew, use the following command.

brew install node

Install create-react-app and create a new React app

Navigate to the directory you want your project to be in.

npm install -g create-react-app
create-react-app [your_project_name]

Run your app locally

cd [your_project_name]
npm start

Create an AWS account

Visit https://aws.amazon.com and create an account.

Navigate to Amazon S3 and create a bucket

Choose a bucket name

Navigate to Amazon S3 and create a bucket

The name must be unique and not just unique to your account, but unique across all buckets of all accounts.

Enable static website hosting

Navigate to your bucket’s properties and enable static website hosting. Note the endpoint, it’s your site’s URL.

Navigate to Amazon S3 and create a bucket

Edit your bucket’s policy

Navigate to your bucket’s permissions and add the following lines to its policy.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::[your_bucket_name]/*"
        }
    ]
}

Replace [your_bucket_name] with your actual bucket name.

Build your app

If you didn’t touch the scripts in package.json, the build command is probably this:

npm run build

Upload your app

Upload the content of the build/ directory to your bucket.

Posted on 2018-01-16   #react     #javascript  






← Next post    ·    Previous post →