Gatsby: pathPrefix not working after building and serving Gatsby site

[jfarris587]

Description

Problem when using pathPrefix option in gatsby-config when serving the build.

The goal is to have a gatsby app, that builds, and the build is then served from an (express) app. You would have the main express app serving a static page, called page-2 (the gatsby page) at www.myapp.com/banana/page-2.

Due to banana there is a pathPrefix of "/banana" added to the config. The build then uses gatsby build --prefix-paths to utilize this.

Steps to reproduce

Demo Repo: https://github.com/jfarris587/gatsby-demo

A):

• Clone the repo
• run yarn build and then yarn serve
• Go to localhost:9000
• Attempt to navigate
• Attempt to go to localhost:9000/page-2
• Try and click the text to trigger alert

B):

• Change build script to normal yarn gatsby build
• Remove pathPrefix from gatsby-config file
• Repeat steps above

Expected result

I should be able to go to the home page, navigate to the other page and click the text to see the javascript working.

Actual result

Trying (A): You will notice that going to the home page works, but clicking the link takes you to unknown page. However, if you go to /page-2 directory with no "banana" prefix, then it takes you to the page.... But the javascript doesn't work. When clicking the h3 an onClick fires to alert you...

Trying (B): You will get the expected behavior, but it doesn't utilize a prefix, which is needed for serving page-2 from an express app

Notice that yarn Dev in Chrome does work. (IE seems to have seperate polyfill issue in development mode). However, serving the build gives above problems

[wardpeet]

Jawza, you're running old gatsby dependencies

You probably want to consider yarn upgrade or npm update depending on which package manager you like. Doing 2 builds and gatsby serve wouldn't work as path-prefix doesn't create any folders for you in public. The idea is that you deploy public to the correct directory on the server. To mimic this behaviour you can try the following.

A):

• Clone the repo
• run yarn build
• move public to a temporary folder banana (mv public/ banana/)

B):

• Change build script to normal yarn gatsby build
• Remove pathPrefix from gatsby-config file
• run yarn build
• move your temporary folder into public under the banana namespace (mv banana/ public/banana/
• run yarn serve
• Go to localhost:9000
• Attempt to navigate
• Try and click the text to trigger alert

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contributefor more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[spam-n-eggs]

I am also experiencing this issue hosting on GitHub static pages. I set up a git repository at https://gitlab.com/spam-n-eggs/pathprefixissue to reproduce it. This site should be hosted at https://spam-n-eggs.gitlab.io/pathprefixissue but is not being found.

System:
    OS: macOS 10.14.5
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.4.0 - ~/.nvm/versions/node/v12.4.0/bin/node
    npm: 6.9.0 - ~/.nvm/versions/node/v12.4.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/local/bin/python
  Browsers:
    Chrome: 75.0.3770.142
    Firefox: 66.0.4
    Safari: 12.1.1
  npmPackages:
    gatsby: ^2.13.39 => 2.13.39
  npmGlobalPackages:
    gatsby-cli: 2.7.19

[spam-n-eggs]

I tested this again with my reproduction site, and it appears to now be working. I will slowly start adding components until this issue is again reproducible.

[wardpeet]

Thank you for opening this, @jfarris587

We're marking this issue as answered and closing it for now but please feel free to reopen this and comment if you would like to continue this discussion. We hope we managed to help and thank you for using Gatsby! 💜

[yugandhar-pathi]

If anyone coming here like me ..after building your application with --prefix-paths serve your site also with --prefix-paths !
Modify your scripts in package.json as
"serve": "gatsby serve --prefix-paths -o",

[ramrock93]

If anyone coming here like me ..after building your application with --prefix-paths serve your site also with --prefix-paths !
Modify your scripts in package.json as
"serve": "gatsby serve --prefix-paths -o",

Thanks man! Solved my problem. It's not specified in the docs