How to remove "/app" from route in gatsby

Question

I have setup gatsby project and my routes only works when it contains /app because of this gatsby nodejs file.

exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions
  // page.matchPath is a special key that's used for matching pages
  // only on the client.
  if (page.path.match(/^\/app/)) {
    page.matchPath = "/app/*"

    // Update the page.
    createPage(page)
  }
}

I need to remove /app from my all the components. Is it possible to do so?

And also on production mode my dynamic routes does not work what is the issue?

const App = () => (
  <Layout>
    <Router>
      <VerifyToken path="/app/:token"/>
      <MagicLink path="/app/link/:magicLink"/>
    </Router>
  </Layout>
)

Answer 1

The code in your gatsby-node.js file is used to create what's called "client only routes". In the Gatsby docs they give an example that is used to create routes available only to logged-in users. These routes will exist on the client only and will not correspond to files in an app’s built assets on the server.

You could possibly eliminate the /app route if nothing is using it. But just based on the example component you posted, it does seem like your app is using it, and you did mention "dynamic routes". So you do need something to identify those routes and make them special to Gatsby.

In short, what this "client only route" is supposed to mean is that Gatsby will not create any server side pages for that route. But then you are supposed to create app components (mostly likely React components) that will respond to that route and build the content dynamically.

There is nothing special about the /app prefix. You can make it whatever you want as long as it is consistent between your Gatsby config and your client components and the router your client uses (hopefully Gastby's already built-in @reach/router?). But to create a hybrid app where some content is rendered server side by Gatsby and some content rendered dynamically client side, I'm pretty sure you need to have some kind of prefix to make that work so Gatsby can tell the difference between the two and how to render them. However, it's not clear from the Gatsby docs on page matchPath how that works. From the code example in the Gatsby docs, it does take a regular expression. It's possible that instead of /app you could try to match some other string somewhere else in the path instead of being at the beginning of the path. Whatever you do, the client side router will need to be set up to match that route too.

I don't think the Gatsby docs are that great so I can understand your struggle trying to get this to work. This Gatsby Mail App might help you to since it uses a different prefix (/threads) and has the complete source to an app that uses client side dynamic pages + static content.

And also on production mode my dynamic routes does not work what is the issue?

Very hard to tell with the limited code you provided. That doesn't look like it's the full source to that component. Is your component named src/pages/app.js or src/pages/app/index.js? That's what it needs to be named to handle the routing for the /app prefix.

Answer 2

To enable client-only routes with no prefix (no /app), you setup Gatsby as below.

In gatsby-node.js:

exports.onCreatePage = ({ page, actions }) => {
  const { createPage } = actions
  if (page.path === `/`) {
    page.matchPath = `/*`
    createPage(page)
  }
}

In index.js:

const IndexPage = () => {
  return (
    <Router>
      <Home path="/" />
      <OtherPage path="/other-page" />
    </Router>
  )
}

export default IndexPage