User Guide: Hosting Single Page Application Using AWS Amplify

Mar 3, 2023

Why do we love and use AWS Amplify at Cloudvisor?

As an AWS Cloud Engineer/Architect at Cloudvisor, I’m frequently asked by clients about the best way to host Single Page Applications (SPAs) or Static Websites using Static Site Generation (SSG) on AWS. Although there are multiple ways to host SPA and SSG applications on AWS, in this two-part mini-series, I will go over AWS Amplify and the combination of AWS CloudFront and S3.

This article focuses on deploying an SPA using the AWS Amplify service. We’ll use a basic SPA created with create-react-app to demonstrate how to deploy it through the AWS Console and the amplify-cli.

In this guide
Prerequisites guide | Amplify Console Guide | Amplify-cli Guide | Learn More About Using AWS Amplify

Prerequisites Guide

Private Registries

Step 01: Run the create-react-app command (first, make sure you have node.js version 18 or higher npm installed. If you do not, install them before proceeding)

  • This will create a basic React single-page application.
npx create-react-app demo

Step 02: Test the application

  • It will start a development server for you on your local machine and serve the application for you.
cd demonnpm start

Step 03: Go to http://localhost:3000 in your browser (you should see that the application is running and has a spinning React logo)

User Guide: Hosting Single Page Application Using Aws Amplify 1

Step 04: Build the application

  • The application server is currently running on the development server. To host the application, we need to build and bundle it.
npm run build
n# Would result in an additional folder called u0022buildu0022 in the project.

Step 05: Testing the build locally

  • Following the recommended way of installing the serve npm package.
npm install -g servenserve -s build

  • If everything is working correctly, the application should reappear at http://localhost:3000. Additionally, logs should continue to appear in the terminal.
User Guide: Hosting Single Page Application Using Aws Amplify 3

Amplify Console Guide

Step 01: Open the AWS Console to deploy the SPA

  • Open the AWS Console and navigate to the AWS Amplify page;
  • Select Get Started under Amplify Studio option.
User Guide: Hosting Single Page Application Using Aws Amplify 5

Step 02: Fill in the form regarding the App Details

User Guide: Hosting Single Page Application Using Aws Amplify 7

Step 03: Wait for the Amplify Hosting setup

  • In the background, new resources will be deployed that we would not have access to. At the same time, a new AWS CloudFront stack will be deployed;
  • This stack will contain an AWS S3 Bucket and 2 AWS IAM Roles.
User Guide: Hosting Single Page Application Using Aws Amplify 9
User Guide: Hosting Single Page Application Using Aws Amplify 11

Step 04: After the Amplify Hosting has been set up, the SPA static build resources can be uploaded to the platform:

  1. Select Actions from the drop-down menu, then select View app settings;
  2. Click on Add Environment;
  3. Use the drag-and-drop functionality to select the local build folder of the application, and drop it into the console interface;
  4. Fill out the Environment name form and submit it;
  5. Wait for the deployment to finish (which should be pretty fast).

User Guide: Hosting Single Page Application Using Aws Amplify 13
User Guide: Hosting Single Page Application Using Aws Amplify 15
User Guide: Hosting Single Page Application Using Aws Amplify 17
User Guide: Hosting Single Page Application Using Aws Amplify 19

Step 05: Navigate to the Domain which has been automatically provided to you! ????

Cloudvisor Newsletter

Not Another Newsletter!

Stay up-to-date on the latest news about AWS and unlock the full potential of your startup with our monthly newsletter, “Not Another Newsletter!” 💡

User Guide: Hosting Single Page Application Using Aws Amplify 21

amplify-cli guide

Step 01: Make sure that you have the build artifact prepared. Refer to the steps above in the Prerequisites section

Step 02: Install the cli

npm install -g @aws-amplify/cli

Step 03: Optionally run the configuration cli command

  • This will create a new AWS IAM User with a certain IAM Role;
  • You will need to provide credentials to use it;
  • Essentially, this will create a new entry in the ~/.aws/config and ~/.aws/credentials files for later reuse.
amplify configure

Step 04: The ‘init’ command will issue a series of steps in the background. Refer to https://docs.amplify.aws/cli/start/workflows/ for more information

  • Analyze the project and perform project initiation based on the analysis;
  • Generate project metadata files under a new folder in the root called amplify;
  • Create a new Amplify Hosting environment as outlined in the manual steps (Manual Console work above step 2).
User Guide: Hosting Single Page Application Using Aws Amplify 22
  • You can also visit the AWS Console to double-check the Amplify Hosting environment.

Step 05: Add hosting setup

  • Select the type of hosting;
    • AWS CloudFront + AWS S3;
    • Hosting with Amplify Console.
  • Select Hosting with Amplify Console.
amplify add hosting

Step 06: Deploy the application

amplify publish

According to the logs, the publishing process will build and upload the application to AWS Amplify. Once the process is complete, a Domain name will be provided where the application can be accessed. For example, https://dev.d2jedzg0hgkr6v.amplifyapp.com.

User Guide: Hosting Single Page Application Using Aws Amplify 24

Learn More About Using AWS Amplify With Cloudvisor 

In this article, we demonstrate how to quickly deploy SPA and SSG applications to AWS Amplify using the AWS Console or the amplify cli with just a few simple steps.

Struggling to find the right AWS resources for your workloads and optimal configurations for these resources? Switch to a Proactive AWS DevOps Support and Monitoring Service with Cloudvisor! When you subscribe to our Proactive Support Service, our engineers will recommend the latest AWS best practices for you to implement and administer monthly reviews to ensure your infrastructure complies with these best practices.

Why wait? Get started today!

User Guide: Hosting Single Page Application Using Aws Amplify 26

Written by Sándor Bakos

AWS Cloud Engineer/Architect at Cloudvisor

Other Blog Posts