I've created many apps that could benefit from quickly spinning up an API from a static data file. This can include a frontend app or even a backend app. One example could be a bit of data you've got in a spreadsheet that would be great to simply throw in an API. Whether for testing something as a POC or running all the way to a production app, this can be a great way to get moving.

Note: The term API is somewhat glorified here. What I'm really making is simply a way to access JSON data over HTTP.

I'm familiar with Node.js and luckily I stumbled upon the package json-server a while back. This package is super simple: run a server that hosts data from a JSON file. That's it. You can install it globally using npm install -g json-server and serve up files locally for development. Alternatively, you can wrap it in your own app and deploy it to a service like Heroku for a fully-functioning public API stand-in.

I'll walk you through doing just that. This app is extremely simple on purpose. It's just three files. There's a link to all the source code at the bottom of this post.  


index.js

First, we have index.js which is our Node app. Here, we import our dependencies and create a server to host our JSON data.

const jsonServer = require('json-server');
const server = jsonServer.create();

// Create a json-server with our JSON file on disk
const router = jsonServer.router('db.json');
const middlewares = jsonServer.defaults();
server.use(middlewares);
server.use(router);

// Configure port for Heroku deploy
const port = process.env.PORT || 5151;

// Start the server
server.listen(port);

package.json

Next, in package.json we list our dependencies and configuration. Note: Heroku will automatically pick up on the start script in this file.  

{
  "name": "static-json-api-example",
  "version": "1.0.0",
  "description": "A demo app to host JSON files as an API.",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "author": "Nic Roth",
  "license": "ISC",
  "dependencies": {
    "json-server": "^0.14.2"
  },
  "engines": {
    "node": "10.x"
  }
}

db.json

Lastly, we have db.json where we store the data. The json-server package is pretty automagical when it comes to configuration. As long as your data is a valid JSON file, it will render correctly as an API.  

{
  "stories": [
    {
      "title": "A demo.",
      "body": "This is the demo story"
    },
    {
      "title": "Second story",
      "body": "We are hosting some JSON!"
    }
  ],
  "authors": [
    {
      "id": 1,
      "name": "Jim"
    }
  ]
}

The Results

Using these three files, you can deploy a data API in minutes. Simply drop in your data file to db.json and deploy it to Heroku.  

In this example, if you query the /stories route you will receive the following data.

[
  {
    "title": "A demo.",
    "body": "This is the demo story"
  },
  {
    "title": "Second story",
    "body": "We are hosting some JSON!"
  }
]

Now, my frontend app can start to interact with an API stand-in over HTTP. I can wire up loading states, interactions, and more all without having to build a real backend.


You can view the full source for this example on GitHub here. On the repo, there is a button to deploy this app to Heroku so you can have your own live example in just a click.