With CodeCommit

First, let’s upload our source code to CodeCommit.

AWS CodeCommit is a fully-managed source control service that hosts secure Git-based repositories. It makes it easy for teams to collaborate on code in a secure and highly scalable ecosystem. CodeCommit eliminates the need to operate your own source control system or worry about scaling its infrastructure. You can use CodeCommit to securely store anything from source code to binaries, and it works seamlessly with your existing Git tools.

Creating a new repository on CodeCommit

  1. Under Services - type in CodeCommit. This will bring up a new screen as shown below: codecommit-console

  2. Select Create repository.

  3. For Repository name, enter travelbuddy-webapp

  4. Select Create.

  5. Now that the repository is created, set up an IAM user with Git credentials in the IAM console following these instructions.

  6. Back in the CodeCommit console, from the Clone URL drop down, select Clone HTTPS

codecommit-console

  1. From a terminal window run git clone and the HTTPS URL of the respository:
$ git clone <HTTPS URL>
Cloning into 'travelbuddy-wedapp'...
Username for 'https://git-codecommit.us-east-1.amazonaws.com':XXXXXXXXXX
Password for 'USERID': XXXXXXXXXXXX
warning: You appear to have cloned an empty repository.

Populate the CodeCommit repository with TravelBuddy source code

  1. Now that the repository is initialised, let us populate the repository with our TravelBuddy source code.

Copy the contents of the TravelBuddy bundle previously downloaded into this newly created folder.

  1. Commit the change to your CodeCommit repository using the following git commands.
git add .
git commit -m "First Commit"
git push

As we are pushing the entire project source code into the Repository with a single commit, this process might take some time [>10mins].

  1. Verify that the TravelBuddy source code is now populated in the CodeCommit repository. codecommit-files

Deploy with AWS Amplify

Now that we have populated our CodeCommit repository with the project source code, let’s deploy our repository with AWS Amplify!

  1. Under Services - type in Amplify -> create app. This will bring up a new screen as shown below: amplify-console-codecommit

  2. In this demonstration, select CodeCommit and select Continue.

  3. Under Recently updated repositories, select your TravelBuddy CodeCommit repository by clicking the dropdown bar.

  4. Under Branch, select the master branch and click Next.

  5. For Application name, enter travelbuddy-webapp

  6. Check “Deploy updates to backend resources with your frontend on every code commit”

  7. Select or create a new IAM role to allow the Amplify Console to access your AWS resources. Click Next.

amplify-saveanddeploy-codecommit

  1. On the “Review” page, Select Save and deploy.

amplify-provision-codecommit

  1. The process takes a couple of minutes for Amplify Console to create the necessary resources and to deploy your code.

amplify-deployed-codecommit

  1. Once completed, click on the available link to launch your TravelBuddy site.

You will be taken to the TravelBuddy website hosted on AWS Amplify.

amplify-deployed

With that, your web application is now deployed!

Privacy | Site Terms | Cookie preferences | © 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.