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 installed on your local machine Node >= 14.0.0 and npm >= 5.6 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 . Fork and clone the repo. GitHub 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 with the name of the project. <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 , with this command: 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 in the paintings.js file. this Gist 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 and create a new repo. Once completed, open your terminal and run the command provided when making the repo. GitHub 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

Amazon

Web Automation with Python and Selenium

How to Build a Python Web Scraper: Scrape Data from any Website

Portfolio

Nominated for 2022 - HackerNoon Contributor of the Year - Data Visualization

Nominated for 2022 - HackerNoon Contributor of the Year - Heroku

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Frontend

Nominated for 2022 - Remote Work Warrior

Nominated for 2022 - No No No Nodejs

Too Long; Didn't Read

Make resilience your competitive advantage

How to Deploy Modern Apps with AWS Amplify

How to Deploy Modern Apps with AWS Amplify

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

How to Build a Voice Transcription and Translation App with OpenAI Whisper and Streamlit

AWS IAM Permission Limit Management: Another Often Forgotten Layer of Security

Releasing New Versions Should Be Boring. Really Boring.

AWS Bedrock Knowledge Bases: Comparing S3 Vector Store vs. OpenSearch, PostgreSQL & Neptune

The Noonification: How Amazon Treats Warehouse Workers Who Contracted COVID (11/30/2022)

How to Build a Voice Transcription and Translation App with OpenAI Whisper and Streamlit

AWS IAM Permission Limit Management: Another Often Forgotten Layer of Security

Releasing New Versions Should Be Boring. Really Boring.

AWS Bedrock Knowledge Bases: Comparing S3 Vector Store vs. OpenSearch, PostgreSQL & Neptune

The Noonification: How Amazon Treats Warehouse Workers Who Contracted COVID (11/30/2022)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps