In this article, we will create and host a fake server that we can deal with it as a normal Back-End Server and use all the CRUD Operations using HTTP requests.
- Create a folder and name it
fake-server. - Open the terminal and init npm, and make the entry point
server.js
npm init
- install json-server.
npm i json-server
- Add a
startscript.
package.json
{
"name": "fake-server",
"version": "1.0.0",
"description": "fake server with fake database",
"main": "server.js",
"scripts": { // <===
"start": "node server.js" // <===
},
"author": "Youssef Zidan",
"license": "ISC",
"dependencies": {
"json-server": "^0.16.3"
}
}
- create
.gitignorefile and addnode_modules. .gitignore
node_modules- Create
server.jsfile and paste the following
const jsonServer = require("json-server");
const server = jsonServer.create();
const router = jsonServer.router("db.json"); // <== Will be created later
const middlewares = jsonServer.defaults();
const port = process.env.PORT || 3200; // <== You can change the port
server.use(middlewares);
server.use(router);
server.listen(port);- init git and publish your repo to GitHub
git init
git remote add origin https://github.com/<YourName>/<Repo-Name>.git
git add .
git push --set-upstream origin masterDownload the final Repo from HERE
- Create
db.jsonfile - Fill in any data you like, I use Mockaroo to generate dummy data.
db.json
{
"users": [
{
"id": 1,
"first_name": "Justina",
"last_name": "Ginglell",
"email": "[email protected]",
"gender": "Female"
},
{
"id": 2,
"first_name": "Marion",
"last_name": "Jenman",
"email": "[email protected]",
"gender": "Male"
},
{
"id": 3,
"first_name": "Alfy",
"last_name": "Begin",
"email": "[email protected]",
"gender": "Female"
},
{
"id": 4,
"first_name": "Karney",
"last_name": "Zanussii",
"email": "[email protected]",
"gender": "Male"
},
{
"id": 5,
"first_name": "Reid",
"last_name": "Schapero",
"email": "[email protected]",
"gender": "Male"
},
{
"id": 6,
"first_name": "Dorine",
"last_name": "Braybrookes",
"email": "[email protected]",
"gender": "Female"
},
{
"id": 7,
"first_name": "Sarena",
"last_name": "Frape",
"email": "[email protected]",
"gender": "Female"
},
{
"id": 8,
"first_name": "Malva",
"last_name": "Pierse",
"email": "[email protected]",
"gender": "Female"
},
{
"id": 9,
"first_name": "Rania",
"last_name": "Dablin",
"email": "[email protected]",
"gender": "Female"
},
{
"id": 10,
"first_name": "Ingrim",
"last_name": "Offen",
"email": "[email protected]",
"gender": "Male"
}
]
}- Push your work
git add .
git commit -m "creating the database"
git push
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent