DEV Community 👩‍💻👨‍💻

Jesus Gilbert
Jesus Gilbert

Posted on • Updated on

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

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: Alt Text
  • 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.

Top comments (2)

Collapse
 
plurbi profile image
Patricio Luciano Urbieta • Edited on

Can you make It with angular, using ngrx?

Collapse
 
jgilbertcastro profile image
Jesus Gilbert

First I will make it with Vue and then with angular. I will notify you

Tired of sifting through your feed?

Find the content you want to see.

Change your feed algorithm by adjusting your experience level and give weights to the tags you follow.