directly accessible client only paths

[amlcodes]

Summary

As referenced in a lot of issues (but I don't think documented), Client only paths work well in development and even while using gatsby-serve, but not when accessed directly when served from express. I am serving 'public' to an express server hosted on an ec2. I want to avoid configuring a URL rewrite or redirect through the provider, and want to contain the solution entirely within the node app repo if I can (docker and nginx are on the table but I would like to avoid that too).

Architecture:

pages/
-index.js
-messages.js

Configuring gatsby-node.js to allow for client only paths off /messages/, i.e: example.com/messages/1 :

exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions
  if (page.path.match(/^\/messages/)) {
    page.matchPath = "/messages/*"
    createPage({
      path: '/messages/:id',
      pathname: '/messages/:id',
      component: path.resolve(`src/components/message/report.js`)
    })
  }
}

as well as using react router on pages/index.html:

<Router basepath="/">
        <Home path="/" />
        <Report path="messages/:id" />
      </Router>

Any solutions?

Environment (if relevant)

System:
OS: macOS 10.15.5
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 14.2.0 - /usr/local/bin/node
npm: 6.14.5 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 83.0.4103.116
Safari: 13.1.1
npmPackages:
gatsby: ^2.21.13 => 2.21.16
gatsby-cli: ^2.12.44 => 2.12.44
gatsby-image: ^2.4.1 => 2.4.2
gatsby-plugin-create-client-paths: ^2.3.5 => 2.3.5
gatsby-plugin-manifest: ^2.4.2 => 2.4.2
gatsby-plugin-material-ui: ^2.1.9 => 2.1.9
gatsby-plugin-offline: ^3.2.1 => 3.2.1
gatsby-plugin-react-helmet: ^3.3.1 => 3.3.1
gatsby-plugin-react-svg: ^3.0.0 => 3.0.0
gatsby-plugin-sharp: ^2.6.1 => 2.6.1
gatsby-source-filesystem: ^2.3.1 => 2.3.1
gatsby-transformer-sharp: ^2.5.1 => 2.5.1
npmGlobalPackages:
gatsby-cli: 2.12.51

[pieh]

gatsby serve is also express "app": https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/commands/serve.ts so if you do want to use express, but you need it to do more than gatsby serve, you could copy the client only paths "router" from that file to your own application.

Please do keep in mind that we generally don't recommend using either gatsby serve or custom express app to host production gatsby sites, because CDNs mostly take away a lot of hairy problems you might need to solve on your own when running your own server (stuff like redundancy, maybe load balancing, etc), but I also acknowledge that it might not be "that simple" in various cases. Also keep in mind that gatsby serve doesn't actually implement caching rules we outlined in https://www.gatsbyjs.org/docs/caching/ (ideally this is handled, but we don't prioritize this, because of above stance)

[amlcodes]

@pieh thanks for the response! So I'm confused, I should copy what exactly?

[pieh]

@pieh thanks for the response! So I'm confused, I should copy what exactly?

gatsby/packages/gatsby/src/commands/serve.ts

Lines 110 to 111 in 1cf0c27

	const matchPaths = await readMatchPaths(program)
	router.use(matchPathRouter(matchPaths, { root }))

are the "main lines" - you would have to grab readMatchPaths, matchPathRouter functions aswell

[amlcodes]

Oh perfect! cool! I see what you were having me do - basically follow how gatsby serve works. Thanks!

[amlcodes]

What's the 'program' in the serve props and being passed to readMatchPaths? I can't find where that is being passed and how to recreate the object