From Zero to Serverless: Building a React App with AWS Amplify
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.