Develop and Publish a React Web App on the Cloud in Minutes with AWS Cloud9, AWS Amplify and AWS Mobile CLI with Authentication and Private Images

This article used the AWS Mobile CLI when it was created, while still available on NPM the development has been discontinued. You can find some information on how to use AWS S3 with the Amplify CLI here.

AWS Amplify is a very powerful library for the frontend and when it’s used in conjunction with the AWS Mobile CLI, you can have your backend resources such as analytics, file hosting, content delivery network, and authentication deployed and configured for you with few commands in a couple of minutes.

What about coding the app itself? What if I could have a portable web development environment I can access from anywhere, and use it to develop and deploy my web app with less than 30 lines of code in minutes?

Let’s see how. First you need to create an environment on AWS Cloud9 at https://console.aws.amazon.com/cloud9 :

Now install the latest LTS node version, create-react-app, the AWS Mobile CLI and AWS Amplify using the following commands:

> nvm i v8
> npm install -g create-react-app
> npm install -g awsmobile-cli

Create an app, open the app folder and run a couple more commands:

> create-react-app cloud9-reactapp
> cd cloud9-reactapp
> npm install aws-amplify aws-amplify-react
> awsmobile init

The “awsmobile init” command will configure the access and initialise a project to create some backend services.

Chose the default options, make sure you are logged in with a user that has administrator access and click the resulting link to create an IAM user for the Mobile CLI by selecting OPEN:

Follow the steps in the IAM Console with default options then use the generated credentials to configure the access in the Mobile CLI:

Now let’s add user authentication and file hosting to the backend, by default only analytics and hosting are enabled:

Run the following command to push the changes to Mobile Hub.

awsmobile push

Use the left panel to navigate to the file “cloud9-react/src/App.js” and replace the code with:

import React, { Component } from ‘react’;
import logo from ‘./logo.svg’;
import ‘./App.css’;
import Amplify from ‘aws-amplify’;
import { withAuthenticator, S3Album } from ‘aws-amplify-react’;
import aws_exports from ‘./aws-exports’;
Amplify.configure(aws_exports);
function AppName(props){
 return (<h2>{props.name}</h2>);
}
class App extends Component {
 render() {
 console.log(“Look ma, Developer console inception!”)
 return (
 <div className=”App”>
 <header className=”App-header”>
 <img src={logo} className=”App-logo” alt=”logo” />
 <AppName name = “My S3 Album”/>
 </header>
 <br/>
 <S3Album level=”private” path=”pics/” picker />
 </div>
 );
 }
}
export default withAuthenticator(App, {includeGreetings: true});

And start the app with:

awsmobile run

Go to the PREVIEW menu on Cloud9 and select PREVIEW RUNNING APPLICATION. A browser window will be opened inside Cloud9 environment with the application running.

Sign up a user, providing a valid e-mail and phone number. You will receive a temporary code on your mobile device via SMS. Use it to validate the user sign up. You’ll need to sign in again and validate the sign in with a new code. After that the user will be authenticated and have the JWT tokens automatically renewed until the user is signed out or the refresh token expires.

Now you can start uploading and visualizing your pictures in a private S3 bucket. Best of all you can access and debug the app using the local browser developer tools!

Since we tested and confirmed our application works, it’s time to make it publicly available by publishing it to a content delivery network. It’s as easy as executing the following command:

awsmobile publish

The command will return the CloudFront address of your web app with a valid SSL certificate for secure access:

With AWS Amplify UI Components and the AWS Mobile CLI anyone can create a React web application with Cognito multi-factor authentication and a S3 private picture album with 30 lines of code in less than 10 minutes. These powerful tools allow to streamline and speed up backend and frontend development, making it even easier to develop on AWS.