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-uiOpen the project in Visual Studio Code with the command:
code .To confirm the installation, start the development server, which is accessible on
http://localhost:3000npm startThe 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-amplifyAmplify 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.
Next, let’s replace the contents of the App.js file and experience the power of Amplify from this gist.
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.