gatsby-plugin-netlify output file prefixes assetPath on page urls

[tbrannam]

Description

Update - I missed the fact that assetPath is expected to by a url and not just a path - I think the key question stands - should page urls have a assetPath prefix?

When trying to segment the hosting of pages vs CDN assets using the gatsby-config#assetPath feature, the plugin gatsby-plugin-netlify outputs file prefixes assetPath on page URLs.

I believe that assetPrefix is only supposed to apply to the CSS and JS assets built by Gatsby. In this case, the plugin behavior seems to be treating the assetPrefix more like the pathPrefix configuration option. I would expect that the HTML page references listed in _headers would not contain the assetPrefix

The path for /page-2/ is the test page shown below.

See codesandbox: https://codesandbox.io/s/gatsby-netlify-asset-prefix-jd5rc?file=/gatsby-config.js

• What is the behavior of pages and assetPath in _headers
• Secondary issue - should the assets listed (e.g. /app-140865cdb6a305440c80.js) contain the prefix for their cache-control settings?

Steps to reproduce

Create starter project
add gatsby-plugin-netlify
add plugin to gatsby-config.js
define assetPrefix to gatsby-config.js
yarn gatsby build --prefix-paths to produce a ./public build with a _headers output file
cat ./public/_headers

Expected result

File reduced for brevity

sandbox@sse-sandbox-jd5rc:/sandbox$ cat public/_headers
## Created with gatsby-plugin-netlify

/*
  X-Frame-Options: DENY
  X-XSS-Protection: 1; mode=block
  X-Content-Type-Options: nosniff
  Referrer-Policy: same-origin
/styles.9b4500260357dc3df222.css
  Cache-Control: public, max-age=31536000, immutable
/app-140865cdb6a305440c80.js
  Cache-Control: public, max-age=31536000, immutable
/static/*
  Cache-Control: public, max-age=31536000, immutable
/sw.js
  Cache-Control: no-cache
/page-2/
  Link: </customAssetPrefix/webpack-runtime-81ef2531a159eeb14db3.js>; rel=preload; as=script

Actual result

File reduced for brevity - note entry /customAssetPrefix/page-2/ second from last line

sandbox@sse-sandbox-jd5rc:/sandbox$ cat public/_headers
## Created with gatsby-plugin-netlify

/*
  X-Frame-Options: DENY
  X-XSS-Protection: 1; mode=block
  X-Content-Type-Options: nosniff
  Referrer-Policy: same-origin
/styles.9b4500260357dc3df222.css
  Cache-Control: public, max-age=31536000, immutable
/app-140865cdb6a305440c80.js
  Cache-Control: public, max-age=31536000, immutable
/static/*
  Cache-Control: public, max-age=31536000, immutable
/sw.js
  Cache-Control: no-cache
/customAssetPrefix/page-2/
  Link: </customAssetPrefix/webpack-runtime-81ef2531a159eeb14db3.js>; rel=preload; as=script

Environment

  System:
    OS: Linux 5.4 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
    Shell: 5.0.3 - /bin/bash
  Binaries:
    Node: 10.21.0 - /tmp/yarn--1600121216071-0.06585737032944339/node
    Yarn: 1.22.4 - /tmp/yarn--1600121216071-0.06585737032944339/yarn
    npm: 6.14.4 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    gatsby: ^2.24.54 => 2.24.54
    gatsby-image: ^2.4.17 => 2.4.17
    gatsby-plugin-manifest: ^2.4.28 => 2.4.28
    gatsby-plugin-netlify: 2.3.14 => 2.3.14
    gatsby-plugin-offline: ^3.2.27 => 3.2.27
    gatsby-plugin-react-helmet: ^3.3.10 => 3.3.10
    gatsby-plugin-sharp: ^2.6.32 => 2.6.32
    gatsby-source-filesystem: ^2.3.28 => 2.3.28
    gatsby-transformer-sharp: ^2.5.14 => 2.5.14

[tbrannam]

Additional detail. If both assetsPrefix and pathPrefix are set on page URLs (e.g. /assetprefix/pathprefix/page-slug) - note that rendered HTML markup is referenced as /pathprefix/page-slug

It would appear to me that the asset prefix should not be on the page URL reference, but should be referenced in the link headers.

/*
  X-Frame-Options: DENY
  X-XSS-Protection: 1; mode=block
  X-Content-Type-Options: nosniff
  Referrer-Policy: same-origin
/component---src-templates-404-tsx-2a05eb0ca242f535506d.js
  Cache-Control: public, max-age=31536000, immutable
/webpack-runtime-8bd73894f219c0423983.js
  Cache-Control: public, max-age=31536000, immutable
/styles.bd1071ee4427f6b487f2.css
  Cache-Control: public, max-age=31536000, immutable
/styles-53aa9d4f42ead6242a9b.js
  Cache-Control: public, max-age=31536000, immutable
/framework-9d3734cf067746fe215a.js
  Cache-Control: public, max-age=31536000, immutable
/app-f76cd9017301b08aea25.js
  Cache-Control: public, max-age=31536000, immutable
/static/*
  Cache-Control: public, max-age=31536000, immutable
/sw.js
  Cache-Control: no-cache
/assetprefix/pathprefix/page-slug
  Link: </assetprefix/pathprefix/webpack-runtime-8bd73894f219c0423983.js>; rel=preload; as=script
  Link: </assetprefix/pathprefix/styles-53aa9d4f42ead6242a9b.js>; rel=preload; as=script
  Link: </assetprefix/pathprefix/framework-9d3734cf067746fe215a.js>; rel=preload; as=script
  Link: </assetprefix/pathprefix/app-f76cd9017301b08aea25.js>; rel=preload; as=script
  Link: </assetprefix/pathprefix/component---src-templates-404-tsx-2a05eb0ca242f535506d.js>; rel=preload; as=script
  Link: </assetprefix/pathprefix/page-data/app-data.json>; rel=preload; as=fetch; crossorigin
  Link: </assetprefix/pathprefix/page-data/nl/nl/404/page-data.json>; rel=preload; as=fetch; crossorigin

[cameronmcefee]

To add a bit of community urging, I discovered this on our site, because gatsby-plugin-mdx uses pathPrefix on absolute urls in links. We have assetPrefix set which was the appearing in our links, breaking them. This is nothing different than what you've said, but our case when assetPrefix is https://mysite.com/_assets/, the following link [my link](/hello-world/) becomes <a href="https://mysite.com/_assets/hello-world/">my link</a>

There is a similarly bewildered issue in #21462. It seems as though this has been the behavior from the start, wherein assetPrefix is joined with pathPrefix when getting the public path, which seems the opposite of what I'd expect based on the naming. https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/get-public-path.ts#L15-L22. Perhaps @DSchau who added the original version can shed some light on why it's this way? I'm wondering if maybe this is as designed and the actual problem lies upstream in whatever is using getPublicPath with the asset prefix.

[DSchau]

@cameronmcefee hello!

It is very hard to get to the root of the issue, unless there's something "I" (aka the Gatsby team) can play around with. (aka reproduction super appreciated and valuable!)

In general, yes, assetPrefix (which I helped build!) was intended to be a full URL, a la the intended use case was for users of Gatsby who want to host their assets (basically, everything besides HTML) on a longer-lived CDN, whereas just the HTML can be deployed separately.

Mostly, yes, this was how it was designed, but I'm curious -- it doesn't seem like the issue is the order here (correct me if I misstate) but rather the fact that the MDX plugin seems to be treating links to HTML as if they needed to include an asset prefix, when they (in this case?) in fact don't?

(I actually think your issue @cameronmcefee is probably the same as #21462 based on what you've said!)

[cameronmcefee]

Thanks for the 👀 @DSchau and sorry, I look like a rube. I opted for this thread since there are collaborators discussing the issue here, despite meta-issue being different.

Here's a reproducible case illustrating the issue: https://github.com/cameronmcefee/assetprefix-kerfuffle. I'm happy to take my discussion over to the other thread since the example is MDX. However. the topic itself I believe is the relationship between assetPrefix and pathPrefix which I suspect is also what is happening in this thread.

---

Edit: upon further investigation, in my example I discovered that the property pathPrefix which is available in the onPostBuild handler is actually assetPrefix (so far as I can tell). While this is confusing and I'd argue should be changed if this is correct, it is not likely related to this issue.

[ibrent]

I cannot get path prefix to work as directed on this page:
https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/

After CLEAN, all it does is move the static assets over to the subdir, but not the app level JS CSS etc. Those are all at the root and give a 404.

[wardpeet]

Closing as we don't own gatsby-plugin-netlify anymore