How To Setup An AWS Amplify React Project With A REST Backend

Looking to setup a React application with a REST or GraphQL backend using AWS Amplify? This step by step article is for you!

If you’re a new developer to the AWS ecosystem, AWS Amplify can seem as a pretty attractive option. It allows you to setup and configure a fullstack application very quickly with minimal knowledge of AWS itself.

The best part about amplify (besides its speed in setup) is that it easily allows you to add various types of application intergrations. This includes things like databases, general storage, authentication, pubsub, and many more features. Not to mention the fact that anything you build with amplify will by default be highly scalable. After all, its hosted on AWS – so its gotta scale. In fact, I wrote a whole introductory article on the features of Amplify here.

In this article, I’m going to walk you through all the steps you need to know to set up your first AWS Amplify React project with a NodeJS based REST backend. I’m going to walk you through all the steps and show you whats going on behind the scenes.

By the end of this post, you’ll have a good understanding of how AWS Amplify works, and the AWS services its interacting with behind the scenes; of course, you’ll also have a starter project for you to build off of.

So lets get started…

https://docs.amplify.aws/start/getting-started/installation/q/integration/react/#option-1-watch-the-video-guide

Prerequisites

Note that there are a couple pre-requisites for this article. You’ll need to have installed:

  1. NPM
  2. Amplify CLI (installation guide here for mac and here for windows)
  3. Git

Step 1 – Setting Up Our Frontend code

First off, we’re going to get started by creating a basic hello world react application with npx. We’re going to use npx and name our project amplify-demo-app as seen below. Once done, cd into your project directory

>> npx create-react-app amplify-demo-app
>> cd amplify-demo-app

Follow the wizard to create your initial project files for your application. Once its done, you can open the project directory in your editor of choice to examine the folder structure. Not much to see here at this point since its just a starter react app.

You can verify everything is set up correctly by typing npm start to run your app. It should open up a browser and look like what we have below.

Our frontend starting state. A simple Hello World react app.

Go ahead and kill your local server running the app to move forward (tip: ctrl + c usually does the trick). By default, this runs on http://localhost:3000. We’re not going to be touching the frontend much in this demo so just put it aside for now.

Lets move on now to creating the backend.

Step 2 – Initializing Our Backend

Now we’re going to move on to the bit where we get to play with amplify. We’re going to create our NodeJS based backend and run through some of the interesting things going on in our AWS account to make this all possible.

To get started, run the command below to configure your project from your projects root directory. In my case, thats /daniel/temp/amplify-demo-app .

>> amplify init

Your terminal will launch into a wizard asking you various questions on how you’d like your project configured. The cool thing about this method is that amplify will auto-detect that you’re in a directory with a react based front end and configure much of the project options for you! This way, you can fast forward through a bunch of nonsense.

You should see a bunch of defaults selected that look like below:

After running amplify-init, our wizard pre-fills in a bunch of project information such as project name, editor, app type, build/start commands and more.

Next, amplify is going to ask you if you’d to setup your project using an AWS Profile or AWS Access Keys. If you have an AWS CLI profile already set up on your CLI, you can go ahead and select profile. You should have already done this as part of running the amplify configure command when initially setting up your CLI.

Amplify is asking us how we want to provide our AWS credentials. You should have created a profile as part of pre-requisites, so you can select the profile now.

If you haven’t, go ahead and take a pause and visit the links mentioned in the pre-requisites section of this article above.

After you’ve done so, go ahead and select the name of the profile you created using the arrow keys like below. I called my profile amplify-demo-app.

Amplify asking us to confirm the AWS CLI profile we want to use.

Do note that alternatively, you could have clicked AWS Access Keys instead of AWS Profile. In that case, you would need to provide the IAM access key and secret access key of an IAM user with the Administrator Access IAM policy. Both means will work just fine.

Looking Under the Hood

At this point, a bunch of text starts rolling down our screen like CREATE_IN_PROGRESS or CREATE_COMPLETE. What does all this nonsense mean?

It turns out that amplify is relying on another AWS Service called AWS Cloudformation. Cloudformation is an infrastructure as code service that allows developers to write template files that in turn generate resources in AWS services. You can use it to create a DynamoDB Table, an S3 bucket, an IAM Policy, and pretty much anything else that exists on AWS.

You can actually verify what Cloudformation is doing by heading into the Cloudformation section of the AWS console. You should see a Stack who’s name starts with your project name. Here’s what mine looks like below:

Amplify behind the scenes relies on AWS Cloudformation; an infrastructure as code service that helps users rapidly deploy AWS resources through template files.

Clicking on our stack, and looking at the Events tab, we can see some text that is identical to what was rolling down the console screen after we pressed enter to initialize our project. These are Cloudformation status event updates that report back to us the progress of our infrastructure provisioning.

The Amplify Stack we just created actually creates a CloudFormation stack. Here we see the event log of resources being created, along with status codes. This text is exactly what is shown to you via the console.

Finally, we can click on the Resources tab to see the types of components that Cloudformation created as part of this stack. Mine is below.

The three resources AWS created as part of our amplify init command.

Notice the only things amplify has created so far are two IAM Roles and an S3 Bucket. This is a great starting point for us to add more complex elements to our project such as a full fledged backend.

But before we go there, I want to quickly head over to the AWS Amplify section of the AWS console. It turns out after we finished initializing the project, our project will now be visible in the AWS Amplify section of the console! Navigate over there now and click your project.

Via the Amplify section of the AWS console, we can now see our project. Clicking on our project here will bring us into the default project view.

Go ahead and poke around the Amplify console for a bit. There’s nothing much to see here at the moment but we’re going to be adding a whole bunch of functionality shortly.

Alright, back to our terminal / editor…

At this point, our backend is now initialized in Amplify. After running the wizard successfully, you should notice a whole bunch of files added to your projects directory. The amplify specific resources are in the amplify directory. You should see a directory structure similar to what I have below.

Our initial project structure.

Take a few moments to look through the folder structure and files. There’s nothing magical here, its all pretty much just boilerplate.

So far initialized our frontend with a starter project, and initialized our amplify project using the CLI. This has generated a bunch of folders and files for us.

However, something is wrong here… The project just looks so empty. At this point, we’re ready to add our first backend feature, an API.

Step 3 – Adding An API

Now we’re ready to create an API for our frontend application to interact with. To get started, run the below command from your project root to star the API creation wizard.

>>> amplify add api

The first prompt, as seen below is to decide whether you want your API to be GraphQL or REST based. For the sake of simplicity, I’m going to select REST for this demo.