Youssef Zidan

Posted on Dec 25, 2020 • Updated on Jan 31, 2022

Deploying Fake Back-End Server & DataBase Using JSON-SERVER, GitHub, and Heroku.

#fakeserver #json #heroku #database

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 in package.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 add node_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.

Open your dashboard on Heroku and choose your app.
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.

Top comments (23)

alokz diptim! • Jul 3 '22

Thanks! Your "dependencies": {
"json-server": "^0.16.3"
} helped me.

Good one on the pipeline build

Kaveh Karami • Oct 28 '21

very usefull

Clarence Onumajulu • Sep 16 '22

This was so helpful!
I really needed to implement json-server for a project

Zachary Lipscomb • Aug 15 '22

Thank you for writing this article - I appreciate your time and effort.

I'm running into a problem - after deploying on heroku , when I run the heroku app, it displays a blank object. I confirmed my database file on heroku is indeed populated. I can't seem to figure out what the issues might be. Any ideas? Heres my github repo for the fork github.com/cryptozachary/nufakeserver

Youssef Zidan • Aug 16 '22

my-json-server.typicode.com/typico...

Looks like it's working fine on that link

Zachary Lipscomb • Aug 16 '22

I believe that link is for a different user post , not mine. My app link is

nufakerserver.herokuapp.com/

Zachary Lipscomb • Aug 18 '22

Any ideas? As Im still struggling with solving this problem.

Thanks,

Zachary

Youssef Zidan • Aug 21 '22

I don't know really.

jasonohdz1501 • Jul 27 '22

Great! Thanks very much. I was running into issues trying to deploy my fake server with json-server and I supposed that with my-json-server.typicode.com/ I could perform crud operations, but it's just like a server for read and ephemeral

Stephen Odogwu • Feb 17 • Edited

in step 1 can I just watch db.json if I have previously installed json-server globally?.
I mean can I skip this part👇
const router=jsonServer.router('db.json')
..Also can I deploy on netlify or GitHub pages

Zachary Lipscomb • Aug 21 '22 • Edited

Hello , for anyone reading this article please read below - I need help solving this problem.

After deploying fake json server on heroku , when I run the heroku app, it displays a blank object. I confirmed my database file on heroku is indeed populated. I can't seem to figure out what the issues might be. Any ideas? Heres my github repo for the fork github.com/cryptozachary/nufakeserver

App displaying blank object is located at nufakerserver.herokuapp.com/

Any help would be much appreciated! I'm trying to deploy for a bootcamp project.