AWS Amplify explained

In the last few weeks we have heard a lot from Raffi, Ricky and Tom about Angular, React, VueJS and Headless CMS. Today I want to go into how you can build and deploy all these projects very elegantly in AWS. There are of course several approaches and ways. A very simple one is AWS Amplify.

AWS Amplify is a JavaScript library for front-end and mobile developers who want to develop cloud-enabled applications. You can provide your front-end application with various back-end functionalities. I want to present Amplify to you today in a very practical form. As a starting point, I’ll take the well-known ToDo-List, which Tom presented to us on Angular in February.

Initialization of Amplify

First we clone the Angular project. We can easily do this with the following command. Since I only need the most necessary functionality for my example, I check out a very specific commit.

1
2
3

$ git clone https://github.com/b-nova/b-nova-todo-list.git
$ cd b-nova-todo-list
$ git checkout 1b5932a5e89c8cbfb5c6b9e6e2cb88f40787487a

Amplify CLI

Now I install the amplify-cli. With this we can easily add AWS Cloud Services to our application. To initialize this, we can execute the following commands within the application.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

$ npm install -g @aws-amplify/cli
$ amplify configure
$ amplify init
 
Output:                                                                                                                                                                                                                            07:55:50
Scanning for plugins...
Plugin scan successful
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project bnovatodolist
? Enter a name for the environment dev
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using angular
? Source Directory Path:  src
? Distribution Directory Path: dist/b-nova-todo-list
? Build Command:  npm run-script build
? Start Command: ng serve
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html

? Please choose the profile you want to use admin
Adding backend environment dev to AWS Amplify Console app: d3qlc2o47gqcym
⠧ Initializing project in the cloud...

There should now be a new app in our AWS Console.

Now let’s take a closer look at the app. We can see here that there is currently a “dev” backend, as we created it during initialization.

Under ‘General’ we can see that there is already an url with which we can access our application. But when you click, you notice that the application is not available as desired. Let’s change that in the next step.

hosting

In order to make our application available under the link shown above, we add a new category “hosting” to our project. This is very easy to do with the following command. We use the Amplify-Console for hosting and initially use manual deployments to play out new features. We’ll see later how you can create automated deployments.

1
2
3
4
5
6
7
8
9

$ amplify hosting add

Output: 
? Select the plugin module to execute Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
? Choose a type Manual deployment

You can now publish your app using the following command:

Command: amplify publish

Now we can execute the following command in the CLI to make our application reachable under the given link in the Amplify-Console.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

$ amplify publish

Output: 
✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev

| Category | Resource name  | Operation | Provider plugin   |
| -------- | -------------- | --------- | ----------------- |
| Hosting  | amplifyhosting | Create    | awscloudformation |
? Are you sure you want to continue? Yes
⠹ Updating resources in the cloud. This may take a few minutes...
...
Build at: 2021-03-21T07:11:13.905Z - Hash: af04a58b9eeae670885d - Time: 22872ms
✔ Zipping artifacts completed.
✔ Deployment complete!
https://dev.d3qlc2o47gqcym.amplifyapp.com

We see that cloud formation is used to create the corresponding resources. The link to view the application is then output at the end. If we follow the link, we will now come to our ToDo list.

Integration in Angular

Before we can work with Amplify in our Angular App, we first have to install the Amplify libraries. NPM offers us a module here.

1

npm install --save @aws-amplify/ui-angular

After the module has been downloaded, all we have to do is import it into our Angular application.

In the app.module.ts we add the following.

1
2
3
4
5
6
7
8
9

import { AmplifyUIAngularModule } from '@aws-amplify/ui-angular';

@NgModule({
  ...,
  imports: [
    ..., 
    AmplifyUIAngularModule
  ]
})

We can now integrate further backend services into our application. Today I want to show you how easy user authentication can be implemented using Amazon Cognito.

Authentication

Prepare the application

Amplify offers a backend functionality for this, which we can easily integrate into our Angular app. We use Amazon Cognito, a web service for user administration, to authenticate users.

In the root directory of our application we now execute the following command:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

$ amplify add auth

Output: 
Using service: Cognito, provided by: awscloudformation
 
 The current configured provider is Amazon Cognito. 
 
 Do you want to use the default authentication and security configuration? Default configuration
 Warning: you will not be able to edit these selections. 
 How do you want users to be able to sign in? Email
 Do you want to configure advanced settings? No, I am done.
Successfully added auth resource bnovatodolist22083445 locally

In order to build the local backend resources now and to provision them in Amplify, we then execute the following command:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

$ amplify push

Output: 
✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev

| Category | Resource name         | Operation | Provider plugin   |
| -------- | --------------------- | --------- | ----------------- |
| Auth     | bnovatodolist22083445 | Create    | awscloudformation |
| Hosting  | amplifyhosting        | No Change | awscloudformation |
? Are you sure you want to continue? Yes
⠦ Updating resources in the cloud. This may take a few minutes...

After a few minutes, all the necessary resources have been created via CloudFormation, and we can continue with the authentication. At the same time, a file called aws-export.js was created in our source folder, which we now need so that our Angular is configured correctly. First we install a new library “aws-amplify”

1

npm install --save aws-amplify

Then we can configure Amplify in the app.module.ts file as follows.

1
2
3
4
5
6
7

import { AmplifyUIAngularModule } from '@aws-amplify/ui-angular';
import Amplify from 'aws-amplify';

import awsmobile from '../aws-exports';

/* Configure Amplify resources */
Amplify.configure(awsmobile)

Amplify offers us an Angular component that ensures that a user must be authenticated before he can use the application. We now wrap our own code in the app.component.html with the “amplify-authenticator” component. This ensures that the code within the component can only be executed if you are authenticated.

1
2
3
4
5
6
7

<amplify-authenticator>
  <main>
    <div class="content">
      <app-to-dos></app-to-dos>
    </div>
  </main>
</amplify-authenticator>

Now we can start a first test. We can now start the application locally as usual.

1

npm run start

The following window should now appear:

When you get the following error in the browser console Uncaught ReferenceError: global is not defined you simply have to insert the following snippet in the head of the index.html

1
2
3

<script>
var global = global || window;
</script>

Create user

Let’s now create a user in AWS Cognito so that we can test our setup. First select “Manage user pools” in the Cognito console.

We can now see the user pool that was added for us by amplify.

With one click on the pool, we can now configure it and add users and groups.

We can now create a new user under Users and Groups.

Now we can try to log in with the new user.

If everything works, we will see a window to change the password and then we will be redirected to our website.

summary

AWS Amplify is a very useful tool for the quick provision of front-end applications with back-end functionalities.

But there are still a few bugs here and there. For example, in my test I couldn’t access any repositories from GitHub.

The integration in Angular is also not yet sufficiently documented (See error: Uncaught ReferenceError: global is not defined).

This text was automatically translated with our golang markdown translator.