DEV Community

vazmat
vazmat

Posted on

Introducing JSONExpress

#javascript #webdev #api #showdev

As developers, we've all felt the pain. You're building a beautiful new UI, your components are ready, but you're blocked. The backend API isn't finished. So what do you do? You start hardcoding data, creating messy mock objects, or wrestling with complex server setups just to get some fake data.

This friction in the early stages of development slows us down and kills momentum.

I wanted a better way. A tool that was as simple as
cd my-api/ && start-server

Meet JSONExpress

I'm excited to introduce JSONExpress, a zero-configuration mock REST server that lets you focus on your front-end, not your fake back-end.

The idea is simple: Each JSON file in your directory becomes an API endpoint. The filename defines the resource path.

Let's see it in action. Imagine you have a project folder structured like this:

my-api/
├── users.json
├── posts.json
└── comments.json
Enter fullscreen mode Exit fullscreen mode

Each file contains a simple array of JSON objects.

users.json:

[
  { "id": 1, "name": "Ada Lovelace", "email": "ada@example.com" },
  { "id": 2, "name": "Grace Hopper", "email": "grace@example.com" }
]
Enter fullscreen mode Exit fullscreen mode

posts.json:

[
  { "id": 101, "title": "On the Analytical Engine", "authorId": 1 },
  { "id": 102, "title": "Compiler Theory", "authorId": 2 }
]
Enter fullscreen mode Exit fullscreen mode

Now, let's fire up the server.

Installation & Usage:

# 1. Install the CLI tool from npm
npm install -g @json-express/core

# 2. cd into the directory containing your JSON files
cd my-api/

# 3. Run the magic command
json-express
Enter fullscreen mode Exit fullscreen mode

Instantly, you get a running server. JSON Express scans the directory and creates your API. The console will show you something like this:

🚀 Server running on port 3000

Get users:     GET     http://localhost:3000/users
Get one users: GET     http://localhost:3000/users/:id
Search users:  POST    http://localhost:3000/users
Create users:  POST    http://localhost:3000/users
Update users:  PATCH   http://localhost:3000/users/:id
Delete users:  DELETE  http://localhost:3000/users/:id

...
Enter fullscreen mode Exit fullscreen mode

You now have a complete REST API with full CRUD support for each resource:

Why Another One?

The world of mock API servers is rich with great tools. So why build another? My vision for JSON Express is to create the most intuitive, extensible, and developer-friendly experience possible, starting with a clean, file-based structure. This is just the beginning. (I'll be writing more about the philosophy and roadmap soon, so stay tuned!)

Get Started Today!

Give your workflow a boost and take JSON Express for a spin.

  1. Install it: npm install -g @json-express/core
  2. Learn more: Check out the official website at jsonexpress.com
  3. Contribute & Star: The project is open-source! Find it on GitHub, give it a star, and feel free to open issues or PRs.

Let me know what you think

Top comments (0)