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.
Top comments (2)
Can you make It with angular, using ngrx?
First I will make it with Vue and then with angular. I will notify you