Skip to main content

HOW TO BUILD LOGIN PAGE AND SIGN UP PAGE IN REACT JS AND AWS AMPLIFY

 


STEPS TO BUILD LOGIN & SIGNUP PAGE
IN REACTJS,NODEJS USING AWS AMPLIFY IN VS CODE




SOFTWARE REQUIREMENTS

  • NODE JS 
  • AWS ACCOUNT
  • VISUAL STUDIO CODE
PLEASE BE FOLLOW THESE STEPS

1.     INSTALL NODEJS 

2.     CHECK VERSION OF NODEJS IN CMD -node --version

3.     CREATE AWS ACCOUNT(IF NOT HAVE OR TEMPORARY NEEDED,Dm me BUT,ITS COST)

4.     INSTALL VISUAL STUDIO CODE ( install Extension-Live server,AWS Toolkit)

5.     RUN THESE COMMAND IN VS CODE TERMINAL-NPM UPDATE-npm install npm -g

6.     INSTALL -AWSTOOLKIT EXTENSION IN VSCODE

7.     ENABLE SCRIPTING IN VS CODE -Set-ExecutionPolicy -Scope CurrentUser Unrestricted(paste these higlighted cmd in vs code Terminal)

8.     RUN THESE CMD IN TERMINAL-npx create-react-app projectname(Procedure)

9.     RUN IN VSCODE TERMINAL(INSIDE PROJECTNAME DIRECTORY)-amplify configure(AWS ACCOUNT NECESSARY)TO PERFORM THESE CMD

10. RUN IN VSCODE TERMINAL(INSIDE PROJECTNAME DIRECTORY)-amplify init

11. RUN IN VS CODE TERMINAL(INSIDE PROJECTNAME DIRECTORY)-amplify add auth

12. RUN IN VS CODE TERMINAL(INSIDE PROJECTNAME DIRECTORY)-amplify push

13. PASTE THESE PROGRAM IN APP.JS FILE-import React from 'react';

import logo from './logo.svg';

import './App.css';

import { Amplify } from 'aws-amplify';

import awsconfig from './aws-exports';

import "@aws-amplify/ui-react/styles.css";

import {

  withAuthenticator,

  Button,

  Heading,

  Image,

  View,

  Card,

} from "@aws-amplify/ui-react";

Amplify.configure(awsconfig);

 

function App({ signOut }) {

  return (

    <View className="App">

      <Card>

        <Image src={logo} className="App-logo" alt="logo" />

        <Heading level={1}>We now have Auth!</Heading>

      </Card>

      <Button onClick={signOut}>Sign Out</Button>

    </View>

  );

}

 

export default withAuthenticator(App);

14. RUN IN VS CODE TERMINAL(INSIDE PROJECTNAME DIRECTORY)-npm install --save aws-amplify @aws-amplify/ui-react

15. RUN IN VS CODE TERMINAL(INSIDE PROJECTNAME DIRECTORY)-npm start

Video Procedure below



Popular posts from this blog

AWS Amplify

  AWS Amplify is a development platform provided by Amazon Web Services (AWS) that enables developers to build scalable, secure, and high-performance cloud-powered mobile and web applications. It provides a comprehensive set of tools and services that help developers to build and deploy applications quickly and efficiently, with features such as authentication, analytics, storage, APIs, and more.   AWS Amplify consists of three main components:   1.      Amplify CLI: Amplify CLI is a command-line interface tool that allows developers to easily create, configure, and deploy cloud-powered applications and backend services. It provides a simple and intuitive way to create AWS resources such as AWS Lambda, Amazon API Gateway, AWS AppSync, Amazon Cognito, Amazon DynamoDB, and others. Developers can also use the Amplify CLI to manage their AWS resources, including creating and configuring authentication and authorization, storage, and APIs.  ...

Don-FULL MOVIE_WATCH NOW IN NETFLIX

   You have been officially invited to a Private Party with the gang because DON IS NOW STREAMING! 🥳🕺🎉 # DonOnNetflix   Seeking a sense of purpose, a wayward college student navigates life on campus while enduring a controlling father and a disciplinarian professor. Starring: Sivakarthikeyan,S. J. Suryah,Samuthirakani

தமிழ்நாடு முழுவதும் கல்லூரி திறப்பு – வழிகாட்டு நெறிமுறைகள் வெளியீடு

வழிகாட்டு நெறிமுறைகள் வெளியீடு ஒவ்வொரு ஆண்டிற்கும் ஒரு நாள் விட்டு ஒரு நாள் வகுப்புகள் நேரடியாக நடைபெறும் இளங்கலை 2ஆம் ஆண்டு, முதுகலை இறுதியாண்டு மாணவர்களுக்கு திங்கள், புதன், வெள்ளி கிழமைகளில் வகுப்பு இளங்கலை இறுதியாண்டு மாணவர்களுக்கு செவ்வாய், வியாழன், சனி கிழமைகளில் வகுப்பு நடைபெறும் பொறியியல் படிப்புகளுக்கும், ஒவ்வொரு ஆண்டு மாணவர்களுக்கும் ஒரு நாள் விட்டு ஒரு நாள் வகுப்புகள் நடத்தப்படும் உயர்கல்வி நிலையங்களில் உள்ள விடுதிகளை திறக்க அனுமதி உரிய வழிகாட்டு நெறிமுறைகளை பின்பற்றி விடுதிகள் செயல்படும் என அறிவிப்பு முதலாம் ஆண்டு மாணவர்களுக்கு வகுப்புகள் தொடங்கும் தேதி பின்னர் அறிவிக்கப்படும்.