Setting up a simple backend with json-server and ngrok

While working on a recent project, I needed a simple backend with CRUD functionality to power a React Native app I was prototyping. Ideally I didn’t want to spend too long setting this up, as it would be throw away. But wanted something that actually communicated over a network rather than faking requests. Json-server and ngrok fitted my needs perfectly.

json-server acts as a backend allowing REST API’s between your app and the database you configure.

ngrok allows you to tunnel network requests over the internet to a specific address. In my case allowing an app running on 3G to communicate with a MacBook Pro running a localhost connected to the WiFi.

json-server

Setting up json-server is pretty straight forward, and depending on what your doing, you can have a “server” setup within a few lines of code / steps. They even say:

Get a full fake REST API with zero coding in less than 30 seconds (seriously)

These are the steps I took to get it working.

Step 1 — Setting up a project

To avoid not mixing the website / app code with the server being created, I made a new folder which would contain server code. Now, within this new directory, run npm init to start a new node project. Using default values during the setup should be fine.

Then install json-server as a dependency. To do this, run npm i json-server. This should add json-server to your node_modules and update the package.json file.

Step 2 — Add your database schema

First you need to create a db.json file within the route of the project. You can use a different name or directory, as we target this later.

Within this db.json file you add any “endpoints” you need. For example, if you wanted an endpoint which will store and return a set of products, you’d add this to the json file.

{
  "products": [
    { "id": 1, "title": "Product 1", "qty": 10, "price": "£1.00"},
    { "id": 2, "title": "Product 2", "qty": 20, "price": "£2.00"}
  ]
}

The above would create one end point where you could run aGET request to return the products array. OR POST to add an item to this array. Any changes you do make will be reflected in the db.json file where you originally configured the database / endpoints.

Step 3 — Run the server

Within the package.json file, update the scripts object to include the following command:

"scripts": {
  "server": "json-server --watch db.json"
},

Now when you run npm run server this should start the server giving you access to any endpoints you added to the db.json on http://localhost:3000.

For example, going to http://localhost:3000/products will return the array of products.

Whats even better is you can also query the endpoint. So to get a specific products you can query by ‘id’. E.g http://localhost:3000/products?id=1. Json-server support a lot more which can be see on their documentation

Ngrok

With json-server we can create a server, but this will only be running on your local machine. At times you might need a real device to have access to your localhost, or are on different networks and require a public URL.

Ngrok when setup will give us a public URL that will point to any URL we need, including our localhost server running on port 3000.

Within the package.json file add another command to tell ngrok to start and point to our localhost.

"scripts": {
  "server": "json-server --watch db.json",
  "ngrok": "ngrok http 3000"
},

Now in a new terminal window, when you run npm run ngrok you should see something like this:

Session Status                online
Session Expires               7 hours, 56 minutes
Version                       2.3.35
Region                        United States (us)
Web Interface                 http://123.0.0.1:4040
Forwarding                    http://example123.ngrok.io -> http://localhost:3000
Forwarding                    https://example123.ngrok.io -> http://localhost:3000

The above should output a Forwarding URL, which will actually tunnel any network requests to your localhost. Making testing on a real device on 4G very easy.

Note — By default the forwarding URL from ngrok will expire in 8 hours. After this time you will need to restart the service and update the forwarding URL in your apps (as it will be different). You can pay to get a static URL if required.