How to easily create and host your own REST API without writing a single line of code
Tags: react, javascript, node, codenewbie
Published: 2020-10-16 03:38:15

### 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

```js
npm init -y
```

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

- Install the `json-server` npm package by executing the following command

```js
npm install json-server
```

- 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:

```js
{
  "users": [
    {
      "id": 1,
      "name": "David",
      "age": 30
    },
    {
      "name": "John",
      "id": 2,
      "age": 40
    }
  ]
}
```

- Open `package.json` file and add the `scripts` section inside it:

```js
"scripts": {
  "start": "json-server db.json"
}
```

- 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](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/57c630d52f7807f6966bd2e84183f6e1173f16a8/initial_screen.png)

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

![Users Route](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/57c630d52f7807f6966bd2e84183f6e1173f16a8/resources.png)

**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](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/57c630d52f7807f6966bd2e84183f6e1173f16a8/get_users.gif)

## Making POST API request to add a new user

![Add User API](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/57c630d52f7807f6966bd2e84183f6e1173f16a8/add_user.gif)

## Making PUT API request to update a user

![Update User API](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/57c630d52f7807f6966bd2e84183f6e1173f16a8/update_user.gif)

## Making DELETE API request to delete a user

![Delete User API](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/57c630d52f7807f6966bd2e84183f6e1173f16a8/delete_user.gif)

## 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](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/57c630d52f7807f6966bd2e84183f6e1173f16a8/snapshot.png)

![Saved Snapshot](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/57c630d52f7807f6966bd2e84183f6e1173f16a8/saved_snapshot.png)

## 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](https://github.com/new/) 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](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/57c630d52f7807f6966bd2e84183f6e1173f16a8/create_repo.png)

- You will see the following screen

 ![Commands](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/e5dba60066c92736ded92f756a5a230388b3bfd3/commands.png)

- 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](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/e5dba60066c92736ded92f756a5a230388b3bfd3/git_commands.png)

- 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](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/ce7981440c313c5c4e3dbe61ce4c90ff6a950495/json-server.png)

## Complete API

![Complete API](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/ce7981440c313c5c4e3dbe61ce4c90ff6a950495/db.png)

## Users API

![Users API](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/ce7981440c313c5c4e3dbe61ce4c90ff6a950495/users.png)

> 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](https://my-json-server.typicode.com/)

## 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](https://github.com/myogeshchavan97/users-api).

**Don't forget to subscribe to get my weekly newsletter with amazing tips, tricks and articles directly in your inbox [here](https://yogeshchavan.dev).**

[<img src="https://cdn.buymeacoffee.com/buttons/default-yellow.png" >](https://www.buymeacoffee.com/myogeshchavan97)