Search code examples
reactjshttpdirectorywebservergatsby

Gatsby project inside a directory on webpack issues

I have a gatsby project and when I put it in the root of the domain it works just fine (e.g. abc.com). But if I place it under a directory (e.g. abc.com/myproj) then the webpack ect throwing 404 error as they are still referring to the root of the project.

Could this be fixed and make them look for all js files inside the myproj directory instead of looking at the root? enter image description here

is there any configurations I need to change it to work inside a directory under the root? Thanks in advance.

Solution

  • I think you are looking for path prefixing. Just add the following in your gatsby-config.js:

    module.exports = {
  pathPrefix: `/myproj`,
}

    To enable the full configuration you will need to tweak your build and serve command as:

    gatsby build --prefix-paths

    And:

    gatsby serve --prefix-paths

    In both cases, if the flag is not passed, Gatsby will ignore the pathPrefix.

    For pathnames you construct manually, there’s a helper function, withPrefix that prepends your path prefix in production (but doesn’t during development where paths don’t need to be prefixed).