Sunday, 26 January, 2020 UTC
Summary
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; ↓ Here's a great React course we recommend. Plus, this affiliate banner helps support the site 🙏
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.
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.