Welcome to Part 2 of my Introduction to AWS Amplify series where I walk you through how to create a multi-tenanted SaaS application.
Due to the size of this project, it is split up into 6 articles, each containing instructions on how to get your first Amplify project published. In Part 1 we introduced AWS Amplify and identified what is involved in configuring our AWS environment ready to host an Amplify project. In this article, we will create the skeleton of our new Amplify application and host it in a repository.
We will be releasing the other articles in the coming weeks and will link to them in the table below when available.
| Part | Description |
| Preparation | This article provides an introduction and instructions on creating the required AWS environment. |
| App Setup | This post (Current) outlines the steps to set up out new Amplify application and host it in a repository. |
| Deployment Setup | Now that we have our base application configured, we can set up our deployment pipelines. |
| Application Development | In this article, we start building out the functionality of our applications. |
| Trigger Deployment | Next, we can go ahead and push our changes into our automated pipelines. |
| Adding Search | Finally, we can add some search functionality to our application and deploy our changes to production |
OVERVIEW
By now, you should have your Cloud9 instance configured and ready to go. In this section we will install the required libraries in our Cloud9 instance and bootstrap our Amplify Application. We will then create several Amplify environments which will form a part of our deployment pipelines, and finish off the section by committing our new application into a github repository in preparation for the next steps.
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.
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 “notes with amplify”.
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. Will also need to install a few other packages that we will need 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 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. No 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 Commend: 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
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
Conclusion
We now have our Amplify project initialised and committed to a Git repository ready for deployment into AWS. In Part 3 we will configure our AWS environment to deploy our Amplify application when we make changes to our codebase.
