This tutorial is very image heavy and targeted towards complete beginners. It explains how you can host your React application on a website, with a complete authorization system. It invokes the power of AWS MobileHub through the Mobilehub CLI (Command Line Interface). The tutorial requires no skills with AWS services and will also show you to set up a React boilerplate application.

If you already have a React application, you can skip to section 2 where we install awsmobile-cli and add it to our application.

Before we get started we need a couple of things set up on your computer

Node 8.x environment installed on your computer

This is the runtime environment for Javascript application servers. It follows with the node package manager (NPM).

NPM is used to install node packages such as React, AWS Amplify, an AWS-JS connector package and that’s basically it.

https://nodejs.org/en/download/

An AWS Free Tier account.

You get free access to AWS Services through Free Tier. For this tutorial, this should be more than enough. However, mind that each service has a limit on usage each month and this might cost you real money.

https://aws.amazon.com/free/

Install the AWS CLI (Command Line Interface) to call AWS services directly from your console

For this course we will use the maintained boilerplate from Facebook, creators of React.

An editor of your choosing.

I suggest starting with Visual Studio Code, a highly modifyable lightweight editor which can run most programming languages and frameworks.

Pro tip: In the install process of VS Code, make sure check the box which adds it to your environment path names. This gives you access to open VS Code from the terminal by typing “code filename.js” or “code .” for the whole project you’re in.

A terminal you’re comfortable in.

Most developers should have Git installed on their computer. This gives you access to Git Bash which is many developers go-to terminal.

Lets begin!

1. Create the React application and enter the project folder through terminal

Enter the terminal and locate your folder where you store applications. I suggest a folder named “dev”.

npx create-react-app project-name && cd project-name

or

npm -g install create-react-app

create-react-app project-name

Here we create a React application based on the boilerplate. “npx” is a Node tool which uses the npm server for calling on remote packages. The second code snippet installs create-react-app locally with npm -g install create-react-app and then creates the application. I suggest using npx to always be up-to-date with create-react-app.

2. Install awsmobile CLI to your computer and run it in the project

From this point, you should pay attention to your React application in your code editor. There will be added folders such as /awsmobile and some additions to the package.json file.

In a terminal window, type

npm install -g awsmobile-cli

to install awsmobile-cli globally. We’ll use this after doing some work in the AWS Mobile Hub console.

Make sure you’re inside your project and type

awsmobile init

You’re prompted with a set of questions, in which the defaults are good so press enter through each setting until it automatically opens AWS in your default browser. Login with your Free Tier account if you didn’t already.

This assures awsmobile-cli that we’re connected to the correct AWS account. Go back to your terminal and Press Enter to continue.

AWS needs to setup a user to control the application. This will be done automatically by awsmobile-cli when you continue to press enter.

Pick the correct region (eu-central-1 in my case)

After completing this, you’ll be taken to AWS IAM where you’ll just ‘Next’ your way through to completeness! In the second step it should automatically have checked “Administrator Access” which gives the User access to all features of AWS we need.

When done, it’s very important that you download the .csv file with your secret credentials as they will only be displayed once in AWS. These keys are to be used in the next steps of your terminal window.

Copy these values into the accessKeyId and secretAccessKey of your terminal

This successfully creates your AWS MobileHub application and automatically install aws-amplify & aws-amplify-react into your local React project

When this process is done (~1 min) you can type

awsmobile console

to see your Mobile Hub application in your default browser. You can also type “awsmobile” to see a list of different actions. From here, we’ll add Cognito Login with the browser, but you could do it from the awsmobile CLI.

3. Actually adding Cognito Sign-in and Hosting

For the last step, we’ll add AWS Cognito to our project through AWS MobileHub Console. You can also check out Hosting which is already enabled by default.

To test Hosting, click the feature in your console and click the URL you’ve been provided. The content here is a template by AWS, but you’ll overwrite it with the React application soon.

To add Cognito User Sign-in, scroll down to find “User Sign-in” and click it. This enables Cognito User Pools with an authentication system. Use “Email” from Email address or phone number to force email as username in your login. Or you can use Username and enable “Email” + “Username” to let the user choose. You’ll receive the confirmation code by email either way.

We accept email because AWS doesn’t charge for sending out registration confirmation codes to email, while it costs real money to send SMS.

Which results in:

If you click Action > Edit in Cognito, you’ll see the Cognito console for managing your Users and advanced security features. Some setup you did in this step is non-reversible but you can always delete your user pool and create a new one.

This completes the configuration of AWS Cognito inside MobileHub. It’s time to add code. How much? 5 lines! And 3 of them are only imports in React.

Adding your settings to the React project and publishing to your website

In your terminal, you can at any time use awsmobile pull or awsmobile push to respectively pull your changes from AWS MobileHub Console online to your application, or push your local changes done through the awsmobile CLI in the terminal.

For this use case we want to fetch the changes we made. Go back to your terminal and type

sync when prompted

Back in VS Code, you’ll see that your project now has been modified. You can check your local configurations in ./awsmobile/backend/mobile-hub-project.yml

Also, in ./package.json you’ll find the two highlighted libraries being added by awsmobile init which we did earlier.

We’ll now use these to wrap our application in a Cognito login window. Open ./src/index.js and modify this:

to this:

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import registerServiceWorker from './registerServiceWorker';

import awsMobile from './aws-exports';

import Amplify from 'aws-amplify';

import { withAuthenticator } from "aws-amplify-react" Amplify.configure(awsMobile);

const AppWithAuth = withAuthenticator(App) ReactDOM.render(<AppWithAuth />, document.getElementById('root'));

registerServiceWorker();

And you’re done! Try to run your application from your terminal with

npm start

and see it be loaded into the browser with a sleek GUI created by AWS:

From here you can register, login or reset users, and as an admin you can see the users who are registering.

To add hosting, simply go to your terminal and type

awsmobile publish

If you get this warning, abort the publish, run awsmobile pull and run awsmobile publish again:

When this process is done, your hosted website automatically opens in your default browser:

There, you’re done!

Pitfalls in the process

If the application says “No user pools”, make sure your MobileHub console has Sign-In activated, and that you’ve called awsmobile pull from your terminal. This updates the aws-exports.js file which is then added to Amplify.configure() in React. Also, remember to import that file!

Further challenges

Use the aws-amplify authentication documentation to add a signout button to your application.

Hint: You’ll need to import Auth and call its signOut function.

import { Auth } from aws-amplify-react

Add your custom domain name to the hosted website

This is done through CloudFront, which you can access in MobileHub “Hosting and Streaming”. Read the docs provided if you want assitance:

Add Google Login

Delete your Cognito User Pool and add one with Facebook/Google providers. This can be a bit tricky as you need to get e.g. Google Web App Client ID from the google terminal to make this work.

Hope you enjoyed this very detailed introduction to AWS MobileHub. It’s a lot of fun once you get the hang of it, and creating a Serverless backend for your frontend project has never been as easy!