Front-end deployment

In the first step in this workshop, we will host the web application (front-end) with S3 Static website hosting:

  1. Open Amazon S3 console, then Click Create bucket S3Console

  2. Enter bucket name, such as: fcj-book-shop

    • Select the region closest to you S3Console

  3. Uncheck block from allowing public access

    • Check to I acknowledge that the current settings might result in this bucket and the objects within becoming public S3Console

  4. Click Create bucket button S3Console

  5. Click on created bucket, click Properties tab S3Console

  6. Scroll down to the bottom, click Edit in Static web hosting pattern S3Console

  7. Select Enable to enable host web static on S3

    • Select Host a static website for Hosting type
    • Enter index.html for Index document pattern S3Console

  8. Click Save changes

    • After successfully enabling, please write down the path of the web S3Console

  9. Select Permissions tab

    • Click Edit of Bucket policy pattern S3Console

  10. Copy the below code block to Policy

    {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::fcj-book-shop/*"
        }
    ]
}
    • Click Save changes S3Console

  11. Download fcj-serverless-frontend code to device

    • Open command-line/terminal in the folder where you want to save the source code
    • Copy the below commands 
      git clone https://github.com/AWS-First-Cloud-Journey/FCJ-Serverless-Workshop.git
cd FCJ-Serverless-Workshop
npm install --force
yarn build

  12. We have finished building the front-end. Next execute the following command to upload the build folder to S3

    aws s3 cp build s3://fcj-book-shop --recursive

If your upload fails, configure the access key ID, secret access key, aws region and output format with aws configure command

Result after uploading: S3Console

  1. Paste the web link you take notes into your web browser S3Console

Your application currently has no data returned. To get data from DynamoDB, go to the next section.