Blitz: Implement the `blitz routes` command

[flybayer]

What do you want and why do you want it?.

We want a single command, blitz routes, that nicely lists all http endpoints in the app. This is especially useful since we can have many pages folders throughout the app.

• pages
• api routes
• query & mutation endpoints

For example, here's how rails does it.

[mikeattara]

Let me have a go at this

[ryardley]

Be nice if this could be serializable so that you could use it to generate sitemaps

[flybayer]

@ryardley great point!

[flybayer]

@mikeattara have you been able to make any progress on this?

[merelinguist]

@mikeattara Do you mind if I work on this?

[flybayer]

@merelinguist it's been three months so I think the answer is yes 😄

[TatisLois]

@merelinguist how's this going, anyway I can support?

[rayandrews]

I tried to create simple implementation of this issue and get this result:

{
  "/Users/rayandrew/Projects/contributing/blitz/examples/auth/pages/404.tsx": {
    "uri": "/404",
    "verb": "GET",
    "type": "pages"
  },
  "/Users/rayandrew/Projects/contributing/blitz/examples/auth/pages/index.tsx": {
    "uri": "/index",
    "verb": "GET",
    "type": "pages"
  },
  "/Users/rayandrew/Projects/contributing/blitz/examples/auth/pages/ssr.tsx": {
    "uri": "/ssr",
    "verb": "GET",
    "type": "pages"
  },
  "/Users/rayandrew/Projects/contributing/blitz/examples/auth/pages/api/auth/[...auth].ts": {
    "uri": "/api/auth/[...auth]",
    "verb": "ANY",
    "type": "api"
  },
  "/Users/rayandrew/Projects/contributing/blitz/examples/auth/pages/api/auth/mutations/login.ts": {
    "uri": "/api/auth/mutations/login",
    "verb": "POST",
    "type": "rpc"
  },
  "/Users/rayandrew/Projects/contributing/blitz/examples/auth/pages/api/auth/mutations/logout.ts": {
    "uri": "/api/auth/mutations/logout",
    "verb": "POST",
    "type": "rpc"
  },
  "/Users/rayandrew/Projects/contributing/blitz/examples/auth/pages/api/auth/mutations/signup.ts": {
    "uri": "/api/auth/mutations/signup",
    "verb": "POST",
    "type": "rpc"
  },
  "/Users/rayandrew/Projects/contributing/blitz/examples/auth/pages/login.tsx": {
    "uri": "/login",
    "verb": "GET",
    "type": "pages"
  },
  "/Users/rayandrew/Projects/contributing/blitz/examples/auth/pages/signup.tsx": {
    "uri": "/signup",
    "verb": "GET",
    "type": "pages"
  },
  "/Users/rayandrew/Projects/contributing/blitz/examples/auth/pages/api/users/mutations/trackView.ts": {
    "uri": "/api/users/mutations/trackView",
    "verb": "POST",
    "type": "rpc"
  },
  "/Users/rayandrew/Projects/contributing/blitz/examples/auth/pages/api/users/queries/getCurrentUser.ts": {
    "uri": "/api/users/queries/getCurrentUser",
    "verb": "POST",
    "type": "rpc"
  },
  "/Users/rayandrew/Projects/contributing/blitz/examples/auth/pages/api/users/queries/getUser.ts": {
    "uri": "/api/users/queries/getUser",
    "verb": "POST",
    "type": "rpc"
  },
  "/Users/rayandrew/Projects/contributing/blitz/examples/auth/pages/api/users/queries/getUsers.ts": {
    "uri": "/api/users/queries/getUsers",
    "verb": "POST",
    "type": "rpc"
  },
  "/Users/rayandrew/Projects/contributing/blitz/examples/auth/pages/users/index.tsx": {
    "uri": "/users/index",
    "verb": "GET",
    "type": "pages"
  }
}

any thoughts for improvement? @flybayer

I think it needs some improvement on uri field (especially the ones with param) to be more meaningful

Just the information:
/wow page is inputted from the blitz.config.js

const {sessionMiddleware, unstable_simpleRolesIsAuthorized} = require("@blitzjs/server")
const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
})

module.exports = withBundleAnalyzer({
  sitemap: [{uri: "/wow", type: "pages", verb: "get"}],
  middleware: [
    sessionMiddleware({
      unstable_isAuthorized: unstable_simpleRolesIsAuthorized,
      sessionExpiryMinutes: 4,
    }),
  ],
  /*
  webpack: (config, {buildId, dev, isServer, defaultLoaders, webpack}) => {
    // Note: we provide webpack above so you should not `require` it
    // Perform customizations to webpack config
    // Important: return the modified config
    return config
  },
  webpackDevMiddleware: (config) => {
    // Perform customizations to webpack dev middleware config
    // Important: return the modified config
    return config
  },
  */
})

Feel free to improve!

Update here is the command:

[flybayer]

@rayandrews WOW, nice!!! PR that puppy!

Few thoughts:

• Replace ANY with *
• Remove (.:format)
• I think the parameter is good, display in brackets, same as the page name.
• Probably want to display the file path in the results too (original file path, not the compiled path inside .blitz)

[rayandrews]

Got it @flybayer!

Here is the updated screenshot:

Notice that the /wow URI is coming from blitz.config.js.
I modify the API to be like this. I think this is good to have so users can add their own additional sitemap entries.

module.exports = {
    sitemap: (routeCache) => [{uri: "/wow", type: "pages", verb: "get" /* path: */}],
};

What do you think?

I will open PR and connect this issue (quite a lot of changing, but I create tests to support

UPDATE: Open a PR #1478