DEV Community

Cover image for Deploying Fake Back-End Server & DataBase Using JSON-SERVER, GitHub, and Heroku.
Youssef Zidan
Youssef Zidan

Posted on • Updated on

 

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

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 
Enter fullscreen mode Exit fullscreen mode
npm i json-server
Enter fullscreen mode Exit fullscreen mode
  • 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"
  }
}

Enter fullscreen mode Exit fullscreen mode
  • create .gitignore file and add node_modules. .gitignore
node_modules
Enter fullscreen mode Exit fullscreen mode
  • 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);
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

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"
    }
  ]
}

Enter fullscreen mode Exit fullscreen mode
  • Push your work to GitHub
git add .
git commit -m "creating the database"
git push
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • Create a project
heroku create fake-server-app
Enter fullscreen mode Exit fullscreen mode
  • Push your app to Heroku
git push heroku master
Enter fullscreen mode Exit fullscreen mode
  • Open your created app
heroku open
Enter fullscreen mode Exit fullscreen mode

You will see something like this:

Heroku App

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

  • Navigate to Deploy tap and create a pipeline, Connect your GitHub with the fake-server repo

Alt Text

  • Configure auto-deploy and choose the branch of the Pipeline

Alt Text

Now whenever you push the changes to the selected branch, the database will be updated and can be accessed via the same base API.


LinkedIn

Top comments (23)

Collapse
 
aloksdiptim profile image
alokz diptim!

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

Good one on the pipeline build

Collapse
 
kavehkarami profile image
Kaveh Karami

very usefull

Collapse
 
clarencejulu profile image
Clarence Onumajulu

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

Collapse
 
cryptozachary profile image
Zachary Lipscomb

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

Collapse
 
youssefzidan profile image
Youssef Zidan

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

Looks like it's working fine on that link

Collapse
 
cryptozachary profile image
Zachary Lipscomb

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

nufakerserver.herokuapp.com/

Thread Thread
 
cryptozachary profile image
Zachary Lipscomb

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

Thanks,

Zachary

Thread Thread
 
youssefzidan profile image
Youssef Zidan

I don't know really.

Collapse
 
jasondev profile image
jasonohdz1501

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

Collapse
 
stevepurpose profile image
Stephen Odogwu • 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

Collapse
 
cryptozachary profile image
Zachary Lipscomb • 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.

Collapse
 
olzhas11dev profile image
Olzhas

Thanks a lot!!! Super useful
Just a question, can JSON-SERVER be used for small web app in production?

Collapse
 
youssefzidan profile image
Youssef Zidan

I don't think it's a good idea to do that coz it's fake server after all

Collapse
 
sals1995 profile image
Salsabeel Hussien • Edited

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/

Collapse
 
youssefzidan profile image
Youssef Zidan

that's so cool!

Collapse
 
ahmedelhegery profile image
Ahmed Alaa

Great one, Thanks mate!

Collapse
 
youssefzidan profile image
Youssef Zidan

You'r welcome, mate.

Collapse
 
ibrahimkamal profile image
Ibrahim Kamal

AWESOME

Collapse
 
monisnapjonathan profile image
Jonathan BROSSARD

Great article ! Take a look at miragejs.com/, it could help you to save time :)

Collapse
 
youssefzidan profile image
Youssef Zidan

Cool!
I'll take a look.

Collapse
 
eng1mahmoud profile image
Mahmoud Mohamed

why images not work in json-server
i want to help me to solve this proplem

Collapse
 
abdulrub profile image
Abdul Rub

Love you brother ,saved my @ss in the last moment