STEPS TO BUILD LOGIN & SIGNUP PAGE
IN REACTJS,NODEJS USING AWS AMPLIFY IN VS CODE
SOFTWARE REQUIREMENTS
- NODE JS
- AWS ACCOUNT
- VISUAL STUDIO CODE
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