DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Build,Host and Authenticate your fullstack react app with AWS Amplify in minutes 1.
Gbemisola Esho for AWS Community Builders

Posted on • Updated on

Build,Host and Authenticate your fullstack react app with AWS Amplify in minutes 1.

Building a fullstack react app now really easy, AWS amplify has enabled the building ,hosting and deploying your app.
It is a development resource that makes building fast on AWS
It creates a workflow from Git-hub using a continuous integration and deployment pipeline.
The resource builds,hosts basic and static websites with serverless backends.

The first step is to create the app by running the following commands in the command prompton in the terminal:

npx create-react-app amplifyapp
cd amplifyapp
npm start
For the commands to work, you must have nodejs on your machine then you run the scripts on your command prompt

Image description

Initialize github and create a new repo for the app and push application to new git repo by running this commands.
git remote add origin git@github.com:username/reponame.git
git branch -M main
git push -u origin main

Image description

Log into the management console search for Amplify

Image description

Under Amplify hosting, go to get started

Click Github repository then continue

Image description

Authenticate with Github and choose the newly created repo plus main branch and click next
Image description
Then you go right ahead to configure build setting, review

Image description
Amplify goes ahead to build source code
Image description

Image description

Your app is ready

Image description
You can then automatically deploy code changes from src/app.js in a text editor like Visual studio

Image description

Push to github and run the following command in the terminal

git add .
git commit -m β€œchanges for v2”
git push origin main

When the build completes view your app in the Amplify console
https://main.doukipuj2x592.amplifyapp.com/

First step is get an AWS free-tier account here

Top comments (0)

DEV

Thank you.

Β 
Thanks for visiting DEV, we’ve worked really hard to cultivate this great community and would love to have you join us. If you’d like to create an account, you can sign up here.