Create a Fullstack React App with AWS Amplify: Build in Just 1 Hour! 🚀
Are you looking to build a fullstack React app quickly and easily? Look no further! With AWS Amplify, you can get up and running in just one hour. In this article, we’ll cover all the steps to build a fullstack React app with AWS Amplify, so let’s get started!
What is AWS Amplify?
AWS Amplify is a set of tools and services provided by Amazon Web Services (AWS) that enables developers to build fullstack React applications with ease. It allows you to easily add authentication, storage, APIs, and other features to your app, all powered by AWS services.
Step 1: Set up AWS Amplify
To get started, you’ll need an AWS account. If you don’t have one already, you can sign up for a free account on the AWS website. Once you have an account, you’ll need to install the Amplify CLI. Open your terminal and run the following command:
$ npm install -g @aws-amplify/cli
After the installation is complete, you’ll need to configure the Amplify CLI. Run the following command:
$ amplify configure
This will prompt you to enter your AWS access key and secret access key, which you can find in your AWS account settings. Once you’ve entered these details, you’re ready to start using AWS Amplify.
Step 2: Create a new React app
Next, let’s create a new React app. Open your terminal and run the following command:
$ npx create-react-app my-app
This will create a new directory called “my-app” with a basic React app inside. Navigate into the “my-app” directory:
$ cd my-app
Step 3: Initialize AWS Amplify
Now that we have a React app, let’s initialize Amplify. Run the following command:
$ amplify init
This will prompt you to answer a few questions about your app, such as the name and environment. Once you’ve answered these questions, Amplify will set up your app and create a new “amplify” directory in your project.
Step 4: Add authentication
Authentication is an important part of many apps. With Amplify, you can easily add authentication to your React app. Run the following command to add authentication:
$ amplify add auth
This will prompt you to choose the authentication settings for your app. You can choose from various options, such as email/password, phone number, or social media login. Once you’ve made your choices, run the following command to deploy the authentication service:
$ amplify push
Amplify will deploy the authentication service to your AWS account, and once it’s finished, you’ll have a fully functioning authentication system in your app.
Step 5: Deploy your app
Now that we have added authentication, let’s deploy our app. Run the following command:
$ amplify publish
This will build and deploy your React app to the AWS hosting service. Once it’s finished, Amplify will provide you with a URL where you can access your app.
Step 6: Add more features
Congratulations, you’ve built a fullstack React app with AWS Amplify! But why stop here? Amplify offers many other features that you can easily add to your app, such as storage, APIs, and even AI and machine learning capabilities. Check out the Amplify documentation for more information on how to add these features to your app.
With AWS Amplify, you can build powerful fullstack React apps in no time. Whether you’re a beginner or an experienced developer, Amplify makes it easy to get started and quickly develop your app. So what are you waiting for? Start building with AWS Amplify today!
I finished building as you told me but I still log in and sign out! I can only see the React logo, not this one. Is there anything I missed?
1. Modifying build specifications
2. 2. ampify cli latest setting
3. Setting the staging branch
4. Creating and Setting Up IAM – Amplify-Backend Deployment
5. Build success with redistribution!
But still, the React logo..
Can we use nextjs instead of react here?
Hi sir I'm facing an error in the build stage that missing frontend definition in buildspec….how to solve it please help me
Hi. Thanks for the video it helped me a lot to understand the process but I have a question to you. I have a simple node.js and express server that I just need to deploy and run. I have my app frontend app already working on amplify but can't figure how should I add my backend server here. It is simple server not authentication, no database. It is only scraping the date of the website. Can you advice what steps should I take? Many thanks
after days trying to figure out how backend and front end are going to connect to each other in amplify. your 1 hour saved my time.
Well when ever I try amplify con figure, I get this error message :Error fetching release: EPERM: operation not permitted, open 'C:Usersbluem.amplifybinamplify.exe' I look in to this folder amplify/bin, and it is empty
Very helpful. Thank you 🙂
The code at 44:07
import React, { useState, useEffect } from "react";
import "./App.css";
import "@aws-amplify/ui-react/styles.css";
import { API } from "aws-amplify";
import {
Button,
Flex,
Heading,
Text,
TextField,
View,
withAuthenticator,
Image,
} from "@aws-amplify/ui-react";
import { listNotes } from "./graphql/queries";
import {
createNote as createNoteMutation,
deleteNote as deleteNoteMutation,
} from "./graphql/mutations";
const App = ({ signOut }) => {
const [notes, setNotes] = useState([]);
useEffect(() => {
fetchNotes();
}, []);
async function fetchNotes() {
const apiData = await API.graphql({ query: listNotes });
const notesFromAPI = apiData.data.listNotes.items;
setNotes(notesFromAPI);
}
async function createNote(event) {
event.preventDefault();
const form = new FormData(event.target);
const data = {
name: form.get("name"),
description: form.get("description"),
};
await API.graphql({
query: createNoteMutation,
variables: { input: data },
});
fetchNotes();
event.target.reset();
}
async function deleteNote({ id }) {
const newNotes = notes.filter((note) => note.id !== id);
setNotes(newNotes);
await API.graphql({
query: deleteNoteMutation,
variables: { input: { id } },
});
}
return (
<View className="App">
<Heading level={1}>My Notes App</Heading>
<View as="form" margin="3rem 0" onSubmit={createNote}>
<Flex direction="row" justifyContent="center">
<TextField
name="name"
placeholder="Note Name"
label="Note Name"
labelHidden
variation="quiet"
required
/>
<TextField
name="description"
placeholder="Note Description"
label="Note Description"
labelHidden
variation="quiet"
required
/>
<Button type="submit" variation="primary">
Create Note
</Button>
</Flex>
</View>
<Heading level={2}>Current Notes</Heading>
<View margin="3rem 0">
{notes.map((note) => (
<Flex
key={note.id || note.name}
direction="row"
justifyContent="center"
alignItems="center"
>
<Text as="strong" fontWeight={700}>
{note.name}
</Text>
<Text as="span">{note.description}</Text>
<Button variation="link" onClick={() => deleteNote(note)}>
Delete note
</Button>
</Flex>
))}
</View>
<Button onClick={signOut}>Sign Out</Button>
</View>
);
};
export default withAuthenticator(App);
Very Helpful😄
explaination very good
very nice video src/graphql forlder not create
Any chances of showing how to use Vite + React with Amplify? There's a lot of of experts recommending not to use Create React App anymore because it's legacy and not well-maintained anymore.
great and conise explanation !
is aws amplify free to use for pet projects like these? or they charge based on API usage?
This is still very code heavy. Is Amplify supposed to be low code platform?