AWS For Developers

A step to step guide: Hosting your frontend application in Amazon S3

Judah Tamirirashe Chisare's photo
Judah Tamirirashe Chisare
·

3 min read

In this blog, l am going to be writing on hosting and deploying your frontend application (React JS/ Angular) to Amazon S3 in less than 10mins. In developer terms, Amazon S3 is a scalable cloud storage service provided by AWS. It allows developers to store and retrieve any amount of data. In this case, we are going to use S3 to seamlessly host static websites at insignificant costs.

Step 1: Creating the Amazon S3 Bucket

  1. Sign into your AWS Management Console

  2. Navigate to the Amazon S3 service

  3. Under the S3 console,General purpose buckets tab, click “Create bucket” and follow the prompts to create the bucket.

    1. Your bucket Name should be unique globally

    2. Your bucket should be in a specific AWS Region of your choice

    3. Leave Object Ownership to "ACLs disabled (recommended)"

    4. Under Block Public Access settings for this bucket, untick "Block all public access" to allow public read access to the bucket objects, then tick the acknowledgement box for unblocking public access

    5. Leave the next options to default and click "create bucket"

  4. After the bucket has been successfully created, navigate the bucket and click on Properties

    1. Scroll to the bottom and click "Edit" on Static website hosting

    2. Select "Enable"

    3. Choose "Host a static website" under Hosting type

    4. Type "index.html" in the Index document form

    5. Also Type "index.html" again in the Error document form

    6. Click "Save Changes" and navigate back to Properties

    7. If you navigate down to "Static website hosting", thats where you find the website URL

  5. Configure the Bucket Security

    1. Navigate to Permissions

    2. scroll to Bucket Policy and click Edit

    3. Copy and paste the following policy, then edit the arn, replacing with your bucket name

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

  1. Replace "YOUR-BUCKET-NAME" with your BUCKET NAME

  2. Save changes

Step 2: Configure Your Frontend Application for Deployment

  1. Build your application

    1. Navigate to the application's root folder

    2. Open your code Editor's terminal and type your build command:

Angular

    ng build

React

    npm run build

Step 3:

Deploying Your Application to S3 Options

  • Manually Uploading

  • Programmatic deployment Coming soon

  • CICD with Code Pipeline Coming soon

Manually Uploading the built code

  1. Open you Amazon s3 bucket and click "upload"

  2. click "Add files"

  3. Browse in your local computer to the root folder of your application

  4. Locate the build folder and open it (Usually "dist")

  5. locate the folder with your index.html file and select all the files in that folder, then click open and upload

  6. Now visit your website URL to access the application , located in your s3 bucket, under properties→Static website hosting

AWSS3AngulardeploymentReactFrontend DevelopmentDevops