Organize Your API Routes with File Tree View

by Fiberplane Team on Dec 4, 2024

Welcome to MEGA Launch Week Day 3! Wow, we made it halfway through the week. Wednesday always carries a “mini-Sunday” vibe, so we have a more relaxed update for you today. Introducing: file tree view for routes!

File Tree View

TL;DR: The file tree view is a toggle in the “Routes” left sidebar that allows you to better visualize your API routes in Fiberplane Studio—organizing them by the project files they are defined in.

How it works

The file tree view builds on top of two technologies:

• Automatic route detection, powered by our client library
• Static code analysis to map the routes to their corresponding files

First, we detect and report all the routes that are registered in your application using the client library.

Then, comes the fun part: we need to figure out what file path each route is associated with. We do this by mocking a Hono application in our static analysis engine and seeing where each route sends traffic to and which parts of the middleware “light up” when a route is triggered. That information flags the file that we’re then able to map the route to in the UI.

We talked more about this and how we run our static analysis engine in a previous blog post on launch day 1:

Code Analysis Fiberplane Studio static code analysis for auto Hono.js API routes

Modularizing an example marathon API

To illustrate this, let’s continue using the example from yesterday: imagine you are now working on a Hono API to support the marathon dashboard. Initially, all your app.* routes and their handlers can live in one index.ts file:

index.ts

import { Hono } from "hono";

const app = new Hono();

// Marathon Routes
app.get("/marathons", (c) => {}); // List all marathons
app.get("/marathons/:id", (c) => {}); // Get marathon details
app.post("/marathons", (c) => {}); // Create a marathon
app.put("/marathons/:id", (c) => {}); // Update a marathon

// Athlete Routes
app.get("/athletes", (c) => {}); // List all athletes
app.get("/athletes/:id", (c) => {}); // Get athlete details
app.post("/athletes", (c) => {}); // Create an athlete
app.put("/athletes/:id", (c) => {}); // Update athlete details

// Tracks Routes
app.get("/tracks", (c) => {}); // List all tracks
app.get("/tracks/:id", (c) => {}); // Get track details
app.post("/tracks", (c) => {}); // Create a track
app.put("/tracks/:id", (c) => {}); // Update a track

export default app;

As your application grows, however, managing all your routes in one file becomes unwieldy. In Hono, you can split them into separate modules, grouping related routes into individual files like athletes.ts, marathons.ts, and tracks.ts.

marathons.ts

import { Hono } from "hono";

const marathons = new Hono();

// Marathon routes go here...

export default marathons;

athletes.ts

import { Hono } from "hono";

const athletes = new Hono();

// Athlete routes go here...

export default athletes;

tracks.ts

import { Hono } from "hono";

const tracks = new Hono();

// Track routes go here...

export default tracks;

Then, combine these modules back in the main index.ts file.

index.ts

import { Hono } from "hono";
import marathons from "./marathons";
import athletes from "./athletes";
import tracks from "./tracks";

const app = new Hono();

// Combine all routes
app.route("/marathons", marathons);
app.route("/athletes", athletes);
app.route("/tracks", tracks);

export default app;

Once you have this set up, the mental model of your application is also more modular: you can now think of your API as a set of modules, each responsible for a different aspect of the marathon.

The issue, however, was that this modularity was not reflected in the Fiberplane Studio yet. All your routes used to be shown as one long list in the “Routes” section.

No more! You can now toggle the file tree view and see the routes organized as they are in your project files, allowing you to hide and focus certain specific parts of your API that you want to test.

---

That’s all for today! Keep an eye out for more releases this week as we wrap up our mega launch.

🚀 Mega Launch Week Check out all the new features and updates from Fiberplane's mega launch week