Intro to AWS Amplify: build a multi-tenant SaaS app [Part 2 – App Setup]

BLOG ARTICLE

AWSAmplify-part2-blogarticle

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.

PartDescription
PreparationThis article provides an introduction and instructions on creating the required AWS environment.
App SetupThis 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 DevelopmentIn this article, we start building out the functionality of our applications.
Trigger DeploymentNext, we can go ahead and push our changes into our automated pipelines.
Adding SearchFinally, 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.

AWS-Amplify-Part2
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 “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.