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 1: Preparation||This article provides an introduction and instructions on creating the required AWS environment.|
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.
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.
Step 5: cd into the directory.
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.
The Amplify CLI will prompt us for some answers. For the purposes of the workshop, go ahead and use the values shown below.
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.
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
amplify env add
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:
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.