DEV Community

Cover image for How to easily create and host your own REST API without writing a single line of code
Yogesh Chavan
Yogesh Chavan

Posted on • Updated on

How to easily create and host your own REST API without writing a single line of code

Introduction

In this article, you will see how to easily create your own REST API server to be accessible on the internet without coding and without the need of hosting it on any hosting provider.

So let's get started

Setup local environment

  • Create a new folder with the name users-api-server.
  • Navigate inside the folder from the command line and execute the following command
npm init -y
Enter fullscreen mode Exit fullscreen mode

This will create a package.json file inside your project.

  • Install the json-server npm package by executing the following command
npm install json-server
Enter fullscreen mode Exit fullscreen mode
  • Create a new file with the name .gitignore with the entry for node_modules inside it so the node_modules folder will not be pushed to GitHub while pushing the code to the GitHub repository.

  • Create a new file with the name db.json and add the following contents inside it:

{
  "users": [
    {
      "id": 1,
      "name": "David",
      "age": 30
    },
    {
      "name": "John",
      "id": 2,
      "age": 40
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode
  • Open package.json file and add the scripts section inside it:
"scripts": {
  "start": "json-server db.json"
}
Enter fullscreen mode Exit fullscreen mode
  • Now, start the application by running the npm start command from the terminal.

  • You will see the following screen when you access it at http://localhost:3000/

Initial Screen

  • If you click the /users link under the resources section, you will see the following screen

Users Route

Tip: To get the nice formatted JSON output as shown above, install the JSON Formatter browser extension

  • Congratulations! you've just written your own REST API server without writing a single line of code

  • Now we can make GET, POST, PUT, PATCH and DELETE API calls to our own API.

Making Get API request to get all users

Get Users API

Making POST API request to add a new user

Add User API

Making PUT API request to update a user

Update User API

Making DELETE API request to delete a user

Delete User API

Save the changes

Now, you've made some API calls to our application.

If you want to save the final result of those API calls, you can press the s key from your keyboard and hit the enter key which will save the snapshot of the changes in a separate file as can be seen in the terminal.

Snapshot

Saved Snapshot

Deploy the application

Deploying the application which uses json-server is very easy.

You just have to create a GitHub repository and push your local changes to that repository and access it with a specific URL from the browser.

Follow the following steps to do it:

  • Navigate to this url to create a new GitHub repository
  • Enter the name of the repository you want, make it public and click on the Create repository button

Create Repository

  • You will see the following screen

Commands

  • Copy the URL which says git remote add
  • Now open terminal in your project and first execute git init .(git init dot) command and then paste the copied URL in the last step and press enter

Git Commands

  • These two commands will make your project a git repository and point your local git repository to GitHub
  • So now we can push the changes to GitHub by executing the following commands in sequence

    1. git add --all .
    2. git commit -m "your_commit_message"
    3. git push origin master
  • Once the changes are pushed to the repository you can access your json-server by navigating to https://my-json-server.typicode.com/your_github_username/your_repository_name for example https://my-json-server.typicode.com/myogeshchavan97/users-api

That's it! You have deployed your API live to the web so anyone can use your API now.

Deployed live

Our JSON Server

Complete API

Complete API

Users API

Users API

Note: To deploy the json-server live as we have seen, you actually only need db.json file in your project. There is no need of installing the json-server npm package locally inside the package.json file.
We installed it locally so we can test our API locally before making it live.

The beauty of using json-server is that, when you access your API using https://my-json-server.typicode.com/ URL, it does not change your original db.json file. So each user will get the same copy of db.json API.

Only when you test locally using json-server, original db.json file will be modified.

To learn more about json-server click here

Conclusion

As you have seen, by creating only db.json file inside the project folder and providing JSON object structure in that file, you can create your own REST API server available live on the internet without even the need for hosting it.

You can find the complete source code for this application here.

Don't forget to subscribe to get my weekly newsletter with amazing tips, tricks and articles directly in your inbox here.

Top comments (21)

Collapse
 
shubhadip_bhowmik profile image
Shubhadip Bhowmik

Insightful

Collapse
 
myogeshchavan97 profile image
Yogesh Chavan

Glad to hear that. Thank youšŸ™

Collapse
 
shohagcsediu profile image
Mohammad Shohag

nice

Collapse
 
myogeshchavan97 profile image
Yogesh Chavan

Thank you šŸ™

Collapse
 
liyasthomas profile image
Liyas Thomas

Feel free to use open source Postman alternative: Hoppscotch for testing APIs on-the-go directly from your browser window.

GitHub logo hoppscotch / hoppscotch

šŸ‘½ Open source API development ecosystem - https://hoppscotch.io

Collapse
 
badasscoder profile image
Badasscoder • Edited

why postman needs an alternative. - before opening url
[ after opening url]

awesome. I don't need postman anymore. your app is web based. big thing it is written in vue js. that's why will use

Collapse
 
liyasthomas profile image
Liyas Thomas
Thread Thread
 
badasscoder profile image
Badasscoder

Really Amazing. Now I have an extension. Good bye postman. Welcome to Hoppscotch.

Thread Thread
 
badasscoder profile image
Badasscoder

hey. Your extension does not have support for edge

Collapse
 
vampiire profile image
Vamp

this is so slick. and i echo the others - crisp and clear writing man. thanks for writing this

Collapse
 
myogeshchavan97 profile image
Yogesh Chavan

Thank you so much :)

Collapse
 
steevn profile image
steevn

Thanks for the clear and simple explaination, Yogesh.

Collapse
 
myogeshchavan97 profile image
Yogesh Chavan

Thank you :)

Collapse
 
myogeshchavan97 profile image
Yogesh Chavan

You can use json-server for hosting your API on production as I did in this article here.

Collapse
 
amlana24 profile image
amlan

Is there a way to add auth to it?

Collapse
 
myogeshchavan97 profile image
Yogesh Chavan

yes, you can add authentication using middleware like this:

// server.js
const jsonServer = require('json-server')
const server = jsonServer.create()
const router = jsonServer.router('db.json')
const middlewares = jsonServer.defaults()

server.use(middlewares)
server.use(router)
server.listen(3000, () => {
  console.log('JSON Server is running')
})
Enter fullscreen mode Exit fullscreen mode
Collapse
 
eldrige profile image
Eldrige

Thanks, this was very beautiful

Collapse
 
myogeshchavan97 profile image
Yogesh Chavan

Thank you šŸ™‚

Collapse
 
estebankra profile image
Esteban Krauwezuk

Thanks, very helpful.

Collapse
 
myogeshchavan97 profile image
Yogesh Chavan

Thank you :)

Collapse
 
mrexito profile image
Raul

Can you explain how one should proceed in case you have different json files. How could I choose one from them to show in my local server? thank you