Deploying a Web Application using AWS Amplify

DIFFICULTY : EASY TIME : 30-45 mins COST : 0$

WHAT YOU’LL NEED :

An AWS account - Create one here!
Node.js and npm
A github account

AWS SERVICES :

AWS Amplify

Overview

In this project, we're going to create a brand new React application and push it to a GitHub repository. After that, we'll connect the repository to AWS Amplify web hosting and deploy it to a globally available content delivery network (CDN) hosted on an amplifyapp.com domain. This is going to be amazing!.

what you will accomplish

Create a new web application
set up amplify on your project

Let’s Get Started…

Step 1 : Create a new React application

Open a new terminal or command line window and run the following command to use Vite to create a React application.

npm create vite@latest demoapp -- --template react
cd demoapp
npm install
npm run dev

You'll get a local link for the web page you just created.
Copy the local link, paste it into your web browser, and you will see that your application is running successfully.

Step 2 : Initalizing a Github repository

In this step, we’ll create a Github repository and commit your code to the repository.

If you don’t have a github account- create here!!!
Sign in into your GitHub account.
Create a new repository:
- repository name : demoapp
- Choose the public radio button.
Select, Create a new repository.
Open a new terminal window, navigate to your projects root folder (demoapp).
Run the following commands to initalize a git and push of the application to the new Github repository.
replace the SSH Github URL into command with your Github URL.

git init
git add .
git commit -m "first commit"
git remote add origin git@github.com:<your-username>/demoapp.git
git branch -M main
git push -u origin main

Let’s understand the commands one by one:

git init : Creates a new repository in your project directory, allowing you to track changes , commit code, and push it to a remote repository like github.

git add . : command stages all the files in your project for the next commit, essentially marking them as ready to be included in version control.

git commit -m “first commit“ : creates a commit with the staged changes and adds a message to describe the changes. ‘-m‘ flag is used to provide a message that describes what changes were made in this commit.

git remote add origin : adds a remote repository and names it origin. the origin is the defauld alias for remote repository where you will push your code.

git branch -M main : renames the current branch to main.

git push -u origin main :pushes your local code to the github and sets up tracking for future pushes.

Step 3 : Install the Amplify packages

Open a new terminal window.
Navigate to your app root folder:
- run this command : cd demoapp
  
  you will be directed to the folder of your project.
now run this command:
```
  npm create amplify@latest -y
```

In your terminal window in the same project directory, run the followin command to push the changes to Github:
```
  git add .
  git commit -m 'installing amplify'
  git push origin main
```
the result of the following commands:
- git add .
- git commit -m ‘installing amplify’
- git push origin main : push the local commits from the main branch to the main branch on the origin remote repository.

Step 4 : Deploy your web app with AWS Amplify

In this step, we’ll connect the GitHub repository you just created to AWS amplify. This will enable you to buld and deploy your app on AWS.

Log in into your AWS Management console.
search for AWS amplify.
Choose create new app.
On Start building with Amplify page, for Deploy your app, select Github.
Select Next.
When promted, authenticate with Github.
Choose the repository and main branch you created.
Select Next.
Leave the default build settings.
Select Next.
Review the inputs selected.
Choose Save and Deploy.
Now AWS Amplify will build your source code and deploy your app and on every git push your deployment instance will update.
Once the build completes, select visit deployed URL button to see your web app and running live.
congrats!!! you have successfully deployed your web app using the AWS Amplify.