Front-end Deployment

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

Create S3 Bucket

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

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

    • Select the region closest to you (e.g., ap-southeast-1)
    • Select General purpose for Bucket type S3CreateBucket

  3. Uncheck Block all public access

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

  4. Keep default settings in Default encryption section, then click Create bucket S3CreateButton

  5. Click on the created bucket, then click Properties tab S3Properties

  6. Scroll down to Static website hosting section, click Edit S3StaticHosting

  7. Select Enable to enable static web hosting on S3

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

  8. Click Save changes S3SaveStaticHosting

  9. After successfully enabling, note the Bucket website endpoint URL S3Endpoint

  10. Select Permissions tab, scroll to Bucket policy, click Edit S3Permissions

  11. Copy the below code block to Policy (replace fcj-book-shop-tranvix with your bucket name)

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

Remember to replace fcj-book-shop-tranvix with the bucket name you created in step 2.

S3PolicyJSON

  1. Click Save changes S3PolicySave

  2. Bucket policy is successfully updated S3PolicySuccess

Create Image Storage Buckets

  1. Create 2 more S3 buckets to store book images:
    • book-image-stores-tranvix: Store original images
    • book-image-resize-stores-tranvix: Store resized images

Deploy Front-end Code

  1. Download fcj-serverless-frontend source code:
    • Open terminal in the folder where you want to save the source code
    • Run the following commands:
git clone https://github.com/tranvix0910/FCAJ_Workshop-Serverless.git
cd FCAJ_Workshop-Serverless
npm install --force
npm run build

If npm install (without --force) fails due to dependency conflicts such as ERESOLVE overriding peer dependency, use npm install --force to force the installation despite outdated packages.

  1. The front-end is built. Next, upload the build folder to S3:
aws s3 cp build s3://fcj-book-shop-tranvix --recursive

If your upload fails, configure AWS CLI with aws configure command (access key ID, secret access key, region, and output format)

  1. Check the S3 bucket to verify the files are uploaded S3Upload

  2. Click Objects tab to view uploaded files S3Objects

  3. Paste the bucket website endpoint URL into your browser WebsiteResult

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