Build a Secure Database Driven Web Application with Amplify and React: Part 1 - Setup

In my recent post I have published a demo CRUD application utilizing React.js, AWS Amplify and PostgreSQL on Aurora. For everyone who did not want to sign up and take a look for any reason, here's a screenshot:

In the next posts, I want to document how easy it is to build a secure serverless web application on top of Amplify using React as a frontend.

• AWS account

• AWS command line tools including amplify are installed and connected to the account

• Installed Node.js (version >=17) and React.js (version >=18.2)

• An IDE of choice like VS code

Initialize the Project

To set up the project, have a code editor ready and an terminal window with command prompt. First, we initialize the React application and give it a name like ardemo for Amplify-React Demo.

    > npx create-react-app ardemo

A directory with the project name will be created, we change to that and can run the intial React application right away:

 

> cd ardemo

> npm start 

By default, the node embedded web server runs on port 3000, thus, a browser tab opens on localhost:3000.

Open a new terminal window and let the embedded node server run. Initialize Amplify with the application name and the default profile.

    > amplify init

Now is a good time to install some required React libraries, to invoke Amplify and leverage some UI styles and components:

    > npm install aws-amplify
    > npm install semantic-ui-react

    > npm install semantic-ui-css

In the src folder, there is a file named App.js. It is called from the index.js and contains the main application. We remove the original code and replace it with something like this:

import './App.css';

import { Segment } from 'semantic-ui-react'

function App() {

return (

<Segment>

Hello

</Segment>

);

}

export default App;

The application will automatically recompile and show the new start screen with the simple Hello message.

Live Demo

Add Authentication

To add authentication, we make the related call through the CLI:

    > amplify add auth

The process will setup a new Cognito user pool (to use an existing, call amplify import auth). Most of the default settings can be confirmed. Recommended is to require a username for Sign In and an email address to Sign Up.

To persist this change in the cloud, issue

    > amplify push

This command is very central as all CLI made definitions and changes happen locally at first. Only the push command will transport them to the AWS cloud environment making them effective. This applies to all changes in the backend.

To prepare the invocation of the login page, we install the react UI library

    > npm install @aws-amplify/ui-react

and change the App.js file as follows:

import './App.css';

import { Segment } from 'semantic-ui-react'

import { withAuthenticator } from '@aws-amplify/ui-react'

import '@aws-amplify/ui-react/styles.css';

import { Amplify, Auth } from 'aws-amplify';

import aws_exports from './aws-exports';

Amplify.configure(aws_exports);

function App() {

return (

<Segment>

Hello

</Segment>

);

}

export default withAuthenticator(App);

When the application reloads in the browser, the user will get prompted to a logon screen with the option to sign up with a new account.

The screen also supports the sign up procedure backed by Cognito on the Create Account tab.

The signup process also contains email verification.

Live Demo

Publish to the web

Issue the command

    > amplify hosting add

Choose the first default option (Hosting with Amplify Console), then manual deployment. After a few minutes, the console will show an output like this:

    Find out more about deployment here:

      https://cra.link/deployment

    ✔ Zipping artifacts completed.

    ✔ Deployment complete!

    https://dev.d39bkla2gtuu0t.amplifyapp.com

    kaimoeller@Kai-Uwes-MacBook-Pro ardemo % 

The provided URL is the entry point of the published application. Using this in a browser, will show the login screen.

With the recommended deployment option, the endpoint will also show under Domain in the AWS Amplify web console:

Now we are all set to bring some life into our application, build a serverless backend service and use it on the UI.

Live Demo