AWS Amplify with Vite

Published: May 24, 2024 by Isaac Johnson

Some time ago a colleague at work suggested I dig into AWS Amplify. Today we’ll go over a lot of what Amplify includes. I was struggling to summarize the whole offering. I asked Gemini, which summarized as: “AWS Amplify is a comprehensive cloud platform that simplifies the development and deployment of mobile and web applications. It offers a wide range of features and services, including BaaS, Frontend and GraphQL APIs”.

I see it as a way to rapidly build a web-app with a lot of pre-baked features one can just snap in. It’s in that ballpark with Beanstalk and Lightsail. But perhaps the best way to explain it is to just use it. I’ll spoil a bit and say that in all of that which I show, it totaled up to $0 in Cloud spend thus far, so it’s a pretty fun offering with which to experiment without worrying about a massive bill later.

Getting Started

Let’s start by giving our App a name

/content/images/2024/05/amplify-01.png

This kicks in the Amplify Studio to start

/content/images/2024/05/amplify-02.png

When done, I can see my Amplify Studio is setup and ready to use

/content/images/2024/05/amplify-03.png

In a little bit we will want to use the Amplify CLI so I’ll take a moment to install that as well

In WSL I’ll run curl -sL https://aws-amplify.github.io/amplify-cli/install | bash && $SHELL

$ curl -sL https://aws-amplify.github.io/amplify-cli/install | bash && $SHELL

 Installing the AWS Amplify CLI...

 Downloading binary...
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
  0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
100  306M  100  306M    0     0  7985k      0  0:00:39  0:00:39 --:--:-- 6636k
 Download complete!
 Extracting binary...
 Extraction complete!

 Added the following to /home/builder/.bashrc:

# Added by Amplify CLI binary installer
export PATH="$HOME/.amplify/bin:$PATH"

 Added the following to /home/builder/.profile:

# Added by Amplify CLI binary installer
export PATH="$HOME/.amplify/bin:$PATH"

Successfully installed the Amplify CLI.
Run 'amplify help' to get started!

We can now run amplify configure

$ amplify configure

It’s a bit of a strange flow in that it keeps popping up browsers (and/or tabs) as it steps us along

builder@LuiGi:~/Workspaces/jekyll-blog$ amplify configure
Follow these steps to set up access to your AWS account:

Sign in to your AWS administrator account:
https://console.aws.amazon.com/
Press Enter to continue

Specify the AWS Region
? region:  us-east-1
Follow the instructions at
https://docs.amplify.aws/cli/start/install/#configure-the-amplify-cli

to complete the user creation in the AWS console
https://console.aws.amazon.com/iamv2/home#/users/create
Press Enter to continue

Which had me updating a pop-up page

/content/images/2024/05/amplify-04.png

Now we can move on to configure.

$ amplify configure
Follow these steps to set up access to your AWS account:

Sign in to your AWS administrator account:
https://console.aws.amazon.com/
Press Enter to continue

Specify the AWS Region
? region:  us-east-1
Follow the instructions at
https://docs.amplify.aws/cli/start/install/#configure-the-amplify-cli

to complete the user creation in the AWS console
https://console.aws.amazon.com/iamv2/home#/users/create
Press Enter to continue

Enter the access key of the newly created user:
? accessKeyId:  ********************
? secretAccessKey:  ****************************************
This would update/create the AWS Profile in your local machine
? Profile Name:  freshbrewedamplify

Successfully set up the new user.

When done, the IAM creds should be set but we need to set the policy of “AdministratorAccess-Amplify” per the the instructions here.

/content/images/2024/05/amplify-05.png

Usage

Let’s create a new Javascript React app

I’ll create an empty dir and ensure I’m running a newer version of NodeJS

builder@LuiGi:~/Workspaces$ mkdir amplifyapp
builder@LuiGi:~/Workspaces$ cd amplifyapp/
builder@LuiGi:~/Workspaces/amplifyapp$ nvm list
       v16.20.2
->      v21.7.3
default -> stable (-> v21.7.3)
iojs -> N/A (default)
unstable -> N/A (default)
node -> stable (-> v21.7.3) (default)
stable -> 21.7 (-> v21.7.3) (default)
lts/* -> lts/iron (-> N/A)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.24.1 (-> N/A)
lts/erbium -> v12.22.12 (-> N/A)
lts/fermium -> v14.21.3 (-> N/A)
lts/gallium -> v16.20.2
lts/hydrogen -> v18.20.2 (-> N/A)
lts/iron -> v20.12.2 (-> N/A)

I can now use npm create vite to create a new React app. I prompts a lot of choices, but for this run, I’ll still with React and Javascript

builder@LuiGi:~/Workspaces/amplifyapp$ npm create vite@latest
Need to install the following packages:
create-vite@5.2.3
Ok to proceed? (y) y
✔ Project name: … freshbrewed-vite
✔ Select a framework: › React
✔ Select a variant: › JavaScript

Scaffolding project in /home/builder/Workspaces/amplifyapp/freshbrewed-vite...

Done. Now run:

  cd freshbrewed-vite
  npm install
  npm run dev

npm notice
npm notice New minor version of npm available! 10.5.0 -> 10.7.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.7.0
npm notice Run npm install -g npm@10.7.0 to update!
npm notice

We can now test by going into the directory and installing dependencies and starting up the dev server.

builder@LuiGi:~/Workspaces/amplifyapp$ cd freshbrewed-vite/
builder@LuiGi:~/Workspaces/amplifyapp/freshbrewed-vite$ npm install
(#########⠂⠂⠂⠂⠂⠂⠂⠂⠂) ⠼ idealTree: timing idealTree Completed in 14102ms

added 278 packages, and audited 279 packages in 5m

103 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
builder@LuiGi:~/Workspaces/amplifyapp/freshbrewed-vite$
builder@LuiGi:~/Workspaces/amplifyapp/freshbrewed-vite$ npm run dev

/content/images/2024/05/amplify-06.png

And we can see the app is running

/content/images/2024/05/amplify-07.png

Now that we have it working we need to initialize the AWS amplify backend to the app

We can use amplify init

/content/images/2024/05/amplify-08.png

We can verify that the connection is setup

builder@LuiGi:~/Workspaces/amplifyapp/freshbrewed-vite$ amplify status

    Current Environment: dev

┌──────────┬───────────────┬───────────┬─────────────────┐
│ Category │ Resource name │ Operation │ Provider plugin │
└──────────┴───────────────┴───────────┴─────────────────┘

I meant to use “dist” for the output dir and missed it the first time through. I ran the process again careful to change the output to ‘dist’ this time

/content/images/2024/05/amplify-09.png

Now that our configuration is setup, let’s add the libraries we need to the app to use AWS Amplify backend services.

I’ll add the AWS libraries to the package.json file - I did it twice because I realized I wanted them save

builder@LuiGi:~/Workspaces/amplifyapp/vite-project$ npm install aws-amplify

added 171 packages, and audited 451 packages in 10s

109 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
builder@LuiGi:~/Workspaces/amplifyapp/vite-project$ npm install --save aws-amplify

up to date, audited 451 packages in 1s

109 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

I’ll use git init and then create a gitignore file to match. I did find the npx command earlier had made a decent gitignore, but I still added my lines to it.

builder@LuiGi:~/Workspaces/amplifyapp/vite-project$ vi .gitignore
builder@LuiGi:~/Workspaces/amplifyapp/vite-project$ git status
On branch master

No commits yet

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        .eslintrc.cjs
        .gitignore
        README.md
        amplify/
        index.html
        package-lock.json
        package.json
        public/
        src/
        vite.config.js

nothing added to commit but untracked files present (use "git add" to track)
builder@LuiGi:~/Workspaces/amplifyapp/vite-project$ git add -A
builder@LuiGi:~/Workspaces/amplifyapp/vite-project$ git commit -m "Init"
[master (root-commit) af233a9] Init
 21 files changed, 7209 insertions(+)
 create mode 100644 .eslintrc.cjs
 create mode 100644 .gitignore
 create mode 100644 README.md
 create mode 100644 amplify/.config/project-config.json
 create mode 100644 amplify/README.md
 create mode 100644 amplify/backend/backend-config.json
 create mode 100644 amplify/backend/tags.json
 create mode 100644 amplify/backend/types/amplify-dependent-resources-ref.d.ts
 create mode 100644 amplify/cli.json
 create mode 100644 amplify/hooks/README.md
 create mode 100644 amplify/team-provider-info.json
 create mode 100644 index.html
 create mode 100644 package-lock.json
 create mode 100644 package.json
 create mode 100644 public/vite.svg
 create mode 100644 src/App.css
 create mode 100644 src/App.jsx
 create mode 100644 src/assets/react.svg
 create mode 100644 src/index.css
 create mode 100644 src/main.jsx
 create mode 100644 vite.config.js

I’m doing this now so we can easily see changes as we go forward

My first step is to add the Ambility libraries to our main javascript

builder@LuiGi:~/Workspaces/amplifyapp/vite-project$ vi src/main.jsx
builder@LuiGi:~/Workspaces/amplifyapp/vite-project$ git diff src/main.jsx
diff --git a/src/main.jsx b/src/main.jsx
index 54b39dd..e49e39f 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,3 +1,7 @@
+import { Amplify } from 'aws-amplify';
+import amplifyconfig from './amplifyconfiguration.json';
+Amplify.configure(amplifyconfig);
+
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.jsx'

I’m forking from the getting started guide now as they would have us ass the GraphQL API, but I find REST far easier to deal with.

Let’s add a REST API backend

builder@LuiGi:~/Workspaces/amplifyapp/vite-project$ amplify add api
? Select from one of the below mentioned services: REST
✔ Provide a friendly name for your resource to be used as a label for this category in the project: · restApi
✔ Provide a path (e.g., /book/{isbn}): · /rest
Only one option for [Choose a Lambda source]. Selecting [Create a new Lambda function].
? Provide an AWS Lambda function name: viteprojectc5539797
? Choose the runtime that you want to use: NodeJS
? Choose the function template that you want to use: Serverless ExpressJS function (Integration with API Gateway)

✅ Available advanced settings:
- Resource access permissions
- Scheduled recurring invocation
- Lambda layers configuration
- Environment variables configuration
- Secret values configuration

? Do you want to configure advanced settings? Yes
? Do you want to access other resources in this project from your Lambda function? Yes
? Select the categories you want this function to have access to.

You can access the following resource attributes as environment variables from your Lambda function
        ENV
        REGION
? Do you want to invoke this function on a recurring schedule? No
? Do you want to enable Lambda layers for this function? No
? Do you want to configure environment variables for this function? Yes
? Enter the environment variable name: ENV
? Enter the environment variable value: Dev
? Select what you want to do with environment variables: I'm done

You can access the following resource attributes as environment variables from your Lambda function
        ENV
        REGION
? Do you want to configure secret values this function can access? No
✔ Choose the package manager that you want to use: · NPM
? Do you want to edit the local lambda function now? Yes
Edit the file in your editor: /home/builder/Workspaces/amplifyapp/vite-project/amplify/backend/function/viteprojectc5539797/src/app.js

At this point I could view the Lambda code:

/*
Copyright 2017 - 2017 Amazon.com, Inc. or its affiliates. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in compliance with the License. A copy of the License is located at
    http://aws.amazon.com/apache2.0/
or in the "license" file accompanying this file. This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and limitations under the License.
*/


/* Amplify Params - DO NOT EDIT
	ENV
	REGION
Amplify Params - DO NOT EDIT */

const express = require('express')
const bodyParser = require('body-parser')
const awsServerlessExpressMiddleware = require('aws-serverless-express/middleware')

// declare a new express app
const app = express()
app.use(bodyParser.json())
app.use(awsServerlessExpressMiddleware.eventContext())

// Enable CORS for all methods
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*")
  res.header("Access-Control-Allow-Headers", "*")
  next()
});


/**********************
 * Example get method *
 **********************/

app.get('/rest', function(req, res) {
  // Add your code here
  res.json({success: 'get call succeed!', url: req.url});
});

app.get('/rest/*', function(req, res) {
  // Add your code here
  res.json({success: 'get call succeed!', url: req.url});
});

/****************************
* Example post method *
****************************/

app.post('/rest', function(req, res) {
  // Add your code here
  res.json({success: 'post call succeed!', url: req.url, body: req.body})
});

app.post('/rest/*', function(req, res) {
  // Add your code here
  res.json({success: 'post call succeed!', url: req.url, body: req.body})
});

/****************************
* Example put method *
****************************/

app.put('/rest', function(req, res) {
  // Add your code here
  res.json({success: 'put call succeed!', url: req.url, body: req.body})
});

app.put('/rest/*', function(req, res) {
  // Add your code here
  res.json({success: 'put call succeed!', url: req.url, body: req.body})
});

/****************************
* Example delete method *
****************************/

app.delete('/rest', function(req, res) {
  // Add your code here
  res.json({success: 'delete call succeed!', url: req.url});
});

app.delete('/rest/*', function(req, res) {
  // Add your code here
  res.json({success: 'delete call succeed!', url: req.url});
});

app.listen(3000, function() {
    console.log("App started")
});

// Export the app object. When executing the application local this does nothing. However,
// to port it to AWS Lambda we will create a wrapper around that will load the app from
// this file
module.exports = app

I then finished up

✅ Successfully added resource viteprojectc5539797 locally.

✅ Next steps:
Check out sample function code generated in <project-dir>/amplify/backend/function/viteprojectc5539797/src
"amplify function build" builds all of your functions currently in the project
"amplify mock function <functionName>" runs your function locally
To access AWS resources outside of this Amplify app, edit the /home/builder/Workspaces/amplifyapp/vite-project/amplify/backend/function/viteprojectc5539797/custom-policies.json
"amplify push" builds all of your local backend resources and provisions them in the cloud
"amplify publish" builds all of your local backend and front-end resources (if you added hosting category) and provisions them in the cloud
✅ Succesfully added the Lambda function locally
✔ Restrict API access? (Y/n) · no
✔ Do you want to add another path? (y/N) · no
✅ Successfully added resource restApi locally

✅ Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

It is now set up, but as those last lines denoted, we still have to push and publish.

builder@LuiGi:~/Workspaces/amplifyapp/vite-project$ amplify push
✔ Successfully pulled backend environment dev from the cloud.

    Current Environment: dev

┌──────────┬─────────────────────┬───────────┬───────────────────┐
│ Category │ Resource name       │ Operation │ Provider plugin   │
├──────────┼─────────────────────┼───────────┼───────────────────┤
│ Function │ viteprojectc5539797 │ Create    │ awscloudformation │
├──────────┼─────────────────────┼───────────┼───────────────────┤
│ Api      │ restApi             │ Create    │ awscloudformation │
└──────────┴─────────────────────┴───────────┴───────────────────┘
✔ Are you sure you want to continue? (Y/n) · yes

Deployment completed.
Deploying root stack viteproject [ =============--------------------------- ] 1/3
        amplify-viteproject-dev-5711c  AWS::CloudFormation::Stack     UPDATE_IN_PROGRESS             Sat May 04 2024 08:30:59…
        functionviteprojectc5539797    AWS::CloudFormation::Stack     CREATE_COMPLETE                Sat May 04 2024 08:32:04…
        apirestApi                     AWS::CloudFormation::Stack     CREATE_IN_PROGRESS             Sat May 04 2024 08:32:05…
Deployed function viteprojectc5539797 [ ======================================== ] 3/3
        LambdaExecutionRole            AWS::IAM::Role                 CREATE_COMPLETE                Sat May 04 2024 08:31:24…
        LambdaFunction                 AWS::Lambda::Function          CREATE_COMPLETE                Sat May 04 2024 08:31:34…
        lambdaexecutionpolicy          AWS::IAM::Policy               CREATE_IN_PROGRESS             Sat May 04 2024 08:31:34…
Deploying api restApi [ ========-------------------------------- ] 1/5
        restApi                        AWS::ApiGateway::RestApi       CREATE_COMPLETE                Sat May 04 2024 08:32:10…
        functionviteprojectc5539797Pe… AWS::Lambda::Permission        CREATE_IN_PROGRESS             Sat May 04 2024 08:32:10…

Deployment state saved successfully.

REST API endpoint: https://2nv9zzgvg7.execute-api.us-east-1.amazonaws.com/dev

I can review the settings at any time by looking at the cli-inputs.json file

builder@LuiGi:~/Workspaces/amplifyapp/vite-project$ cat amplify/backend/api/restApi/cli-inputs.json
{
  "version": 1,
  "paths": {
    "/rest": {
      "name": "/rest",
      "lambdaFunction": "viteprojectc5539797",
      "permissions": {
        "setting": "open"
      }
    }
  }
}

While I can see it is serving up a REST API with a Lambda function, just doing a GET will denote we need an Auth token

https://2nv9zzgvg7.execute-api.us-east-1.amazonaws.com/dev

/content/images/2024/05/amplify-10.png

At this point we can see quite a few changes thus applied.

builder@LuiGi:~/Workspaces/amplifyapp/vite-project$ git diff
diff --git a/amplify/backend/backend-config.json b/amplify/backend/backend-config.json
index 9e26dfe..822b44d 100644
--- a/amplify/backend/backend-config.json
+++ b/amplify/backend/backend-config.json
@@ -1 +1,52 @@
-{}
\ No newline at end of file
+{
+  "api": {
+    "restApi": {
+      "dependsOn": [
+        {
+          "attributes": [
+            "Name",
+            "Arn"
+          ],
+          "category": "function",
+          "resourceName": "viteprojectc5539797"
+        }
+      ],
+      "providerPlugin": "awscloudformation",
+      "service": "API Gateway"
+    }
+  },
+  "function": {
+    "viteprojectc5539797": {
+      "build": true,
+      "dependsOn": [],
+      "providerPlugin": "awscloudformation",
+      "service": "Lambda"
+    }
+  },
+  "parameters": {
+    "AMPLIFY_function_viteprojectc5539797_deploymentBucketName": {
+      "usedBy": [
+        {
+          "category": "function",
+          "resourceName": "viteprojectc5539797"
+        }
+      ]
+    },
+    "AMPLIFY_function_viteprojectc5539797_env": {
+      "usedBy": [
+        {
+          "category": "function",
+          "resourceName": "viteprojectc5539797"
+        }
+      ]
+    },
+    "AMPLIFY_function_viteprojectc5539797_s3Key": {
+      "usedBy": [
+        {
+          "category": "function",
+          "resourceName": "viteprojectc5539797"
+        }
+      ]
+    }
+  }
+}
\ No newline at end of file
diff --git a/amplify/backend/types/amplify-dependent-resources-ref.d.ts b/amplify/backend/types/amplify-dependent-resources-ref.d.ts
index 074b15b..d4a3c56 100644
--- a/amplify/backend/types/amplify-dependent-resources-ref.d.ts
+++ b/amplify/backend/types/amplify-dependent-resources-ref.d.ts
@@ -1 +1,18 @@
-export type AmplifyDependentResourcesAttributes = {}
\ No newline at end of file
+export type AmplifyDependentResourcesAttributes = {
+  "api": {
+    "restApi": {
+      "ApiId": "string",
+      "ApiName": "string",
+      "RootUrl": "string"
+    }
+  },
+  "function": {
+    "viteprojectc5539797": {
+      "Arn": "string",
+      "LambdaExecutionRole": "string",
+      "LambdaExecutionRoleArn": "string",
+      "Name": "string",
+      "Region": "string"
+    }
+  }
+}
\ No newline at end of file
diff --git a/amplify/team-provider-info.json b/amplify/team-provider-info.json
index 7bd928e..bace04e 100644
--- a/amplify/team-provider-info.json
+++ b/amplify/team-provider-info.json
@@ -10,6 +10,18 @@
       "StackName": "amplify-viteproject-dev-5711c",
       "StackId": "arn:aws:cloudformation:us-east-1:095928337644:stack/amplify-viteproject-dev-5711c/c4414ea0-0a15-11ef-a967-0e995ed12f1f",
       "AmplifyAppId": "dum8pgq9fpgwo"
+    },
+    "categories": {
+      "function": {
+        "viteprojectc5539797": {
+          "env": "Dev",
+          "deploymentBucketName": "amplify-viteproject-dev-5711c-deployment",
+          "s3Key": "amplify-builds/viteprojectc5539797-44396c54395a50323945-build.zip"
+        }
+      },
+      "api": {
+        "restApi": {}
+      }
     }
   }
 }
\ No newline at end of file
diff --git a/src/main.jsx b/src/main.jsx
index 54b39dd..e49e39f 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,3 +1,7 @@
+import { Amplify } from 'aws-amplify';
+import amplifyconfig from './amplifyconfiguration.json';
+Amplify.configure(amplifyconfig);
+
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.jsx'

Before I go on, I’ll save these as my next steps will be to make the API anonymous

builder@LuiGi:~/Workspaces/amplifyapp/vite-project$ git add -A
builder@LuiGi:~/Workspaces/amplifyapp/vite-project$ git commit -m "First"
[master 7196a87] First
 15 files changed, 1209 insertions(+), 2 deletions(-)
 create mode 100644 amplify/backend/api/restApi/cli-inputs.json
 rewrite amplify/backend/backend-config.json (100%)
 create mode 100644 amplify/backend/function/viteprojectc5539797/amplify.state
 create mode 100644 amplify/backend/function/viteprojectc5539797/custom-policies.json
 create mode 100644 amplify/backend/function/viteprojectc5539797/function-parameters.json
 copy amplify/backend/{backend-config.json => function/viteprojectc5539797/parameters.json} (100%)
 create mode 100644 amplify/backend/function/viteprojectc5539797/src/app.js
 create mode 100644 amplify/backend/function/viteprojectc5539797/src/event.json
 create mode 100644 amplify/backend/function/viteprojectc5539797/src/index.js
 create mode 100644 amplify/backend/function/viteprojectc5539797/src/package-lock.json
 create mode 100644 amplify/backend/function/viteprojectc5539797/src/package.json
 create mode 100644 amplify/backend/function/viteprojectc5539797/viteprojectc5539797-cloudformation-template.json

I must be missing something. Regardless of what I give it to proxy after “/rest”, i get a 200 successful

/content/images/2024/05/amplify-11.png

I want to deploy the front end now. I can tell we are only serving backend at present as the Amplify page for this app has a Grayed out “view deployed url”

/content/images/2024/05/amplify-12.png

I’ll click “Get started” and then choose “Deploy without Git” (since their Git hosting choices don’t include Gitea for Forgejo) on the next page

/content/images/2024/05/amplify-13.png

From here I could drag and drop a zip of ‘dist’

/content/images/2024/05/amplify-14.png

However, I’ll also show just doing it from the command line

We have to use amplify hosting add before we can use amplify publish

builder@LuiGi:~/Workspaces/amplifyapp/vite-project$ amplify hosting add
✔ 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 publish (I could have also used S3 and Cloudfront in my choices)

builder@LuiGi:~/Workspaces/amplifyapp/vite-project$ amplify publish
✔ Successfully pulled backend environment dev from the cloud.

    Current Environment: dev

┌──────────┬─────────────────────┬───────────┬───────────────────┐
│ Category │ Resource name       │ Operation │ Provider plugin   │
├──────────┼─────────────────────┼───────────┼───────────────────┤
│ Hosting  │ amplifyhosting      │ Create    │ awscloudformation │
├──────────┼─────────────────────┼───────────┼───────────────────┤
│ Function │ viteprojectc5539797 │ No Change │ awscloudformation │
├──────────┼─────────────────────┼───────────┼───────────────────┤
│ Api      │ restApi             │ No Change │ awscloudformation │
└──────────┴─────────────────────┴───────────┴───────────────────┘
✔ Are you sure you want to continue? (Y/n) · yes

Deployment completed.
Deployed root stack viteproject [ ======================================== ] 4/4
        amplify-viteproject-dev-5711c  AWS::CloudFormation::Stack     UPDATE_COMPLETE                Sat May 04 2024 14:58:33…
        hostingamplifyhosting          AWS::CloudFormation::Stack     CREATE_COMPLETE                Sat May 04 2024 14:58:29…
        functionviteprojectc5539797    AWS::CloudFormation::Stack     UPDATE_COMPLETE                Sat May 04 2024 14:58:19…
        apirestApi                     AWS::CloudFormation::Stack     UPDATE_COMPLETE                Sat May 04 2024 14:58:20…
Deployed hosting amplifyhosting [ ======================================== ] 1/1
        AmplifyBranch                  AWS::Amplify::Branch           CREATE_COMPLETE                Sat May 04 2024 14:58:23…

Deployment state saved successfully.


Publish started for amplifyhosting

> vite-project@0.0.0 build
> vite build

vite v5.2.11 building for production...
✓ 541 modules transformed.
dist/index.html                   0.46 kB │ gzip:  0.29 kB
dist/assets/react-CHdo91hT.svg    4.13 kB │ gzip:  2.05 kB
dist/assets/index-DiwrgTda.css    1.39 kB │ gzip:  0.72 kB
dist/assets/index-CM3MxrAZ.js   190.94 kB │ gzip: 61.34 kB
✓ built in 2.49s
✔ Zipping artifacts completed.
✔ Deployment complete!
https://dev.dum8pgq9fpgwo.amplifyapp.com

Wehn done, I had a dev instance running at https://dev.dum8pgq9fpgwo.amplifyapp.com

I can also see that reflected in the Amplify console

/content/images/2024/05/amplify-15.png

Monitoring

One feature we haven’t explored yet is monitoring. How might we go about tracking requests and errors, should they occur?

We luckily have a Monitoring sections from our Amplify app

/content/images/2024/05/amplify-16.png

I can also look in to the access logs to see the UserAgents. In my case, I can see Firefox on a Mac and a few PaloAltos in the mix

/content/images/2024/05/amplify-17.png

We can also use Alarms to monitor events. Perhaps we want to trigger an email to ourselves and a page via Pagerduty if we have too many 500 pages served up in a row

/content/images/2024/05/amplify-18.png

The other notification we might want is to be alerted when there are new builds (regardless of how they get to Amplify). We can do that in build notifications.

/content/images/2024/05/amplify-28.png

Custom domains

We can add custom domains, provided we have them in Route53, to serve up our Amplify app with proper TLS

Here I will add ‘amplify.freshbrewed.science’ to point to our dev instance

/content/images/2024/05/amplify-19.png

Here I added an entry for an old domain I don’t use anymore

/content/images/2024/05/amplify-20.png

I thought it might be fun to use a real domain. I went to Gandi and added a new one, aXNhYWNqb2huc29u.art

/content/images/2024/05/amplify-24.png

I can then add it as a new Hosted Zone to Route53

/content/images/2024/05/amplify-25.png

I then need to update Gandi’s records to point to AWS’s nameservers

/content/images/2024/05/amplify-26.png

I can now redirect it to the Amplify app

/content/images/2024/05/amplify-27.png

For some reason it got stumped on a couple records

/content/images/2024/05/amplify-30.png

I tried creating them

/content/images/2024/05/amplify-31.png

But got at least one error

/content/images/2024/05/amplify-32.png

which makes sense. A Records are necessarily IPv4. I guess “ANAME” is an Alias, like a CNAME + A, but R53 doesn’t include that.

In any case, while trying to solve it, the Custom Domain process seemed be satisfied and moved on to the CDN steps

/content/images/2024/05/amplify-33.png

And within moments it was live (use testuser / testpass1234 for https://axnhywnqb2huc29u.art/)

/content/images/2024/05/amplify-34.png

Passwords

Under Password Management, we can make our site no longer publicly available by switching to a username and password

/content/images/2024/05/amplify-21.png

Now when I go to the Vite site, I am prompted for a login

/content/images/2024/05/amplify-22.png

which will give me a 401 error if I fail to successfully login

/content/images/2024/05/amplify-23.png

Costs

I’ve had Amplify running for a few weeks so far, albeit not under load. Thus far it has stayed well within the free tier

/content/images/2024/05/amplify-29.png

Even a week later, days before I publish this, I see $0 in costs:

/content/images/2024/05/amplify-35.png

Summary

AWS Amplify made it quite easy to build and release a basic NodeJS app. I used Vite with React/Javascript but I could have just as easily used Jekyll, Kotlin or Angular. I even saw some guides for using Python with Flask.

I did find the flow a bit clunky. There are some less than obvious navigations or pop-ups which would lead me to believe it is an offering built over time squeezing a few related services together. I would expect that to improve as Amplify matures. I would think the butter zone for Amplify is simple client dynamic websites.

For instance, if I was a website developer looking to create some HA fancy splash site for a retail store and needed to support mobile, web and have some easy to plugin features like Auth this might really solve my needs. The moment my app got a bit more complicated and needed to know more about its backend or utilize some larger databases, I might consider Beanstalk or Lightsail. Again, if I was in the AWS universe, that is. As I spend far more time in GCP nowadays, Amplify is a good equivalent to Firebase from Google Cloud.

AWS Amplify Vite Containers Kubernetes

Have something to add? Feedback? You can use the feedback form

Isaac Johnson

Isaac Johnson

Cloud Solutions Architect

Isaac is a CSA and DevOps engineer who focuses on cloud migrations and devops processes. He also is a dad to three wonderful daughters (hence the references to Princess King sprinkled throughout the blog).

Theme built by C.S. Rhymes