Host and deploy a frontend application

The task of the exercise is to host and deploy the frontend app to a cloud platform.

Objective

Host and deploy a static frontend (vue.js) app using AWS S3 bucket.

Description

In this exercise, deploy the app created in the exercise “Fetch items from an API and display on a responsive frontend” to AWS. This will allow the app to be publicly visible.

There are a number of ways to host your static website. If you’re looking for a quick and easy way to get your app online, you can use a static hosting service like GitHub Pages or Netlify.

For the single-page applications (SPAs), all you need to do is to load the initial index.html. Once you load the index.html the Vue library kicks in and does the rest of the job like loading components, calling API calls, etc.

AWS S3 is one of the options which provides a low-cost and highly reliable static website hosting solution to upload your static files and assets. These static sites usually have only CCS, HTML, JS files, and fonts.

Acceptance criteria

  • Build the project for production
  • Set up S3 with a bucket for static website hosting
  • Make the bucket publicly accessible

 

Solution walkthrough

Build the Vue.js project for production:

Run the following command in the project directory to build the project for production:

npm run build

This command builds up the application and creates a new distribution subdirectory dist. This directory contains all the required files and assets to serve as a static app.

This dist will be deployed to AWS S3 to be served up as a static website

Preview locally: You can preview the production build locally using a Node.js static file server: serve

npm install -g serve

serve -s dist

Once you have built the application for production, you will have to create an S3 bucket on AWS and upload your static files.

Create an AWS S3 Bucket for Static Website Hosting:

Now that we have our Vue.js application, we need an AWS S3 bucket to hold the contents of the dist/ folder. The bucket will be configured to be served up as a static website, readable by the public.

  • Login to your AWS console, then navigate to S3. Click on Create Bucket.
  • Choose a name for your bucket. AWS S3 documentation mentions that an S3 bucket name is globally unique, so you’ll likely not be able to use the same bucket name that we’re using for the example in this tutorial.
  • Next, choose an AWS region for your bucket. For this tutorial, we’re going to go with us-west-2. You can choose whatever region you’d like — just make sure that you’re consistent throughout the rest of this tutorial in choosing that same region for the other AWS services we’ll use. If you don’t know which region to choose, just go with us-west-2.
  • Lastly, uncheck the “Block all public access” option and click on the checkbox acknowledging that you understand your bucket may become publicly accessible. This is necessary for serving up a website publicly.
  • Acknowledge: Turning off block all public access might result in this bucket and the objects within becoming public

create sa3 bucket for frontend deployment

With these options in place, click on Create Bucket. You’ll now see it in your list of S3 buckets. Click on your newly created bucket to open it. With the bucket open, click on the Properties tab, then click on the panel for Static Website Hosting at the bottom of the page. Click edit. If you go back you will see the URL generated at the bottom of the page.

Select the option to “Use this bucket to host a website” and set the Index Document to be index.html :

S3 Static hosting

There’s just one more thing we need to do in setting up our bucket, and that is to create a bucket policy that grants the public access to the contents of our bucket. Click on the Permissions tab for your bucket, then click on Bucket Policy. Paste in the JSON from the following gist, replacing BUCKET-NAME-GOES-HERE with the name of your S3 bucket:

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

Click on Save.

Now, our bucket is all set to be served up as a static website.

Upload static files and assets into the S3 bucket

Go back to the Object tab and click upload. upload all these files under /dist folder.

s3 upload

That’s it. Now you can open the URL that was generated. http://ordering-app-ecode.s3-website.us-east-2.amazonaws.com/

You can also use the AWS CLI to deploy content to S3. For this step, you’ll need to make sure that you have the AWS-CLI installed on your local machine. First, we’ll set up a local AWS profile. Make sure to have the Access key ID and Secret access key

To configure: https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-quickstart.html

aws configure
AWS Access Key ID [None]: AWSEXAMPLEKEY
AWS Secret Access Key [None]: awSseCRetExample6732ACCesskeY
Default region name [None]: us-east-2

To push content to S3 bucket: aws s3 cp ./dist/ s3://ordering-app-ecode/ –recursive

For convenience, add the following script entry to package.json so you can run npm run deploy when you want to sync your files.

//package.json


"scripts": {
  "deploy": "aws s3 sync ./dist s3://your-bucket-name"
}