🌎 Build an Hello World web application in under 5 minutes with AWS Amplify

Introduction

In this beginner friendly tutorial we are building an Hello World React application that we will deploy to AWS (and the internet) using AWS Amplify. By leveraging AWS Amplify we are allowing ourselves to by-pass the hardships of manually configuring default important web application tools. It doesn’t only allow us to host our web application, but also makes it easy to use tools like storage, databases or API’s. We will only do the deployment in this post, but will build on it for later series.

At the end of the post

• You will have created a new React project
• You will have initialised AWS Amplify
• You will have deployed your React application to the internet and made it available under a custom domain name.

Why use React/AWS Amplify?

‘I have this simple need for an Web application that gathers some data from an API and presents it to the user’

This is the most common use case that we will see. These days, for most of the websites, it is enough to just call an API and present something back that you then enhance.

I need to do simple CRUD operations to support my administration department

Create, read, update and delete operations are one of the most common requirements for any web application. By leveraging the power of the React framework and the tools that AWS Amplify offers us, we will get you to skip on writing all of that boring boilerplate code and get right to the things that matter.

Table of Contents

We will walk through the following steps in this post:

1. Initialising AWS Amplify on your computer
2. Creating a new React project using create-react-app
3. Deploying your React application using the CLI

Requirements

In order to follow along peacefully with this example, you’d need to have the following:

• Activated AWS account
• Node.js v10.x or later
• npm v5.x or later
• git v2.14.1 or later

---

Step by step tutorial

From this point onward we are assuming that you have met the above requirements. Let’s get started!

1 Installing & configuring AWS Amplify

The first step is to initialise Amplify on your computer. We are assuming that you haven’t got it installed yet, so let’s do that first.

1.1 Install Amplify globally using NPM.

We will install AWS Amplify globally using NPM. Use the following command in a terminal from anywhere on your computer:

npm install -g @aws-amplify/cli

Note: Because we’re installing the Amplify CLI globally, you might need to run the command above with sudo depending on your system policies.

1.2 Configure Amplify

Now that Amplify is installed, we will configure it before being able to use it. Running the following command will require you to log in to your AWS account:

amplify configure

The CLI will then ask you to create an IAM user that will allow the CLI to actually deploy your resources.

2 Creating your new React application

The next step of this Hello World tutorial with React is to actually create your new React application. You can more information in the official documentation that you can find here.

It’s very simple. All we need to do is generate the react application boilerplate by doing:

npx create-react-app react-amplify-hello-world

3 Deploying your React application using AWS Amplify

This is the last and final step of this beginner tutorial. In this last step, we conclude the tutorial by initialising Amplfiy in our React application.

3.1 Initialise Amplify

In order to do so, we need to use the terminal to go in to the folder that was created in the last step. After that, we want to start by calling amplify init:

amplify init

The CLI will ask you for a couple of project details. You can leave all things default if you just want to see what happens, or you can change trivial things like the project name. Do make sure that the CLI has recognized React as the javascript framework that you are using so that the other settings like the Source Directory Path are also set correctly.

3.2 Hosting your React project on AWS

The final step before others can visit your React application will be to add hosting to your project. This is one of the great features of Amplify, because it takes a lot of the complexity out of your hands. In order to add hosting, all you simply need to do is:

amplify add hosting

The CLI will then ask you which of the deployment options you’d prefer. In my case, I’m going full in on Amplify and want it to take as much out of my hands as possible.

After this, you only need to do a publish of your Amplify resources in order to deploy everything to your AWS account and you’re all done.

amplify publish

---

Conclusion

You’ve now succesfully deployed your first Reac application to AWS using AWS Amplify. Although the current application doens’t offer any functionalities, it does open a door to a lot of opportunities. With the help of Amplify, we can easily add the most commonly used tools like storage, authentication or API’s.

Next steps

With this foundational application ready to use we can draft plans for future use. You can find more posts like these in the AWS Amplify category where we show how to add APIs, storage or authentication.