Ionic 4, React, and AWS Amplify

Vincent Medina

While emulators are a great way to test apps, there are a number of reasons why deploying to the web and having the ability to run on several devices simultaneously is important.

So let’s explore AWS Amplify with Ionic 4 and React. In this post I’ll just scratch the surface by showing you how to deploy to AWS Amplify using the Amplify CLI, but stay tuned for possible future posts about more on how to use and build on Amplify.

Creating Our Ionic React App

Assuming you have the Ionic CLI installed, let’s create our app:

$ ionic start ionic-cra blank --type=react --capacitor

The standard Ionic React app template comes with the Ionic Router, some bare bones TypeScript, and ready for us to start coding. After navigating to the pages folder, let’s open up Home.tsx and begin with something simple.

import React from "react";
import {
  IonContent,
  IonCard,
  IonCardContent,
  IonImg,
  IonPage,
  IonToolbar,
  IonTitle
} from "@ionic/react";
import Waves from "../images/waves.jpg";

const Home: React.FC = () => (
  <IonPage>
    <IonContent color="primary">
      <IonToolbar>
        <IonTitle>The Ocean</IonTitle>
      </IonToolbar>

      <IonCard color="light">
        <IonCardContent>
          <IonImg src={Waves} />
        </IonCardContent>
      </IonCard>
    </IonContent>
  </IonPage>
);

export default Home;

Getting Started with AWS Amplify

To begin, we’ll install the Amplify CLI globally and configure our project.

$ npm install -g @aws-amplify/cli
$ amplify configure

The configure command will open up your browser and prompt you to login to your AWS console. We can configure Amplify any number of ways, but the defaults seem to do the trick for at least getting started.


However you see fit, define the following:

  • Your region, username, access type (I chose Programmatic), permissions (Administrator Access), and optional tags. Next, create your user, save your credentials somewhere safe, and login with the default profile.

Adding Amplify to Your Project

This next part is a bit involved, but fairly simple nonetheless. Again, I used the defaults that I could.

$ amplify init
Project name: default
Environment name: dev
Editor: Visual Studio Code
Type of App: javascript
Framework: ionic
Source directory: src
Distribution directory: build
Build command: ionic build
Start command: ionic serve
AWS Profile? Yes, default
$ amplify hosting add

For my environment, I went with DEV (S3 only with HTTP) and the default bucket name, as well as index.html for the website and error docs.

Finally, we can publish our app with the publish command.

$ amplify publish

With a bit of patience, your browser should open up to your new app. Save your new link so you can test away on any device with a web browser and get a better feel for your new app.

Screenshot of our simple Ionic React app

🌊 Thanks for reading and sea you next time!

  Tweet It

🕵 Search Results

🔎 Searching...

Sponsored by #native_company# — Learn More
#native_title# #native_desc#
#native_cta#