DEV Community

Abzed Mohammed
Abzed Mohammed

Posted on

How to Deploy JSON-Server to Heroku (3 Easy Steps)

Creating a local database and running your API locally is as easy as having a .json file and 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 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

Step Two - Creating Files

Folder structure

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

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

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

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

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.

Top comments (0)