How to Deploy JSON-Server to Heroku (3 Easy Steps)
Tags: jsonserver, heroku, node
Published: 2022-07-29 22:42:28

Creating a local database and running your API locally is as easy as having a _.json_ file and [json-server](https://www.npmjs.com/package/json-server) installed in your machine or project. However, when deploying to Heroku that is another story.

In this article I'll be deploying my local database to Heroku in **three** easy steps. Before diving right to it, you should have [Heroku-CLI](https://devcenter.heroku.com/articles/heroku-cli#install-the-heroku-cli) and **npm** installed in your machine.

## Step One - Configurations
There are only two configurations needed. The first is to connect Heroku account to the Heroku-cli and the other part is creating the _package.json_ file.

Open an empty folder with visual studio (VS Code), then open a VS Code terminal and use the command below to link your Heroku account to the Heroku-cli.

`$ heroku login`

You will be prompted to open a link to your browser. Click on any key EXCEPT the letter _**q**_ which will terminate the process.

After you've chosen the Heroku account you want connected, the whole login process will automate and if you check your terminal again you should be logged in.

The last step here is creating a _package.json_ file using the command below.

`$ npm init`

There will be a series of prompts of version and descriptions of your project, click enter through each prompt and leave everything blank except for the last one which you will have to type _yes_ to finish the process.

At the end of it all we should have a _package.json_ file. Within the file, the only dependency we need installed during the build process is **_json-server_**, which if you check the image below has been included in the dependencies section and finally the start command to run the server. See image below

![Image of package file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nr9ydfqpbm1othzw8i0y.png)


## Step Two - Creating Files

![Folder structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5bx9vf2r1itscoil0a0o.png)

In the image above, we only have 3 files inside our folder:

**1. db.json**
This file will contain all the data we need to use as the API.

![Test data for deploying](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4kl7w6g0fv3yn2b4aj9c.png)

**2. server.js**
All the configuration for _json-server_ to run on Heroku are stored in this file and also the path to the _db.json_.

`const jsonServer = require("json-server");
const server = jsonServer.create();
const router = jsonServer.router("db.json");
const middlewares = jsonServer.defaults({ static: "./build" });
const port = process.env.PORT || 3000;
server.use(middlewares);
server.use(router);
server.listen(port);`

![Server.js image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m2s0bmtuci9sm6bfo627.png)

**3. package.json**

The package.json file contain the dependencies that will be required by Heroku during the build process to serve our data, as explained earlier.


## Step Three- Deploying

Once we have all the configuration and files ready, what's left is to deploy. In the [Heroku](https://dashboard.heroku.com/apps) dashboard, at the top right corner, there is a button to create a new Heroku app. Click on it, give your application a unique name that you'll use as the API endpoint and create your app.

Head back to Visual Studio and use the commands below to link the newly created Heroku app to the local project.

`$ git init
$ heroku git:remote -a your-app-name
$ git add .
$ git commit -am "make it better"
$ git push heroku master`

After running the last command, your app should start building and deploying to heroku.

![building on heroku](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pp41th6mbt6he2xt64xx.png)

To see your data, open the link and add a _/resources_ as the one declared in .json file, in my case I used friends i.e  _https://your-app-name.herokuapp.com/friends_.

![Deployed site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kw8njyap44dk2yjtxohv.png)


**Conclusions**
This method is very easy to implement and takes less than 10-15mins. However, its not very secured. Be sure to use this method either for school projects or learning basis. As for creating secured API endpoints, I'd advise on using REST frameworks.