Build and Deploy a Real-Time React App Using AWS Amplify and GraphQL

Key topics and takeaways:

  • Authentication
  • GraphQL API with AWS AppSync
  • Hosting
  • Working with multiple environments
  • Removing services

What will we be building?

Will this tutorial teach React or GraphQL concepts as well?

What do I need to take this tutorial?

Getting started — Creating the application

Installing the AWS Amplify CLI and adding it to the project

  • Enter a name for the project: amplify-app <Name of your app>
  • Enter a name for the environment: dev <Name of your environment>
  • Choose your default editor: Visual Studio Code <Your default editor>
  • Choose the type of app that you’re building: javascript
  • What JavaScript framework are you using: react
  • Source Directory Path: src
  • Distribution Directory Path: build
  • Build Command: npm run build (for macOS/Linux), npm.cmd run-script build (for Windows)
  • Start Command: npm start (for macOS/Linux), npm.cmd run-script start (for Windows)
  • Do you want to use an AWS profile: Yes
  • Please choose the profile you want to use: default
  • Do you want to use default authentication and security configuration: Default configuration
  • How do you want users to be able to sign in when using your Cognito User Pool: Username
  • What attributes are required for signing up: Email

Adding and Integrating the GraphQL API

  • Please select from one of the below mentioned services: GraphQL
  • Provide API name: RestaurantAPI
  • Choose an authorization type for the API: API key
  • Do you have an annotated GraphQL schema: No
  • Do you want a guided schema creation: Yes
  • What best describes your project: Single object with fields (e.g., “Todo” with ID, name, description)
  • Do you want to edit the schema now: Yes
  • Are you sure you want to continue: Yes
  • Do you want to generate code for your newly created GraphQL API: Yes
  • Choose the code generation language target: typescript
  • Enter the file name pattern of graphql queries, mutations and subscriptions: src/graphql/**/*.ts
  • Do you want to generate/update all possible GraphQL operations — queries, mutations and subscriptions: Yes
  • Enter maximum statement depth [increase from default if your schema is deeply nested]: 2
  • Enter the file name for the generated code: src/API.ts

Hosting

  • Select the environment setup: DEV (S3 only with HTTP)
  • hosting bucket name: <YOUR_BUCKET_NAME>
  • index doc for the website: index.html
  • error doc for the website: index.html

Working with multiple environments

  • Do you want to use an existing environment: N
  • Enter a name for the environment: apiupdate
  • Do you want to use an AWS profile: Y
  • Do you want to update code for your updated GraphQL API: Y
  • Do you want to generate GraphQL statements: Y

Removing Services

Sample code

Summary

--

--

--

Velotio Technologies is an outsourced software and product development partner for technology startups & enterprises. #Cloud #DevOps #ML #UI #DataEngineering

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to Containerized React App with Docker

docker and react banner

WeFund Announces Incubation Fellowship for Africred

How to make your first APP using React Native

Breaking the Shackles of create-react-app

How to add elements and remove elements in the array, create custom id using Firestore (Angular)?

How to Count Calories and Actaully Lose Weight (my secrets revealed) https://t.co/cjiymk8OTq

Coercion in Javascript

A Few Useful JavaScript Optimization Hacks That You Can Learn at a Glance

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Velotio Technologies

Velotio Technologies

Velotio Technologies is an outsourced software and product development partner for technology startups & enterprises. #Cloud #DevOps #ML #UI #DataEngineering

More from Medium

MySQL Shutdown Unexpectedly Error

Top Benefits of Using Node.js

8 Github Repositories for every Frontend Developer.

Top 10 packages used in Flutter app development