Create and publish static website in AWS Amplify
Tags: aws, beginners, webdev, devops
Published: 2022-09-11 21:57:27

#### Level 100


As many know one of the most efficient options to publish our static websites safely and quickly in the AWS Cloud is through the integration of Amazon S3 and Cloudfront, however, when we come across these services it is important to know what are the best practices for their configuration and use. There are many alternatives to carry out this task from making use of the AWS console to implementing IaC with tools such as Terraform, Pulumi or CDK.
In this blog we will see an alternative using the Amplify CLI and exploring two options it offers us.

## Requirements:
- IntelliJ IDEA 2022.2.1 (Community Edition)
- Node v18.2.0
- Nx
- Sonarlint plugin
- AWS CLI
- Amplify ClI

## AWS Services
- [AWS Amplify](https://aws.amazon.com/amplify/) is a complete solution that lets frontend web and mobile developers easily build, ship, and host full-stack applications on AWS, with the flexibility to leverage the breadth of AWS services as use cases evolve. No cloud expertise needed. 
- [Amazon CloudFront](https://aws.amazon.com/cloudfront/) is a content delivery network (CDN) service built for high performance, security, and developer convenience. 
- [Amazon Simple Storage Service (Amazon S3)](https://aws.amazon.com/s3/) is an object storage service offering industry-leading scalability, data availability, security, and performance. 

## Hands On
### Create application
For this blog we use a simple app using Angular following the instructions in [Angular Nx Tutorial](https://nx.dev/getting-started/angular-tutorial) 

```commandline
$ npx create-nx-workspace@latest
Need to install the following packages:
  create-nx-workspace@14.7.3
Ok to proceed? (y) y
✔ Workspace name (e.g., org name)     · labvel
? What to create in the new workspace …
? What to create in the new workspace …
? What to create in the new workspace …
? What to create in the new workspace …
? What to create in the new workspace …
✔ What to create in the new workspace · angular
✔ Application name                    · labvelsite
✔ Default stylesheet format           · css
✔ Enable distributed caching to make your CI faster · Yes

```

Run app local
```commandline
npx nx serve labvelsite

```

![Run app local](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d1a5ctjd6y6g1270h0db.png)

### Install Amplify ClI and deploy
First we must install [Amplify ClI](https://docs.amplify.aws/cli/)- a unified toolchain to create, integrate, and manage the AWS cloud services for your app. 

```commandline
$ npm install -g @aws-amplify/cli
$ amplify --version 
10.0.0
```

> Amplify Cli doesn't support SSO

### Init Amplify project

Now, create amplify app using command line options in our workspace path and setting the options for the project.

```commandline
$ amplify init
 
 
? Initialize the project with the above configuration? No
? Enter a name for the environment dev
? Choose your default editor: IntelliJ IDEA
? 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:  apps/labvelsite/src
? Distribution Directory Path: dist/apps/labvelsite
? 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 labvel-blogs
Adding backend environment dev to AWS Amplify app: d1lgh1wbiy5tnx

Deployment completed.
Deployed root stack labvel [ ======================================== ] 4/4
        amplify-labvel-dev-154600      AWS::CloudFormation::Stack     CREATE_COMPLETE                Sun Sep 11 2022 15:46:39…
        DeploymentBucket               AWS::S3::Bucket                CREATE_COMPLETE                Sun Sep 11 2022 15:46:37…
        AuthRole                       AWS::IAM::Role                 CREATE_COMPLETE                Sun Sep 11 2022 15:46:32…
        UnauthRole                     AWS::IAM::Role                 CREATE_COMPLETE                Sun Sep 11 2022 15:46:32…

✔ Help improve Amplify CLI by sharing non sensitive configurations on failures (y/N) · no
Deployment bucket fetched.
✔ Initialized provider successfully.
✅ Initialized your environment successfully.

Your project has been successfully initialized and connected to the cloud!
...

```

> Our environment is ready to publish, you can find more workflows in [Typical workflows](https://docs.amplify.aws/cli/start/workflows/)! 

In the path project we find a new folder: `amplify`, this folder has to amplify environment configurations and properties.

```commandline

amplify/
├── backend
├── cli.json
├── #current-cloud-backend
├── hooks
├── README.md
└── team-provider-info.json

3 directories, 3 files
```

We can find multiple options for hosting web app, the next image shows the process using aws console.


![Amplify Console Steps](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zfltk9pi5z4hph6i28u4.png)

### Publish website

The next step is publish our site, we need to create a new hosting with the command `amplify add hosting` and select Amplify native or S3 more Amazon Cloudfront.

```commandline
$ amplify add hosting
amplify add hosting
? Select the plugin module to execute …  (Use arrow keys or type to filter)
❯ Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
  Amazon CloudFront and S3

```

> For this blog we are using Hosting with Amplify console.
 
```commandline
✔ 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

```
Finally, run `amplify publish` and follow the instructions

```commandline
 amplify publish 
✔ Successfully pulled backend environment dev from the cloud.

    Current Environment: dev

┌──────────┬────────────────┬───────────┬───────────────────┐
│ Category │ Resource name  │ Operation │ Provider plugin   │
├──────────┼────────────────┼───────────┼───────────────────┤
│ Hosting  │ amplifyhosting │ No Change │ awscloudformation │
└──────────┴────────────────┴───────────┴───────────────────┘

No changes detected

? Do you still want to publish the frontend? Yes
Publish started for amplifyhosting

> labvel@0.0.0 build
> nx build


> nx run labvelsite:build:production  [existing outputs match the cache, left as is]


Initial Chunk Files           | Names         |  Raw Size | Estimated Transfer Size
main.8fff4c92d8529583.js      | main          | 107.36 kB |                30.53 kB
polyfills.954d50e1729d66f0.js | polyfills     |  33.07 kB |                10.69 kB
runtime.9a5f55b9d1d63084.js   | runtime       |   1.04 kB |               597 bytes
styles.ef46db3751d8e999.css   | styles        |   0 bytes |                       -

                              | Initial Total | 141.47 kB |                41.81 kB

Build at: 2022-09-11T21:26:26.160Z - Hash: 5f2c7dce0ab87c06 - Time: 7148ms

 —————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— 

 >  NX   Successfully ran target build for project labvelsite (56ms)

   Nx read the output from the cache instead of running the command for 1 out of 1 tasks.

   See Nx Cloud run details at https://nx.app/runs/xJHzcroLaV

✔ Zipping artifacts completed.
✔ Deployment complete!
https://dev.exampleabdskjep.amplifyapp.com

```

Now we have our site public in AWS Cloud.


![Amplify Published App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qd67cmuy9khcdobjc2ax.png)



### Clean Up

To clean environment and cloud resources run `amplify remove hosting`.

```commandline
$ amplify remove hosting

? Are you sure you want to delete the resource? This action deletes all files related to this resource from the backend directory. Yes
✅ Successfully removed resource

$ amplify push
✔ Successfully pulled backend environment dev from the cloud.

    Current Environment: dev

┌──────────┬────────────────┬───────────┬───────────────────┐
│ Category │ Resource name  │ Operation │ Provider plugin   │
├──────────┼────────────────┼───────────┼───────────────────┤
│ Hosting  │ amplifyhosting │ Delete    │ awscloudformation │
└──────────┴────────────────┴───────────┴───────────────────┘
? Are you sure you want to continue? Yes

Deployment completed.
Deployed root stack labvel [ ======================================== ] 1/1
        amplify-labvel-dev-154600      AWS::CloudFormation::Stack     UPDATE_COMPLETE                Sun Sep 11 2022 16:53:17…

```