🚀 JSON Server

· articles · 3 min read

By Rahul Gupta

Secure JSON-Server Setup on HTTPS

Seeing browser warnings for insecure requests when seting up JSON-server? Want to run json-server on HTTPS locally? This guide walks you through a clean setup that works well for modern frontend and API testing.

Seeing browser warnings for insecure requests when seting up JSON-server? Want to run json-server on HTTPS locally? This guide walks you through a clean setup that works well for modern frontend and API testing.

If you are testing frontend apps against json-server, you have probably hit this issue already. Your app runs on HTTPS, but your mock API runs on plain HTTP. The browser blocks requests, flags them as insecure, or breaks things like cookies and auth headers.

Running JSON-SERVER over HTTPS fixes this. It lets you test integrations in conditions closer to production without browser warnings getting in the way.

In this setup, you will use a .localhost domain and Caddy as a local web server. Caddy takes care of HTTPS for you, so you do not have to deal with certificate files manually.

This guide assumes:

  • You are comfortable using the terminal
  • You are on Linux or macOS
  • Node.js is already installed

Why Caddy?

Caddy is a simple web server that handles HTTPS automatically. For local development, this is very handy. You point it at a local port, and it takes care of TLS, certificates, and routing with minimal config.

Step 1: Install JSON-SERVER

Run the following command to install JSON-SERVER globally:

npm install -g json-server

Step 2: Run JSON-SERVER

Create a file named db.json in your project directory. Add some JSON data to it as your fake API data. For example:

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": {
    "name": "typicode"
  }
}

Start JSON-SERVER: Navigate to your project directory in the terminal and start JSON-SERVER by running:

json-server --watch db.json

By default, JSON-SERVER will run on http://localhost:3000. You can validate by navigating to http://localhost:3000/posts and seeing a JSON array containing one post.

Step 3: Use a custom .localhost domain

Browsers treat .localhost as a special top-level domain meant for local development. This makes it ideal for HTTPS testing.

You will map a custom domain like my-api-server.localhost to your local machine.

Edit your /etc/hosts file:

sudo nano /etc/hosts

Add this line:

127.0.0.1   my-api-server.localhost

Save and exit.

Now, any request to my-api-server.localhost will resolve to your local machine.

Step 4: Configure Caddy as a reverse proxy

After setting up your DNS via the /etc/hosts file, you need to create a Caddyfile to use your custom domain and ensure Caddy handles HTTPS for it. Create a file named Caddyfile to route all the requests coming to this domain to localhost:3000

my-api-server.localhost {
    reverse_proxy localhost:3000
}

Run Caddy: With the updated Caddyfile, start Caddy in your terminal:

caddy run

Caddy will:

  • Generate a local certificate
  • Serve your domain over HTTPS
  • Proxy requests to JSON-SERVER

You can now open:

https://my-api-server.localhost/posts

Your API is running on HTTPS without browser warnings.

What changed under the hood?

A quick breakdown of what is happening:

  • /etc/hosts: This file forces your custom domain to resolve to 127.0.0.1 instead of using public DNS.
  • Caddy reverse proxy: Caddy listens on HTTPS and forwards traffic to JSON-SERVER, which still runs on HTTP internally.
  • TLS handling: Caddy manages certificates automatically, even for local domains.

This setup mirrors how APIs are usually deployed in real environments.

A simpler hosted option

Running JSON-SERVER locally works, but it still takes setup time. If you want something quicker, hosted mock APIs can save effort.

Tools like Beeceptor let you create HTTPS-ready mock endpoints without running anything locally. You get:

  • Instant HTTPS endpoints
  • Built-in CORS handling
  • CRUD APIs without writing server code
  • Stateful where you can sequeuce API calls for predictable output.
  • No local certificates or proxy setup

If you frequently mock APIs for frontend work, this approach is often faster.

You now have JSON-SERVER running securely on HTTPS using a custom local domain. This setup removes browser security issues and gives you a cleaner testing flow.

If you want to go further, try:

  • Running multiple mock APIs behind Caddy
  • Adding request logging or rate limits
  • Switching to a hosted mock API for team-wide testing

Happy coding!

[Top]

Share:
Back to Blog