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
startscript 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
.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 master
Download the final Repo from HERE
2. Creating the DataBase
- Create
db.jsonfile - 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
Deploytap 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.
Oldest comments (21)
Great article ! Take a look at miragejs.com/, it could help you to save time :)
Cool!
I'll take a look.
Great one, Thanks mate!
You'r welcome, mate.
AWESOME
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
very usefull
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!
Thanks! Your "dependencies": {
"json-server": "^0.16.3"
} helped me.
Good one on the pipeline build
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
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
my-json-server.typicode.com/typico...
Looks like it's working fine on that link
I believe that link is for a different user post , not mine. My app link is
nufakerserver.herokuapp.com/
Any ideas? As Im still struggling with solving this problem.
Thanks,
Zachary
I don't know really.
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.
This was so helpful!
I really needed to implement json-server for a project
Love you brother ,saved my @ss in the last moment
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