Back to articles

From Zero to Serverless: Building a React App with AWS Amplify

Majd Muhtaseb05/16/202510 minutes

Introduction

Deploying React applications can be a daunting task. AWS Amplify simplifies this process by providing a comprehensive platform for building and deploying serverless applications. This guide will walk you through creating a basic React app and deploying it to AWS Amplify in minutes.

Prerequisites

• Node.js and npm installed
• AWS Account
• AWS CLI configured

Creating a React App

First, let's create a new React application using Create React App:

npx create-react-app amplify-react-app
cd amplify-react-app

Initializing Amplify

Now, initialize Amplify in your project:

amplify init

Follow the prompts. Choose your preferred text editor, JavaScript, React, configure AWS profile, etc.

Adding Authentication

Let's add authentication using Amplify Auth:

amplify add auth

Accept the default configuration for simplicity (username/password sign-in).

After configuration, deploy the changes:

amplify push

This will provision the necessary AWS resources.

Integrating Authentication in React

Install the necessary Amplify libraries:

npm install aws-amplify @aws-amplify/ui-react

Configure Amplify in your src/index.js file:

import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

Import the @aws-amplify/ui-react components and wrap your App component with AmplifyProvider. Then use the Authenticator component to add authentication.

import { AmplifyProvider, Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

function App() {
  return (
    <AmplifyProvider>
      <Authenticator>
        {({ signOut, user }) => (
          <main>
            <h1>Hello {user.username}</h1>
            <button onClick={signOut}>Sign out</button>
          </main>
        )}
      </Authenticator>
    </AmplifyProvider>
  );
}

export default App;

Deploying to Amplify Hosting

Finally, deploy your application to Amplify Hosting:

amplify add hosting

Choose Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment) and accept the defaults.

Then, deploy:

amplify publish

Amplify will build and deploy your application to a unique URL.

Conclusion

This guide demonstrated how to quickly create and deploy a React application with authentication using AWS Amplify. Amplify simplifies the development and deployment process, allowing you to focus on building your application rather than managing infrastructure.