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.
1.Creating the Fake Server.
You can download the final result HERE, Or follow along with me.
- 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
start
script inpackage.json
.
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
.gitignore
file and addnode_modules
. .gitignore
node_modules
- Create
server.js
file 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 master
Download the final Repo from HERE
2. Creating the DataBase
- Create
db.json
file - Fill in any data you like, I use Mockaroo which is a great and easy way to generate dummy data.
db.json
{
"users": [
{
"id": 1,
"first_name": "Justina",
"last_name": "Ginglell",
"email": "jginglell0@networkadvertising.org",
"gender": "Female"
},
{
"id": 2,
"first_name": "Marion",
"last_name": "Jenman",
"email": "mjenman1@surveymonkey.com",
"gender": "Male"
},
{
"id": 3,
"first_name": "Alfy",
"last_name": "Begin",
"email": "abegin2@list-manage.com",
"gender": "Female"
},
{
"id": 4,
"first_name": "Karney",
"last_name": "Zanussii",
"email": "kzanussii3@hao123.com",
"gender": "Male"
},
{
"id": 5,
"first_name": "Reid",
"last_name": "Schapero",
"email": "rschapero4@timesonline.co.uk",
"gender": "Male"
},
{
"id": 6,
"first_name": "Dorine",
"last_name": "Braybrookes",
"email": "dbraybrookes5@gov.uk",
"gender": "Female"
},
{
"id": 7,
"first_name": "Sarena",
"last_name": "Frape",
"email": "sfrape6@alexa.com",
"gender": "Female"
},
{
"id": 8,
"first_name": "Malva",
"last_name": "Pierse",
"email": "mpierse7@usda.gov",
"gender": "Female"
},
{
"id": 9,
"first_name": "Rania",
"last_name": "Dablin",
"email": "rdablin8@state.gov",
"gender": "Female"
},
{
"id": 10,
"first_name": "Ingrim",
"last_name": "Offen",
"email": "ioffen9@slideshare.net",
"gender": "Male"
}
]
}
- Push your work to GitHub
git add .
git commit -m "creating the database"
git push
3. Creating the server
- Create account on Heroku
- Install the Heroku CLI on your computer
- Open the terminal and log in then follow the instructions
heroku login
- Create a project
heroku create fake-server-app
- Push your app to Heroku
git push heroku master
- Open your created app
heroku open
You will see something like this:
Now, You can access and modify resources via any HTTP method
GET
POST
PUT
PATCH
DELETE
OPTIONS
4. Creating a Pipeline.
A pipeline is simply a connection between your GitHub repo and your Heroku Project.
So, Whenever you update your db.json
for example and push your changes to a specific branch Heroku will be listening to this branch and build your app with the updated database.
Navigate to
Deploy
tap and create a pipeline, Connect your GitHub with the fake-server repo
- Configure auto-deploy and choose the branch of the Pipeline
Now whenever you push the changes to the selected branch, the database will be updated and can be accessed via the same base API.
Discussion (11)
thanks ,I'd like to tell you about this another way
it's more easy with json-server give it a try
my-json-server.typicode.com/
that's so cool!
i was strugling with logs and error . but you made it very simple
Great one, Thanks mate!
You'r welcome, mate.
AWESOME
Great article ! Take a look at miragejs.com/, it could help you to save time :)
Cool!
I'll take a look.
very usefull
Thanks a lot!!! Super useful
Just a question, can JSON-SERVER be used for small web app in production?
I don't think it's a good idea to do that coz it's fake server after all