Gatsby: "gatsby serve" command doesn't work correctly with "pathPrefix" option

[szimek]

When using pathPrefix option all links (that use <Link /> component) in the generated build contain this prefix. However, when running gatsby serve command, it simply serves everything in public folder as it is without taking pathPrefix into account.

E.g. when pathPrefix is set to /en/blog, public/index.html file should be accessible at /en/blog/, but when running gatsby serve command, it will be accessible at /, thus all links that have this path prefix are unusable and return 404.

BTW. The documentation for pathPrefix is rather short and doesn't clearly explain if one should e.g. skip this prefix when generating pages using createPage, or how to access this pathPrefix when generating e.g. canonical urls or hreflangs etc. I can create a PR for it once I figure it all out ;)

[szimek]

For anyone else using pathPrefix option maybe this will help. I wrote a very simple server using express:

/* eslint import/no-extraneous-dependencies: off */
const chalk = require('chalk');
const express = require('express');
const morgan = require('morgan');
const path = require('path');

const locale = process.env.GATSBY_APP_LOCALE;
const pathPrefix = `/${locale}/blog`;
const app = express();

// Log requests
app.use(morgan('common'));

// Serve static files with path prefix
app.use(pathPrefix, express.static(path.join(__dirname, '..', 'public')));

// Redirect / to path prefix
app.get('/', (req, res) => res.redirect(`${pathPrefix}/`));

app.listen(3000, () =>
  console.log(
    chalk.green(
      `\nServing on http://localhost:3000 with '${pathPrefix}' prefix\n`,
    ),
  ),
);

I don't know if it's possible to somehow get pathPrefix value from the built Gatsby app, so I'm repeating here the logic I got in gatsby-config.js for setting it.

I added it as serve script in package.json file:

"serve": "GATSBY_APP_LOCALE=${GATSBY_APP_LOCALE:=en} node scripts/serve.js"

[KyleAMathews]

To make this work, gatsby serve would need to know somehow that the site was built w/ gatsby build --prefix-paths — we don't have a reliable way to do that atm.

[jdfm]

I've added a few lines in my package.json to move the contents of the public folder of my gatsby project to the folder structure indicated in my pathPrefix configuration. This kinda works. It would be more useful if the serve command then generated a link by default pointing to that path (ergo http://localhost:9000/myPathPrefix/).

[danoc]

@DSchau fixed this in https://github.com/gatsbyjs/gatsby/pull/8060. :tada:

[DSchau]

@danoc hey thanks for closing! Whoops on my behalf for missing closing it out!

[szimek]

@DSchau I had no idea it's fixed. Thanks!