Secure JSON-Server Setup on HTTPS

Running JSON-SERVER over HTTPS enables you test your integrations efficiently. We can make use of the TLD doamin .localhost and Caddy as web-server to ease the efforts. This tutorial assumes you have basic knowledge of terminal or command-line operations, and you are operating in a Unix-like environment (Linux/macOS).

Caddy is a modern, flexible web server with automatic HTTPS among its core features, making it an excellent choice for development and production environments. Its simplicity and automatic certificate management, including zero-configuration HTTPS, stand out among its benefits. Here’s a step-by-step guide:

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

To run JSON-SERVER on HTTPS using a specific domain like my-api-server.localhost, you’ll need to update your /etc/hosts file. This is required to ensure that this domain (my-api-server.localhost) properly resolves to the local machine. Here’s how to incorporate it:

Open your terminal and edit the /etc/hosts file with a text editor. You might need superuser privileges to edit this file. For example, using nano:

sudo nano /etc/hosts

Add a line to associate my-api-server.localhost with your local IP address (127.0.0.1). It should look like this:

127.0.0.1   my-api-server.localhost

Save and exit the editor. This change makes my-api-server.localhost resolve to your local machine.

Step 4: Configure Caddy with the custom domain

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 automatically handle HTTPS for my-api-server.localhost, including generating a self-signed certificate for this domain.

Understanding the Changes

• /etc/hosts: This file is used by your operating system to resolve domain names to IP addresses before querying external DNS servers. By adding my-api-server.localhost to this file, you ensure any requests to this domain are directed to your local machine.
• Caddy Configuration: By specifying my-api-server.localhost in the Caddyfile, you instruct Caddy to serve content for this domain and manage HTTPS, leveraging its automatic certificate management, even for local development domains. Caddy simplifies the process of setting up SSL/TLS for local development, which is essential for testing applications in an environment that closely mirrors production.

Hosted Alternatives

Setting up JSON-SERVER might seem like a hassle, but don’t worry! If you’re looking for an easier route, consider using hosted alternatives like Beeceptor. It’s a fantastic, no-code option that supports all the basic CRUD operations, comes with built-in CORS support, and gets you up and running in no time.

Happy Coding!

[Top]