Eleo Nona

Eleo Nona

1602742789

Offline-first made easy with GraphQL, Amplify DataStore and Vue

In this article, you will create Chatty, a chatroom Progressive Web App (PWA) that stores data on the device while offline, and synchronises in real-time with other devices when online using Amplify DataStore, GraphQL and Amazon DynamoDB. We will cover:

  • Introduction to Offline-firstPWAs and Amplify DataStore
  • Setting up a new project with the Vue CLI
  • Creating a new GraphQL API
  • Amplify DataStore: setup, data models and usage
  • Creating the UI with Vue: the chatroom, sending and deleting messages; and doing real-time with subscriptions
  • Making Chatty a PWA
  • Adding a PWA custom configuration
  • Improving UX while offline
  • Publishing your app via the AWS Amplify Console
  • Installing Chatty in the Desktop and Mobile
  • Cleaning up cloud services

In order to follow this post you will need a basic knowledge of GraphQL. You can learn the basics following this tutorial at graphql.org. We will be referring to GraphQL schema, directives, types, queries, mutations, subscriptions and resolvers.

Please let me know if you have any questions or want to learn more at  @gerardsans.

Final solution and step by step tutorial in  GitHub.

#graphql #pwa #aws-amplify #javascript #vuejs

What is GEEK

Buddha Community

Offline-first made easy with GraphQL, Amplify DataStore and Vue
Eleo Nona

Eleo Nona

1602742789

Offline-first made easy with GraphQL, Amplify DataStore and Vue

In this article, you will create Chatty, a chatroom Progressive Web App (PWA) that stores data on the device while offline, and synchronises in real-time with other devices when online using Amplify DataStore, GraphQL and Amazon DynamoDB. We will cover:

  • Introduction to Offline-firstPWAs and Amplify DataStore
  • Setting up a new project with the Vue CLI
  • Creating a new GraphQL API
  • Amplify DataStore: setup, data models and usage
  • Creating the UI with Vue: the chatroom, sending and deleting messages; and doing real-time with subscriptions
  • Making Chatty a PWA
  • Adding a PWA custom configuration
  • Improving UX while offline
  • Publishing your app via the AWS Amplify Console
  • Installing Chatty in the Desktop and Mobile
  • Cleaning up cloud services

In order to follow this post you will need a basic knowledge of GraphQL. You can learn the basics following this tutorial at graphql.org. We will be referring to GraphQL schema, directives, types, queries, mutations, subscriptions and resolvers.

Please let me know if you have any questions or want to learn more at  @gerardsans.

Final solution and step by step tutorial in  GitHub.

#graphql #pwa #aws-amplify #javascript #vuejs

Luna  Mosciski

Luna Mosciski

1600583123

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework.

Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

This framework was created by Evan You and still it is maintained by his private team members. Vue is of course an open-source framework which is based on MVVM concept (Model-view view-Model) and used extensively in building sublime user-interfaces and also considered a prime choice for developing single-page heavy applications.

Released in February 2014, Vue JS has gained 64,828 stars on Github, making it very popular in recent times.

Evan used Angular JS on many operations while working for Google and integrated many features in Vue to cover the flaws of Angular.

“I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight." - Evan You

#vuejs #vue #vue-with-laravel #vue-top-story #vue-3 #build-vue-frontend #vue-in-laravel #vue.js

Vue.js 3 Full Stack Application with Amplify, GraphQL, Auth and More!

In this video I create a full stack app for Teamseas including AWS amplify, Appsync, Lambda, Cognito for Authentication and Authorization and more.

0:00 Introduction
0:53 Setup of Vite, Vue 3, Tailwind CSS
05:29 Setup AWS Amplify CLI+ YouTube API
07:16 Amplify Init / Amplify configure
08:38 Install of Packages
09:59 Amplify Add Authentication With Config
10:31 Amplify Add AppSync GraphQL End Point
11:38 Setup @Auth Rules for Schema
15:35 Create AWS Lambda 
19:03 Setting up TypeScript for Lambda
25:30 Testing Lambda With Mock and Console
28:07 Setting Up Authentication with @aws-amplify/ui-vue@next
35:34 Setting up Lambda Auth API to Cognito
39:54 Setup Lambda with AppSync GraphQL 
46:20 Setting Lambda with YouTube API
51:29 Setting Lambda main index file
55:28 Testing out API and Lambda with Amplify Mocks
1:01:49 Testing in AWS Console
01:04:57 Setting up Frontend to connect to AppSync

Links
https://github.com/ErikCH/TeamSeas-Amplify-Tutorial 
https://ui.docs.amplify.aws/ui/getting-started/installation?platform=vue 

#vue #vuejs #amplify #graphql

Ilaria  Dugg

Ilaria Dugg

1598667781

Handling Vue Authentication using GraphQL API

In this tutorial, we will be using Vuex and ApolloClient connected to a GraphQL API to handle authentication in our Vuejs app.

Authentication and Authorization

Authentication and Authorization are most often used interchangeably, but they’re different concepts entirely. Authentication identifies or verifies who a user is while Authorization is validating the routes (or parts of the app) the authenticated user can have access to. In this tutorial, we would just be dealing with local authentication. The most popular way for handling authentication in most modern apps is by using username and password. The flow for implementing this is:

  • User signs up using password and email
  • The user credentials are stored in a database
  • When registration is successful, the user is redirected to the login
  • On successful authentication, the user is granted access to specific resources
  • The user state is stored in any one of the browser storage mediums (localStorage, cookies, session) or JWT.

Prerequisites

You need to have some of the following to work through this tutorial:

  • Node 6 or higher
  • Yarn (recommended) or NPM
  • Vue CLI
  • GraphQL Playground app.
yarn global add @vue/cli

BashCopy

  • Knowledge of GraphQL and VueJS and State Management with Vuex
  • …and a very inquisitive mind.

#graphql #vue #graphql api #vue authentication #api

Landen  Brown

Landen Brown

1625900760

Building Real-time Offline-first Apps with React, GraphQL, & Amplify DataStore

In this video, we walk through how to create a new Amplify DataStore project, deploy it to AWS, and interact with it from a React app. We’ll demo queries, mutations, and subscriptions as well as how to test out the offline functionality.

The code for this app is located here: https://gist.github.com/dabit3/f4467e759325ea4b3d007b7117436031

#datastore #graphql #react