Create a FREE 🎉 Fake REST API with JSON Server Running On The Internet

In this article, I will show you how to create a fake REST API using JSON Server FOR FREE… 🙌

I was working on a simple CRUD application that retrieves some JSON data(using GET request) & displays in the UI. The issue is that: REST URL endpoint was not responding because the URL expired. Then I found that creating a fully-fledged REST API has lots of things involved. From registering a domain to setting up a server, connecting to a database. Creating a REST API using ExpressJS/NodeJS/DjangoREST framework takes time.

But don't worry, we will learn how to create a fully-fledged REST API from scratch later.

For now, we just want to interact with a simple JSON data (eg: like this).

Here comes JSON Server Typicode (GitHub.com) to rescue and save our energy/time. 🕒 With just simple steps you can host an URL Endpoint for JSON data on the internet.

You can use GET, POST, PUT, PATCH and DELETE requests. Here is what I created:

https://my-json-server.typicode.com/tujeff/tu-json-server

Step 1:

Create a folder with any name you want. I named it tu-json-server. I suggest you follow along with me. Then open your favorite code editor (I use VS Code) and open the folder in Editor you just created. The folder is empty now. If you are using VS Code open terminal (View > Integrated Terminal). If you are using another code editor open Terminal/Command Prompt and cd into the folder.

Make sure that you have Node.JS installed in your machine. If it isn’t there, just download it.

Step 2:

Write command in terminal/command prompt:

npm init -y

Step 3:

Now we have a package.json file inside the folder.

Time to Install the JSON server now. Write to the terminal:

npm install json-server

It will take some time to install. Once it installed you can see some other files/code added to your folder.

Step 4:

Create a new file & name it db.json (must name it db.json to make it work!)

Put the JSON data you want to retrieve in your apps. I am pasting this data in db.json

{
	"users": [
		{
			"id": 1,
			"name": "Robert Schwartz",
			"email": "[email protected]"
		},
		{
			"id": 2,
			"name": "Lucy Ballmer",
			"email": "[email protected]"
		},
		{
			"id": 3,
			"name": "Anna Smith",
			"email": "[email protected]"
		},
		{
			"id": 4,
			"name": "Robert Brown",
			"email": "[email protected]"
		},
		{
			"id": 5,
			"name": "Roger Bacon",
			"email": "[email protected]"
		},
		{
			"id": 6,
			"name": "Jeff Tu",
			"email": "[email protected]"
		},
		{
			"id": 7,
			"name": "Sharon Tu",
			"email": "[email protected]"
		},
		{
			"id": 8,
			"name": "Sammy Shark",
			"email": "[email protected]"
		},
		{
			"id": 9,
			"name": "Jesse Octopus",
			"email": "[email protected]"
		},
		{
			"id": 10,
			"name": "DrewSquid",
			"email": "[email protected]"
		},
		{
			"id": 11,
			"name": "Jamie Mantis",
			"email": "[email protected]"
		},
		{
			"id": 12,
			"name": "Molecule Man",
			"email": "[email protected]"
		},
		{
			"id": 13,
			"name": "Madame Uppercut",
			"email": "[email protected]"
		},
		{
			"id": 14,
			"name": "Morty Smith",
			"email": "[email protected]"
		},
		{
			"id": 15,
			"name": "Alexis Bull",
			"email": "[email protected]"
		},
		{
			"id": 16,
			"name": "Rack Jackson",
			"email": "[email protected]"
		},
		{
			"id": 17,
			"name": "Shyam Jaiswal",
			"email": "[email protected]"
		},
		{
			"id": 18,
			"name": "Bidhan Chatterjee",
			"email": "[email protected]"
		},
		{
			"id": 19,
			"name": "Amit Goenka",
			"email": "[email protected]"
		},
		{
			"id": 20,
			"name": "Smita Pallod",
			"email": "[email protected]"
		},
		{
			"id": 21,
			"name": "Rajeev Sen",
			"email": "[email protected]"
		},
		{
			"id": 22,
			"name": "Tom Price",
			"email": "[email protected]"
		},
		{
			"id": 23,
			"name": "Nick Thameson",
			"email": "[email protected]"
		},
		{
			"id": 24,
			"name": "Gonzalo Turner",
			"email": "[email protected]"
		},
		{
			"id": 25,
			"name": "Dillon Kim",
			"email": "[email protected]"
		},
		{
			"id": 26,
			"name": "Jonny Liu",
			"email": "[email protected]"
		},
		{
			"id": 27,
			"name": "Elliot Don",
			"email": "[email protected]"
		},
		{
			"id": 28,
			"name": "Ethan Hong",
			"email": "[email protected]"
		},
		{
			"id": 29,
			"name": "Andy Yang",
			"email": "[email protected]"
		},
		{
			"id": 30,
			"name": "Audrey Zhao",
			"email": "[email protected]"
		}
	],
	"tutorials": [
		{
			"id": 1,
			"title": "Javascript 1",
			"description": "Javascript 1 description",
			"published": 1
		},
		{
			"id": 2,
			"title": "Javascript 2",
			"description": "Javascript 2 description",
			"published": 0
		},
		{
			"id": 3,
			"title": "Python 101",
			"description": "Python 101 description",
			"published": 0
		},
		{
			"id": 4,
			"title": "Python 202",
			"description": "Python 202 description",
			"published": 1
		},
		{
			"id": 5,
			"title": "HTML one",
			"description": "HTML one description",
			"published": 1
		}
	]
}

Step 5:

In package.json replace the existing value of key name: “scripts” to:

...
"scripts": {
    "json:server": "json-server --watch db.json"
},
...

Step 6:

Time to run the server. Write the command:

npm run json:server

The server should start on http://localhost:3000

Quit the server with Control+c

Error: That port is already in use.

$ fuser -k 4001/tcp

SO FAR SO GOOD 😇

Step 7

Now time to host the server on the internet for FREE. For that, you need to create a new repository in GitHub named it tu-json-server and Pushed the local repo to remote GitHub.

NOTE: The repo tu-json-server MUST be in 'Public'

We already have repo tu-json-server in GitHub.com.

Open the URL:

https://my-json-server.typicode.com//

Our URL: https://my-json-server.typicode.com/tujeff/tu-json-server

👊 AWESOME WORK. YOU JUST CREATED A SIMPLE FAKE REST API WITH FEW STEPS. NOW USE THE ENDPOINT URL AS BACKEND TO YOUR SAMPLE APPS TO RETRIEVE THEM.