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. We will then finish off the section be committing our new application into a Github repository in preparation for the next step of the workshop.
Bootstrap React Project
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.
You should now be presented with your Cloud9 IDE as shown below.
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 Next, we can bootstrap our new react application. for the purposes of this workshop, we I am naming the project “SaaS Workshop“.
create-react-app saas-workshop
cd into the directory.
cd saas-workshop
Install the AWS Amplify CLI tools so that we can interact with our Amplify application. Will also need to install a new 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
Please Note: if you experience an “ENOSPC: no space left on device, write” or similar error message you can increase the size of the EBS volume associated with your Cloud9 instance by following the instructions available here.
Setup IAM user
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
After a moment or two, the Amplify CLI will prompt you to “Sign in to your AWS administrator account” which can be done by clicking on the link and selecting open (making sure not to click “open in Preview”). This should automatically open the AWS Management Console given your already logged in. Back in you Cloud9 Instance, press Enter to continue.
Next we need to select our AWS region and press Enter. For the purposes of this series our region is us-east-1.
After that, we need to give our new IAM user a name. For demonstration purposes i’ve used amplify-workshop-user. Press Enter once your finished.
Now, the Amplify CLI will present a URL we need to click that will take us to the IAM management console where we can complete the user setup. Much link before we can simply click the link and select Open from the popup.
One the web page has opened, configure that Access key – Programmatic access is checked and that Password – AWS Management Console access is not then click Next.
Next, we can leave AdministratorAccess selected and click Next to proceed to the next step.
PLEASE NOTE: For a production system this policy should NOT be used and finer grained access to be leveraged. This level of access is only being used to streamline the process for this series.
For the purposes of this workshop series we don’t need any tags assigned to this user so we can simply go ahead and click Next.
Confirm our selections and if everything has been selected correctly, go ahead and click on “Create User”. Otherwise go back and make any required changes on the previous pages.
Copy the accessId and secretAccessKey key as you will need to enter these back in your Cloud9 Instance.
Once you’ve finished creating the user you need to take the accessId and secretAccessKey and enter them in the terminal back in your Cloud9 Instance.
Once you’ve entered the account credentials, you’ll be asked to define a Profile Name. For the purposes of this series I’ve gone with default (which also happens to be the default). After you press Enter you will have finished configuring the IAM user Amplify will use to deploy resources into your AWS account. From here we can move onto setting up the Amplify Project.
Initialise Amplify Project
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
However, unlike earlier versions of the Amplify CLI the current version should automatically detect the react project we’ve already configured and pre-populate a lot of the configuration as shown below. All we need to do is provide a project name (which will define as saasWorkshop) and the Amplify CLI will do the rest. All we need to do is review the defaults and Initialise the project with the above configuration.
After a moment the CLI will ask to confirm what authentication method it should use. We can go ahead and select AWS profile and then choose default from the list
This will trigger a series of CloudFormation stacks to be created within your AWS account.
Once these deployments have finished the CLI should report that the project has been initialised successfully.
Setup Amplify Environments
Now that we have our project configured we need to configure the various environments that we’ll want to run. To keep things simple, we want two different environments:
- prod to host our production environment
- dev which will be where we test new features before committing them to production.
This will enable the AWS Management Console to manage the different configurations and environments via the code we commit to our project. This will become clearer when we add a CI/CD pipeline in the next section. In our initial project configuration we already defined an Environment for dev so now we just need to define a production environment.
To do this we need to use the Amplify ClI with the env function.
amplify env add
after a moment or two the CLI will prompt us with a couple of questions around how we want our new environment to be configured. We can enter the below responses.
- Enter a name for the environment? prod
- choose your default editor: Visual Studio Code
- Select the authentication method you want to use: AWS profile
- Please choose the profile you want to use: default
And that’s it, we now have our 2 environments created it’s time to commit our work 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
Commit to Github repository
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/<your-
github-username>/amplify git
push -u origin master
Then, create and push a new branch called dev. We’ll need this for the next section of the workshop.
git branch test
git push -u origin test
Conclusion
you should now have your AWS account with a Cloud9 instance running in the us-east-1 region. At this point in time, you are now ready to move onto Part 1 (to be published Sunday 17th October 2021) of the series where we will start to install and configure our new Todo application.
