This is Part 2 of my “Intro to AWS Amplify”. If you haven’t already, you can find the previous articles in the series below:Part

 

Part Description
Part 1: Preparation This article provides an introduction and instructions on creating the required AWS environment.

Overview

Continuing on from Part 1,  you should by now have your Cloud9 instance configured and ready to go. In this article, we will install the required libraries in our Cloud9 instance and bootstrap our Amplify Application. Once that’s complete, it will be time to create several Amplify environments which will form a part of our deployment pipelines. And finally, we can finish off the article be committing our new application into a GitHub repository in preparation for the next step of the workshop.

Bootstrap Project

Step 1: To get started, make sure you are logged into your AWS Cloud9 environment. If you have followed the instructions outlined in the previous part, you can find a list of your Cloud9 environments by visiting the Cloud9 management console here.

Step 2: You should now be presented with your Cloud9 IDE as shown below.

Step 3: From the bash terminal (located in the bottom of the IDE) we can now start installing and configuring our application. Start by installing the create-react-app npm package.

npm install -g create-react-app

Step 4: Next, we can bootstrap our new react application. For the purposes of this workshop, I am naming the project “noteswithamplify“. This will create a new folder containing a skeleton project we can use.

create-react-app noteswithamplify

Step 5: cd into the directory.

cd noteswithamplify

Step 6: Install the AWS Amplify CLI tools so that we can interact with our Amplify application. We will also need to install some other packages that we’ll use throughout the rest of the project.

npm install -g @aws-amplify/cli

npm install --save aws-amplify aws-amplify-react uuid bootstrap

Step 7: Next, we need to configure our Amplify environment by providing it with our AWS region and IAM user details. AWS Amplify will do most of the work for us and will only require us to complete the IAM user creation and provide the accessKeyId and secretAccessKey.

amplify configure

The Amplify CLI will prompt us for some answers. For the purposes of the workshop, go ahead and use the values shown below.

 

  • Specify the AWS Region: us-east-1
  • Specify the username of the new IAM user amplify-workshop-user At this stage, the Amplify CLI will provide us with a link to open to complete the creation of the IAM user it will use to interact with our AWS environment. Right-Click on the link and follow the process to complete the creation of the new user. Copy the accessId and secretAccessKey and enter them in the following prompts. You can also define a profile to use.

Initialise Amplify Project

Step 8: We are now ready to initialise our new AWS Amplify Project. Like the aws configure command above, this command will also prompt for some values. Go ahead and enter the values as shown below, most of which are the default values.

amplify init

 

  • Enter a name for the project: noteswithamplify
  • Enter a name for the environment: prod
  • Choose your default editor: None
  • Choose the type of app that you’re building: javascript
  • Please tell us about your project
  • What javascript framework are you using: react
  • Source Directory Path: src
  • Distribution Directory Path: build
  • Build Command: npm run-script build
  • Start Command: npm run-script start
  • Do you want to use an AWS profile: yes
  • Please choose the profile you want to use: default

Step 9: This will go ahead and configure our base Amplify project and create a prod environment. This environment will host our production environment, however, we will also need an environment to run our test branch and develop our features in. To achieve this we can add two additional environments to our configuration as shown below.

amplify env add

  • Do you want to use an existing environment? No
  • Enter a name for the environment: test
  • Do you want to use an AWS profile: Yes
  • Please choose the profile you want to use: default
 

amplify env add

  • Do you want to use an existing environment? No
  • Enter a name for the environment: dev
  • Do you want to use an AWS profile: Yes
  • Please choose the profile you want to use: default

Step 10: Now that we have our Amplify baseline created and our 3 environments created it’s time to commit our code to a git repository. In order to work with the next part of the workshop, one of the following git repositories is required to be used:

 

  • AWS CodeCommit
  • GitHub
  • BitBucket
  • GitLab

Next Steps

These instructions are for committing your repository to GitHub. If you want to use one of the other Git repositories, you’ll need to change the remote URL to the URL of your preferred repository host.

First of all, you’ll need to create a Git repository and commit all of your files to it. You can do this using the following commands:

git init .

git add .

git commit -m "Initial commit"

Next, you’ll need to create a new repository in GitHub. Head over to this page, and create a new repository called amplify. Make sure that the ‘Initialise this repository with a README’ box is unchecked, and that you’re not adding a .gitignore page or a license. When you’ve done that, hit the ‘Create repository’ button.

Now, you can push your code to GitHub using the following commands:

git remote add origin https://github.com//amplify

git push -u origin master

Then, create and push a new branch called test. We’ll need this for the next section of the workshop.

git branch test

git push -u origin test

Once this has been done, you’re ready to move onto the next Article (To be Released Shortly) of the series where we will configure our Amplify Deploy processes.