How to create a fake backend server

To create and host a fake server, follow these steps:

  1. Create the server
  2. Create the database
  3. Host server on Heroku
  4. Create a pipeline

Using the process above, you can create and host a fake server that acts as a normal backend server and uses all the CRUDCreate, Read, Update, Delete operations through HTTPHyperText Transfer Protocol requests.

1. Create the fake server

  • Create a folder and name it fake-server.
  • Open the terminal and run the init npm command to make the entry point server.js, as shown below:
npm init
npm i json-server
  • Add a start script in the package.json file, as shown below:
{
"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 a .gitignore file and add the keyword node_modules on the first line, as shown below:
node_modules
  • Create the server.js file and add the following information to it:
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);

At this point, your server has been created. Now you can publish your repo to GitHub, as shown below:

git init
git remote add origin https://github.com/<YourName>/<Repo-Name>.git
git add .
git push --set-upstream origin master

2. Create the database

  • Create a db.json file.
  • Fill the database with 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, as shown below:
git add .
git commit -m "creating the database"
git push

3. Host the server

  • Create account on Heroku.
  • Install the Heroku CLI on your computer.
  • Open the terminal, log in, and then input these commands:
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:

Heroku App

Now you can access and modify resources via any HTTP method, e.g., GET, POST, PUT, PATCH, DELETE, OPTIONS, etc.

4. Create a pipeline

A pipeline is simply a connection between your GitHub repo and your Heroku Project.

If, for example, you update your db.json file and push your changes to a specific branch, Heroku listens to this branch and builds your app with the updated database.

  • Open your dashboard on Heroku and choose your app. Alt Text

  • Navigate to the Deploy tab and create a pipeline. Then 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.

You can view the final directory structure and contents on the following link.

Free Resources

Attributions:
  1. undefined by undefined
  2. undefined by undefined