DEV Community: Jesus Gilbert

Build a simple blog with GraphQL, Node.js, SQLite and (VUE, Angular Or ReactJS) - Part 2

Jesus Gilbert — Fri, 15 Nov 2019 16:17:09 +0000

What we gonna do?

In this tutorial, we will show you how to create a simple client with VUE, to connect to graphql api we created in this previous tutorial

Prerequisites

Knowledge of JavaScript and Vue.
You must have seen the previous tutorial: this previous tutorial

Time to play the game! Hahaha

Set up the project on previous directory created, run this on your favorite terminal:
- cd micro-blog
- mkdir micro-blog-clients
- cd micro-blog-clients
- vue create vue-micro-blog-client
- cd vue-micro-blog-client
Install the following dependencies:
- npm install --save vue-apollo graphql apollo-boost moment

Configurate Apollo Client

Apollo Client is a complete state management library for JavaScript apps. Simply write a GraphQL query, and Apollo Client will take care of requesting and caching your data, as well as updating your UI. Read More

Config Apollo Client
- Open src/main.js and paste this code:

Here we define const apolloClient to set graphql api url and add vueApollo plugin to global method

Consuming micro-blog API
- Edit Home.vue in src/views and paste this code:

In this file we write a code to get post like a select query but with gql query

Add new File AddPost.vue in src/views and paste this:

Then we create a method to call by save button to add new post and another to format the create date. As you can notice here we define the mutate to call mutation to create a post and finally the method to clean the model

Edit src/router/index.js with this:
edit src/App.vue and edit router line with this:

Testing!

see video

Build a simple blog with GraphQL, Node.js, SQLite and (VUE, Angular Or ReactJS)

Jesus Gilbert — Thu, 07 Nov 2019 17:27:08 +0000

What gonna we do?

In this tutorial, we will show you how to create a simple and powerful Blog with (VUE, Angular and React), GraphQL, Node.js and SQLite.

We will divide this tutorial as follows:

Part 1: Build a web api with GraphQL, Node.js and SQLite.
Part 2: Build a Client in VUE.
Part 3: Build a Client in Angular.
Part 4: Build a Client in ReactJS.

Prerequisites

Node.js and JavaScript knowledge
NPM Command
knowledge of VUE,Angular or ReactJS

What is GraphQL?

According to https://graphql.org/learn: GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data. GraphQL isn't tied to any specific database or storage engine and is instead backed by your existing code and data

Well let's start the game

Set up the project, run this on your favorite terminal:
- mkdir micro-blog
- mkdir micro-blog-api
- cd micro-blog-api
- npm init -y
Install the following dependencies:
- npm install graphql express --save
- npm install express-graphql --save
- npm install sqlite3 --save
Create an index.js in the root to configurate GraphQL.
Paste this code on index.js:
Create a graphql folder and then create a post folder inside -Create a post.js inside of post folder.
Paste this code on post.js
Update the package.json file to add de following script to start the api server
- "start": "node index.js"
Then on console or terminal run de server:
- npm run start
Then if all is correct open your browser and go to localhost:4000/graphql and you gonna see your graphql server run:
If you want select all post run this
If you want to create
If you want to update
If you want to delete

This is all, if you want to clone this project go to github: https://github.com/jgilbertcastro/micro-blog

In the part 2 i'm gonna show you how to build a client for consume this API.

Deploying an exiting VUE App on Netlify

Jesus Gilbert — Fri, 01 Nov 2019 01:56:53 +0000

In this tutorial I will show you how to make a deployment of your VUE app in Netifly so you can test or share it.

Step 1: Create a VUE app

You must have knowledge of how to use NPM or YARN since we will use the build and DIST folder to configure Netifly. I will assume that you already have an app created.

Step 2: Push your app to GitHub, GitLab Or Bitbucket

For this example I will use GitHub

Create an account or authenticate with GitHub on Netlify.
Click on “New site from Git on Netifly”.

Select GitHub or your favorite.

Then you will have to choose the repository (s) so that they have
permission to be visible on Netifly.

Next you will have to choose the branch you want to publish and define
the command to build and the publication folder as specified in the
first step and click on “Deploy Site”.

Also, you will see the first step is running “Deploying site”, if you
want to see the terminal click on it.

When this finish the next step is “set up a custom domain” if you want!.
Finally, you can see at the top the self-generated name of your app and
the site for testing.

Ready your app is flying on Netifly