Accelerate App development using AWS Amplify with React Native

Published in

Slalom Technology

5 min readSep 30, 2021

AWS Amplify

AWS Amplify is a set of tools and services that can be used together or on their own to help front-end web and mobile developers build scalable full-stack applications. This article will walk you through how you can publish your own Amplify based application in a matter of minutes! Amplify has a very specific setup to get you writing your web or mobile application quickly. It does this by using three components libraries, UI components, and a CLI toolchain.

How to Get Started With React Native On AWS Amplify

AWS Amplify supports React Native out of the box, meaning that we can deploy a React App using Amplify with no custom configuration, or pipeline code needed. Amplify lets you take a generic React Native app and deploy it to the cloud! To get started you need to have a React Native codebase for Amplify to build.

Creating the React Native Project Using Expo

To start from scratch using Expo to create a new react app. First, install the Expo CLI and then initialize a new expo project using:

# select blank option 
expo init my-amplify-app  
cd my-amplify-app

To make sure everything works run:

expo start

to see the app startup, and then view it by choosing one of the Run on options on the left-hand side of the metro bundler page that pops up. Choosing a web browser, you will see your new app in all its glory in a new tab.

Now that we have a working app, we want to make sure we don’t lose our work, so it makes sense to push our code to a source control provider. Because React Native creates a git repository by default, so the only thing required is to push the repository to a source control provider supported by Amplify. For this example, we will create a new repository on GitHub.

Now our code is in source control and working on our desktop, but that is only useful to people who can look over our shoulder at our laptop to see our brand-new web page. We need to host this somewhere to make it useful to more people, so let’s deploy this using AWS Amplify.

Launching Your App In Amplify

For this demo, we are going to use the AWS Amplify CLI to deploy this app to amplify. The first step is to install the Amplify CLI then configure the CLI using

amplify configure

It will ask you to perform a couple of steps like choosing a region and setting up authentication for the new amplify user, which is pretty straightforward. The whole configure process is user friendly and guides you along the way. Defaults are good for most things, but make sure you create an AWS Profile at the end. I named mine default.

Now that the Amplify CLI is configured and connected to your AWS account, you can initialize the new Amplify project in your current React Project’s folder.

# Make sure you are in the React App's directory 
cd my-amplify-app  amplify init

Defaults are fine for most of the questions this step will ask, but make sure you choose the two options outlined in red.

Also, ensure you select the same profile you created above; in this case, it is the default.

Now it is set up, and we need to set up a service to host this code. Use

amplify hosting add

and choose

That will take you to the amplify console in the browser.

Then choose front-end environments, and choose a Git provider. Select it in the amplify console, and then click save and deploy.

You will then see the front-end environment begin to provision, build, and deploy your new app!

You can then click the URL above and see your app show up in the browser, hosted in AWS Amplify!

Notice the URL is an AWS domain that is reachable by any computer connected to the internet and is no longer constrained to people who happen to be looking at your laptop.

You have an app in the cloud, what didn’t you do?

Notice that you now have an application that others can reach in a matter of minutes, it didn’t take much, but I wanted to highlight the things you didn’t have to do.

Create a build, test, deploy DevOps Pipeline.
Architect, secure, and deploy Infrastructure, networking, and permissions model.
Procure an SSL certificate and DNS record for your app

In the time you took to read this article, you could have deployed a React Native Service on AWS Amplify; it is that simple!