My Notes: Front-End Developer

Followed the tutorial to build a simple web application using AWS Amplify. Build a Full-Stack React Application. Hosting, Authentication, Database and Storage.

• My Notes: Front-End Developer
  • Deploy and Host a React App
    • Create a new React application
    • Initialize GitHub repository
    • Deploy the app with AWS Amplify
  • Initialize a Local App
    • Install the Amplify CLI
    • Configure the Amplify CLI
    • Initialze the Amplify app locally
  • Add Authentication
    • Install the Amplify libraries
    • Create the authentication service
    • Deploy the authentication service
    • Configure the React project with Amplify resources
    • Add the authentication flow in App.js
    • Set up CI/CD of the front end and backend
    • Deploy the changes to the live environment
  • Add a GraphQL API and Database
    • Create a GraphQL API and database
    • Deploy the API
    • Write front-end code to interact with the API
  • Add the Ability to Store Images
    • Create the storage service
    • Update the GraphQL schema
    • Deploy storage service and API updates
    • Update the React app
  • Deleing the resources
    • Removing individual services
    • Deleing the entire project

Deploy and Host a React App

Create a React app and deploy and host through AWS Amplify.

• Create a React application
• Initialze a GitHub repository
• Deploy the app with AWS Amplify
• Implement code changes and redeploy the app

Create a new React application

npx create react-app amplifyapp
cd amplifyapp
npm start

Initialize GitHub repository

• Create a new GitHub repo

• Initialze git and push the app

  git init
  git remote add origin git@github.com:username/reponame.git
  git add .
  git commit -m "Initial commit"
  git push origin main

Deploy the app with AWS Amplify

• In the AWS Amplify service console, select "Get Started" under Delivery (Host web app).
• Select GitHub as the repo service.
• Authenticate with GitHub and Choose the main brance that created earlier.
• Accept the default build settings.
• Review the final details and select Save and Deploy.
• AWS Amplify will now build the source code and deploy at a URL. Once the build completes, to see the web app up and running.

Initialize a Local App

• Install and configure the Amplify CLI
• Initiailze the Amplify app

Install the Amplify CLI

npm install -g @aws-amplify/cli

Configure the Amplify CLI

amplify configure

• This will open up the AWS console. Once logged into the console, we can jump back to the command line.
• Specify the AWS region.
• Specify the username of the new IAM user.
  • This will open up the IAM dashboard.
  • Set permissions: Attach existing policies directly: check AdministratorAccess.
  • Keep the Access key ID and Secret access key, then back to command line and paste them.
• Left the "Profile Name" to default.

Initialze the Amplify app locally

• In the Amplify console, click on Backend environments.
• Copy the amplify init command: amplify pull --appId <appId> --envName staging
• Initialze the Amplify project locally with the command.

Add Authentication

• Install Amplify libraries
• Create and deploy an authentication service
• Configure the React app to include authentication

Install the Amplify libraries

npm install aws-amplify @aws-amplify/ui-react

Create the authentication service

amplify add auth

? Default configuration
? Username
? No, I an done.

Deploy the authentication service

amplify push --y

Configure the React project with Amplify resources

Add code in src/index.js. (import and config)

Add the authentication flow in App.js

Add code in src/App.js. (AmplifySignOut elemnt)

Set up CI/CD of the front end and backend

• AWS Amplify console > App settings > Build settings. Modify it to add backend section.
• Update the front end branch to point to the backend environment. Under the branch name, choose Edit, and then select the staging backend.

Deploy the changes to the live environment

Commit and push to origin main. In case the build fails.

Error: JSONValidationError: File project: data should NOT have additional properties: 'graphqltransformer'.

Open the Build settings of the app in Amplify console. Build settings > Build image settings > Edit > Package. Specify the version of Amplify CLI installed (e.g. 4.41.1).

Error: do not have a role.

Open the IAM > Access management > Roles > Create role > Choose a use case > select Amplify. Go back to AWS Amplify console. Select the app > App settings > General > app details > Edit > Set the Service role.

Add a GraphQL API and Database

• Create and deploy a GraphQL API
• Write front-end code to interact with the API

Create a GraphQL API and database

amplify add api

? GraphQL
? notesapp
? API Key
? demo
? 7
? No, I am done.
? No
? Yes
? Single object with fields
? Yes

Open the GraphQL schema in text editor: amplify/backend/api/myapi/schema.graphql. Update the file.

Deploy the API

amplify push --y

To view the GraphQL API.

amplify console api

> Choose GraphQL

Write front-end code to interact with the API

Add code in src/App.js.

• fetchNotes
• createNote
• deleteNote

Add the Ability to Store Images

• Create a storage service
• Update a GraphQL schema
• Update your React app

Create the storage service

amplify add storage

? Content
? imagestorage
? <your-unique-bucket-name>
? Auth users only
? create, read, update, delete
? N

Update the GraphQL schema

Update amplify/backend/api/notesapp/schema.graphql.

Deploy storage service and API updates

amplify push --y

Update the React app

Add code to use storage.

Deleing the resources

Removing individual services

amplify remove auth

? <your-service-name>

Then push.

amplify push

Deleing the entire project

To delete the project and the associated resources.

amplify delete