Part 2 of 3: List and search for routes using Pathfinder-UI's Table View

In the first post of this series, you learned about how Pathfinder-UI creates a D3 visualization of your Express app's route stack to help you see and think about route architecture and design in a whole new light.

We, love, lists

Sometimes though, a more traditional view of your routes can be more appropriate for your needs, like in the form of a list or table.

When seeing your route architecture is not a priority, a list or table view is a great way to see collectively all the routes that are registered in your app.

'rake routes' for Express?

If you've built Rails apps before, you might be familiar with the routes.rb file which contains all of the app's defined routes. You might have also used the rake routes command to get a full list of your app's routes printed directly in the terminal, and run rake routes | grep keyword to further narrow your search.

While there isn't a 'rake routes'-like feature built into Express, you can fortunately do the same with Pathfinder-UI when you choose to view your routes in Table View.

Pathfinder-UI Table View

A table that lists the routes for the open-source blogging app Ghost, narrowed down to those routes containing the word 'user'.


Similar to grep, you can also narrow your search by simply typing keywords into the Search field and selecting the routes you want to work with from the filtered results.

Ready to see a list of all of your app's routes in a table?

Set up Pathfinder-UI in 3 simple steps:

  1. Install pathfinder-ui from npm.

    $ npm install pathfinder-ui --save-dev
    
  2. Require the Pathfinder-UI module and mount it as middleware in your app at a custom route that you specify. In this case, we've defined our custom path as as '/pathfinder':

    // server/app/index.js (or wherever you keep your middleware)
    var pathfinderUI = require('pathfinder-ui');
    ...
    app.use('/pathfinder', function(req, res, next){
      pathfinderUI(app);
      next();
    }, pathfinderUI.router);
    
  3. In your browser, go to http://localhost:PORT/pathfinder to access the Pathfinder-UI interface and select the 'Table View' button. Voila!

In the next and last post of this series, I'll walk through how to use Pathfinder's built-in request builder to test routes and speed up your workflow.


Stay tuned!
comments powered by Disqus