feat: add "routes" visualization command to cli

[jacob-ebey]

fix: updated fixture pm2 config
fix: updated fixture install script to link cli

The output of remix routes looks like:

<Routes>
  <Route file="root.jsx">
    <Route path="action-catches-from-loader-self-boundary" file="routes\\action-catches-from-loader-self-boundary.jsx" />
    <Route path="action-catches-self-boundary" 
file="routes\\action-catches-self-boundary.jsx" />
    <Route path="action-errors-self-boundary" file="routes\\action-errors-self-boundary.jsx" />
    <Route path="catchall-nested-no-layout/*" file="routes\\catchall-nested-no-layout\\$.jsx" 
/>
    <Route path="action-catches-from-loader" file="routes\\action-catches-from-loader.jsx" /> 
    <Route path="multiple-set-cookies" file="routes\\multiple-set-cookies.tsx" />
    <Route path="catchall-nested" file="routes\\catchall-nested.jsx">
      <Route index file="routes\\catchall-nested\\index.jsx" />
      <Route path="*" file="routes\\catchall-nested\\$.jsx" />
    </Route>
    <Route path="catchall/flat/*" file="routes\\catchall.flat.$.jsx" />
    <Route path="action-catches" file="routes\\action-catches.jsx" />
    <Route path="action-errors" file="routes\\action-errors.jsx" />
    <Route path="loader-errors" file="routes\\loader-errors.jsx">
      <Route path="nested-catch" file="routes\\loader-errors\\nested-catch.jsx" />
      <Route path="nested" file="routes\\loader-errors\\nested.jsx" />
    </Route>
    <Route path="render-errors" file="routes\\render-errors.jsx">
      <Route path="nested" file="routes\\render-errors\\nested.jsx" />
    </Route>
    <Route path="nested-forms" file="routes\\nested-forms.tsx">
      <Route path="nested" file="routes\\nested-forms\\nested.tsx">
        <Route index file="routes\\nested-forms\\nested\\index.tsx" />
      </Route>
    </Route>
    <Route path="gists/mine" file="routes\\gists.mine.jsx" />
    <Route path="fetchers" file="routes\\fetchers.tsx" />
    <Route file="routes\\__layout.tsx">        
      <Route path="with-layout" file="routes\\__layout\\with-layout.tsx" />
    </Route>
    <Route path="actions" file="routes\\actions.tsx" />
    <Route path="methods" file="routes\\methods.tsx" />
    <Route path="empty" file="routes\\empty.jsx" />
    <Route path="gists" file="routes\\gists.jsx">
      <Route path=":username" file="routes\\gists\\$username.jsx" />
      <Route index file="routes\\gists\\index.jsx" />
    </Route>
    <Route index file="routes\\index.jsx" />   
    <Route path="links" file="routes\\links.tsx" />
    <Route path="prefs" file="routes\\prefs.tsx" />
    <Route path="blog" file="routes\\blog.tsx">      <Route path="hello-world" file="routes\\blog\\hello-world.mdx" />
      <Route path="second" file="routes\\blog\\second.md" />
      <Route index file="routes\\blog\\index.tsx" />
      <Route path="third" file="routes\\blog\\third.md" />
    </Route>
    <Route path="one" file="routes\\one.mdx" />    <Route path="two" file="routes\\two.md" /> 
    <Route path="/page/four" file="pages/four.jsx" />
    <Route path="programatic" file="pages/test.jsx">
      <Route path=":messageId" file="pages/child.jsx" />
    </Route>
    <Route path="/page/three" file="pages/three.jsx" />
  </Route>
</Routes>

You can also get it in JSON format with remix routes --json. That looks something like:

[
  {
    "id": "root",
    "path": "",
    "file": "root.jsx",
    "children": [
      {
        "id": "routes/action-catches-from-loader-self-boundary",
        "path": "action-catches-from-loader-self-boundary",
        "file": "routes\\action-catches-from-loader-self-boundary.jsx"
      },
      {
        "id": "routes/action-catches-self-boundary",
        "path": "action-catches-self-boundary",        "file": "routes\\action-catches-self-boundary.jsx"
      },
      {
        "id": "routes/action-errors-self-boundary",
        "path": "action-errors-self-boundary", 
        "file": "routes\\action-errors-self-boundary.jsx"
      },
      {
        "id": "routes/catchall-nested-no-layout/$",
        "path": "catchall-nested-no-layout/*", 
        "file": "routes\\catchall-nested-no-layout\\$.jsx"
      },
      {
        "id": "routes/action-catches-from-loader",
        "path": "action-catches-from-loader",  
        "file": "routes\\action-catches-from-loader.jsx"
      },
      {
        "id": "routes/multiple-set-cookies",   
        "path": "multiple-set-cookies",        
        "file": "routes\\multiple-set-cookies.tsx"
      },
      {
        "id": "routes/catchall-nested",        
        "path": "catchall-nested",
        "file": "routes\\catchall-nested.jsx", 
        "children": [
          {
            "id": "routes/catchall-nested/index",
            "index": true,
            "file": "routes\\catchall-nested\\index.jsx"
          },
          {
            "id": "routes/catchall-nested/$",  
            "path": "*",
            "file": "routes\\catchall-nested\\$.jsx"
          }
        ]
      },
      {
        "id": "routes/catchall.flat.$",        
        "path": "catchall/flat/*",
        "file": "routes\\catchall.flat.$.jsx"  
      },
      {
        "id": "routes/action-catches",
        "path": "action-catches",
        "file": "routes\\action-catches.jsx"   
      },
      {
        "id": "routes/action-errors",
        "path": "action-errors",
        "file": "routes\\action-errors.jsx"    
      },
      {
        "id": "routes/loader-errors",
        "path": "loader-errors",
        "file": "routes\\loader-errors.jsx",   
        "children": [
          {
            "id": "routes/loader-errors/nested-catch",
            "path": "nested-catch",
            "file": "routes\\loader-errors\\nested-catch.jsx"
          },
          {
            "id": "routes/loader-errors/nested",
            "path": "nested",
            "file": "routes\\loader-errors\\nested.jsx"
          }
        ]
      },
      {
        "id": "routes/render-errors",
        "path": "render-errors",
        "file": "routes\\render-errors.jsx",   
        "children": [
          {
            "id": "routes/render-errors/nested",
            "path": "nested",
            "file": "routes\\render-errors\\nested.jsx"
          }
        ]
      },
      {
        "id": "routes/nested-forms",
        "path": "nested-forms",
        "file": "routes\\nested-forms.tsx",    
        "children": [
          {
            "id": "routes/nested-forms/nested",            "path": "nested",
            "file": "routes\\nested-forms\\nested.tsx",
            "children": [
              {
                "id": "routes/nested-forms/nested/index",
                "index": true,
                "file": "routes\\nested-forms\\nested\\index.tsx"
              }
            ]
          }
        ]
      },
      {
        "id": "routes/gists.mine",
        "path": "gists/mine",
        "file": "routes\\gists.mine.jsx"       
      },
      {
        "id": "routes/fetchers",
        "path": "fetchers",
        "file": "routes\\fetchers.tsx"
      },
      {
        "id": "routes/__layout",
        "file": "routes\\__layout.tsx",        
        "children": [
          {
            "id": "routes/__layout/with-layout",
            "path": "with-layout",
            "file": "routes\\__layout\\with-layout.tsx"
          }
        ]
      },
      {
        "id": "routes/actions",
        "path": "actions",
        "file": "routes\\actions.tsx"
      },
      {
        "id": "routes/methods",
        "path": "methods",
        "file": "routes\\methods.tsx"
      },
      {
        "id": "routes/empty",
        "path": "empty",
        "file": "routes\\empty.jsx"
      },
      {
        "id": "routes/gists",
        "path": "gists",
        "file": "routes\\gists.jsx",
        "children": [
          {
            "id": "routes/gists/$username",    
            "path": ":username",
            "file": "routes\\gists\\$username.jsx"
          },
          {
            "id": "routes/gists/index",        
            "index": true,
            "file": "routes\\gists\\index.jsx" 
          }
        ]
      },
      {
        "id": "routes/index",
        "index": true,
        "file": "routes\\index.jsx"
      },
      {
        "id": "routes/links",
        "path": "links",
        "file": "routes\\links.tsx"
      },
      {
        "id": "routes/prefs",
        "path": "prefs",
        "file": "routes\\prefs.tsx"
      },
      {
        "id": "routes/blog",
        "path": "blog",
        "file": "routes\\blog.tsx",
        "children": [
          {
            "id": "routes/blog/hello-world",   
            "path": "hello-world",
            "file": "routes\\blog\\hello-world.mdx"
          },
          {
            "id": "routes/blog/second",        
            "path": "second",
            "file": "routes\\blog\\second.md"  
          },
          {
            "id": "routes/blog/index",
            "index": true,
            "file": "routes\\blog\\index.tsx"  
          },
          {
            "id": "routes/blog/third",
            "path": "third",
            "file": "routes\\blog\\third.md"   
          }
        ]
      },
      {
        "id": "routes/one",
        "path": "one",
        "file": "routes\\one.mdx"
      },
      {
        "id": "routes/two",
        "path": "two",
        "file": "routes\\two.md"
      },
      {
        "id": "pages/four",
        "path": "/page/four",
        "file": "pages/four.jsx"
      },
      {
        "id": "pages/test",
        "path": "programatic",
        "file": "pages/test.jsx",
        "children": [
          {
            "id": "pages/child",
            "path": ":messageId",
            "file": "pages/child.jsx"
          }
        ]
      },
      {
        "id": "pages/three",
        "path": "/page/three",
        "file": "pages/three.jsx"
      }
    ]
  }
]

[sergiodxa]

This is really cool and useful to visualize all the routes, specially on big projects, thank!

[mjackson]

Very nicely done, @jacob-ebey! This is gonna be great. thank you