DEV Community

Cover image for Building a Full-Stack Application with AWS Amplify and ReactJS
Edwin Muhoro
Edwin Muhoro

Posted on • Updated on

Building a Full-Stack Application with AWS Amplify and ReactJS

Introduction

AWS Amplify is a powerful development platform that enables developers to build scalable full-stack applications. This guide will walk you through creating a ReactJS application with a backend powered by AWS Amplify.

Prerequisites

  • Node.js v10.x or later
  • npm or yarn
  • AWS Account

Install the Amplify CLI

The Amplify Command Line Interface (CLI) is a unified toolchain to create AWS cloud services for your app. Let's go ahead and install the Amplify CLI.
npm install -g @aws-amplify/cli

Initializing the Project

Create a new React application and initialize your Amplify project:

npx create-react-app amplify-react-app
cd amplify-react-app
npm install -g @aws-amplify/cli
amplify configure
Enter fullscreen mode Exit fullscreen mode

amplify configure will prompt you to sign in and add IAM user.

Image description
Enter your desired username and press Next.

Image description
Select Attach policies directly and select AdministratorAccess-Amplify as the Permissions policy. Select Next

Image description
This is the review page. Check if everything is alright and create user.

Image description
Navigate to the just created user and click on the 'create access key button'.We'll need the key in the projects' terminal.

Image description
Select the first option,Click Next.
Image description
There we go! Use the copy icon to copy these values to your clipboard, then return to the Amplify CLI.

Image description

Setting Up Authentication

Set up authentication using Amazon Cognito:

amplify add auth
# When prompted, select the default configuration
amplify push
Enter fullscreen mode Exit fullscreen mode

Adding a GraphQL API and Database

Add a GraphQL API and database using AWS AppSync and Amazon DynamoDB:

amplify add api
# Select GraphQL, provide an API name, and choose an authorization type
amplify push

Enter fullscreen mode Exit fullscreen mode

Implementing the Frontend

Install necessary packages and configure the frontend to interact with the backend services:

//index.js
import Amplify from 'aws-amplify';
import awsExports from './aws-exports';
Amplify.configure(awsExports);

Enter fullscreen mode Exit fullscreen mode

Interacting with the API

Use the Amplify library to interact with the GraphQL API:

import { API, graphqlOperation } from 'aws-amplify';
import { listNotes } from './graphql/queries';

async function fetchNotes() {
  try {
    const noteData = await API.graphql(graphqlOperation(listNotes));
    console.log('notes:', noteData);
  } catch (err) {
    console.log('error fetching notes', err);
  }
}

Enter fullscreen mode Exit fullscreen mode

Deploying the Application

Deploy your application using the Amplify Console:

amplify add hosting
# Select a hosting service and follow the prompts
amplify publish

Enter fullscreen mode Exit fullscreen mode

Conclusion

You’ve now successfully set up a full-stack application with AWS Amplify and ReactJS. This application includes user authentication and a serverless backend with a GraphQL API.

Top comments (0)