Table of Contents
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:
- Initialising AWS Amplify on your computer
- Creating a new React project using create-react-app
- Deploying your React application using the CLI
In order to follow along peacefully with this example, you’d need to have the following:
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:
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:
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.
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.
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.