How to Deploy Modern Apps with AWS Amplify

The world of web development has evolved over the years.  There are now more and more tools and services that make development a breeze and reduce the time it takes to deploy a modern web app on the internet. You don’t need to spend money on buying a domain, nor is it necessary to pay for hosting to renew a space for your app on the internet. 

The traditional way of deploying your app with a hosting service may take time for your app to propagate before viewing or sharing your URL with the world.

Like many other services for deploying a web app, AWS Amplify is free to use, whereby you connect your GitHub repo from your Amplify console dashboard. 

In this article, you will learn how to create a sample project app using the product listings typical of an ecommerce website.

So, let’s begin with creating and deploying your first app with Amplify.

Prerequisites

The setup required to deploy your app:

• AWS account. Sign up for a free account
• Node >= 14.0.0 and npm >= 5.6 installed on your local machine
• A code editor (VS Code recommended)
• Install the AWS Amplify CLI. Run this command, npm i -g @aws-amplify/cli
• Knowledge of JavaScript and React
• A GitHub account. Sign-up is free

The complete source code is in this GitHub repo. Fork and clone the repo.

Check the live demo.

Creating the React App

Every React application starts with an installation to scaffold the project folders and files. Run this command:

npx create-react-app <name-of-app>

Replace the

<name-of-app>

Once done, navigate to the directory:

cd react-amplify-ui

Open the project in Visual Studio Code with the command:

code .

To confirm the installation, start the development server, which is accessible on

http://localhost:3000

npm start

The app will look something like this:

Next, let’s set up Amplify.

Setting up AWS Amplify

The setup process involves installing the dependencies required to use any of the components Amplify provides for the user interface. 

Run this command:

npm install @aws-amplify/ui-react aws-amplify

Amplify UI ships with its default theme, which you can customize to match the look and feel of your projects.

Creating the Product Listing

The product page for this section shows various products with details of the price, description, a button, and several other layouts, which is typical of a modern ecommerce website.

Let’s create a new file containing all the product data under the src directory called paintings.js.

Copy and paste this code from this Gist in the paintings.js file.

https://gist.github.com/Terieyenike/15cf23802b088bbdb0f339ab982f71f

Next, let’s replace the contents of the App.js file and experience the power of Amplify from this gist.

https://gist.github.com/Terieyenike/4e05716599153d15d460e25acdd2ff70

The product paintings page should look something like this:

Deploying the App to AWS Amplify

Before deploying the app to Amplify, you must create a new repo on GitHub and push the repo there.

Go to GitHub and create a new repo. Once completed, open your terminal and run the command provided when making the repo.

Head over to your Amplify console dashboard or navigate to the AWS Amplify service so you can host a web app. On your dashboard, click the “Host web app” button from the dropdown of the “New app”.

Next, you will connect your repository to a distributed version control system (VCS). Select the GitHub option and click continue.

The next screen has a dropdown for the recently updated repositories from your account on GitHub. Click the dropdown, select the repo you created on GitHub, and click the next button until you get the page for deploying the app.

The final deployment step comes with this screen to save and deploy your frontend web app to Amplify, which gives you a URL to preview the live site. Click the Save and deploy button and wait for the process to finish.

If you did everything correctly, this screen shows the hosting environment with the link to the deployed app on Amplify and the check marks showing no error occurred during deployment.

Demo of the app

Conclusion

In this post, you learned how to use AWS Amplify to build and deploy modern apps, which provides a unique URL you can share.

Learn More

• Amplify UI documentation
• AWS Amplify hosting