3. Deploy the site with the AWS Amplify Console

Next you’ll use the AWS Amplify Console to deploy the website you’ve just commited to git. The Amplify Console takes care of the work of setting up a place to store your static web application code and provides a number of helpful capabilities to simplify both the lifecycle of that application as well as enable best practices.

✅ Step-by-step directions

  1. Launch the Amplify Console
  2. Click Connect App
  3. Select AWS CodeCommit and select Continue

  4. From the dropdown select the Repository and Master Branch created today and select Next

  5. Amplify will detect that the application has an existing Amplify backend. Select Create New Environment and name it prod (all lowercase).

Now you need to create a new service role with the permissions to deploy the application backend.

  1. Click on Create new role, check that Amplify is selected and click Next permissions, click Next: Tags, click Next: Review.
  2. Give the Role a new name: wildrydes-backend-role and click Create role. Close this tab and return to the AWS Amplify Build configure console.

  3. Refresh the role list by clicking on the circular arrow button, and select the role created in the step above.

    Amplify Repository configuration

  4. Select Next

  5. On the Review page select Save and deploy

    This innitial build and deploy process may take up to 5 of minutes for Amplify Console to create the neccesary resources and to deploy your code.

    Amplify Deployment

ℹ️ The wildrydes web front end website is a single page vue app. Thats means any time a request comes in for an asset or page it must be handled by index.html. The following redirect ensures this behaviour.

Click on Rewrites and redirects in the left navigation menu, Choose Edit. Now Copy and Paste the following into the Source address field:


Make sure target address is set to /index.html and set type to 200 Rewrite Wild Rydes Rewrites and re directs screenshot

Once completed, choose on All apps > wildrydes, then click the site image to launch your Wild Rydes site.

Wild Rydes homepage screenshot

If you click on the link for Master you’ll see various pieces of information about your website deployment, including sample renderings on various platforms: