Gatsby: pathPrefix not resolving correctly

[fredjens]

Description

When i add pathPrefix: '/sub-dir' to gatsby-config.js and runs gatsby build --prefix-paths it do not work correctly. It still find my index page on / when i run it both locally and on Netlify. It also try to look for resources js/css at /arranger/resourcename but it gets a 404.

The only thing in my project that is not like the example in the documentation is that i create all mye pages with createPage in gatsby-node.js. Could it be that pathPrefix does not support this?

Steps to reproduce

1. Create page with createPage
2. Add pathPrefix: '/sub-dir' to config
3. Build

Expected result

Site should be available at domain.com/sub-dir

Actual result

Index page is shown at domain.com with unavailable resources at domain.com/sub-dir

[fredjens]

Actually I am discovering on the production server (Netlify), the link resolving actually works. So if I click a link it goes to domain.com/sub-dir/link but there is nothing there it is under domain.com/link. Same with all assets, it tries to get it, but it's not there they are at the root level.

[pieh]

pathPrefix doesn't only means that links will be prefixed with it - your build still will be directly in public directory. It's up to you to put your files in correct "place" on the server/hosting.

[fredjens]

Ah, now I see, thanks!

[cvolant]

Hi!

I arrived here because I hit the same problem than fredjens. I read the responses, thought 'ok', set up Nginx to redirect localhost/blog to localhost:9000, but... I get a 404 no matter what url I try on the localhost.
Nginx config:
location /blog/ {
proxy_pass http://localhost:9000;
}
Gatsby config:
module.exports = {
pathPrefix: "/blog",
...
I tried with proxy_pass http://localhost:9000/blog but it's not better:
localhost/blog gives me a 404.

What's wrong?

---

(To figure this out, I try with the gatsby default starter.
I work on Ubuntu 19.04.)

[drav96]

Hi!

I arrived here because I hit the same problem than fredjens. I read the responses, thought 'ok', set up Nginx to redirect localhost/blog to localhost:9000, but... I get a 404 no matter what url I try on the localhost.
Nginx config:
location /blog/ {
proxy_pass http://localhost:9000;
}
Gatsby config:
module.exports = {
pathPrefix: "/blog",
...
I tried with proxy_pass http://localhost:9000/blog but it's not better:
localhost/blog gives me a 404.

What's wrong?

(To figure this out, I try with the gatsby default starter.
I work on Ubuntu 19.04.)

On localhost just run gatsby serve --prefix-pathsand it will work

[abeerk991]

Hello! Having the exact same issue as fredjens though I'm not sure I follow Pieh's recommendation. I've added pathPrefix: '/blog' to gatsby-config.js and am running the command gatsby build --prefix-paths when deploying on Netlify.
The site is still serving from domain.com though (instead of domain.com/blog) and clicking links goes to domain.com/blog/link where there's nothing (content remains on domain.com/link).

What am I missing here/what else do I need to be doing?

[edsu]

I landed here after noticing a similar problem with my build. But I then noticed that I had introduced some logic into the scripts stanza of my package.json that was accidentally calling gatsby build without using --prefix-paths. It's a long shot, but double and triple-check that you are actually using --prefix-paths in all cases.