Can I prefix generated assets path with a different hostname?

[gniquil]

Hi All,

Is there a way to prefix generated assets path with a different hostname? For example, in one of my generated html page:

<script src="/webpack-runtime-9218435a32b25df1b08e.js" async=""></script>

I would like to make it:

<script src="https://123123123.cloudfront.net/webpack-runtime-9218435a32b25df1b08e.js" async=""></script>

Is this possible? I tried prefixPath, but it doesn't work. The reason I want to do this is I have a rails app. For certain pages I am using reverse proxy to host the pages. For example:

www.example.com/promo1 <- proxied from -< 1231232.cloudfront.net/anotherpage (generated by Gatsby)

While the html part of the page works, all the assets in the html, without the hostname prefix, will be coming from www.example.com. This is a lot less than ideal as I would like to directly fetch it from cloudfront.

In rails, for assets, we can configure the asset host to be something other than the main site. Can this be done in Gatsby?

[gniquil]

Hi All,

Here's something really hacky but seems to work.

// gatsby-ssr.js

const modifyPrefix = comp => {
  if (comp.props && comp.props.href) {
    return {
      ...comp,
      props: {
        ...comp.props,
        href: `${HOSTNAME}${comp.props.href}`,
      },
    }
  } else if (comp.props && comp.props.src) {
    return {
      ...comp,
      props: {
        ...comp.props,
        src: `${HOSTNAME}${comp.props.src}`,
      },
    }
  } else {
    return comp
  }
}

export const onPreRenderHTML = ({
  getHeadComponents,
  replaceHeadComponents,
  getPreBodyComponents,
  replacePreBodyComponents,
  getPostBodyComponents,
  replacePostBodyComponents,
}) => {
  replaceHeadComponents(getHeadComponents().map(modifyPrefix))
  replacePreBodyComponents(getPreBodyComponents().map(modifyPrefix))
  replacePostBodyComponents(getPostBodyComponents().map(modifyPrefix))
}

and

exports.onCreateWebpackConfig = ({ actions, getConfig, stage }) => {
  if (stage === 'build-html' || stage === 'build-javascript') {
    const config = getConfig()

    actions.replaceWebpackConfig({
      ...config,
      output: {
        ...(config.output || {}),
        publicPath: `${HOSTNAME}/`,
      },
    })
  }
}

Is this something ok to do?

[gniquil]

Hi All,

Reporting back. So the above code (at least the gist is right) mostly works... except 1 file so far:

/static/d/829/path---homepage-0-aef-NZuapzHg3X9TaN1iIixfv1W23E.json

Does this file look familiar to you? It's the pageContext file. Reading through some other threads, it seems this is not gonna be used. So with my reverse proxy setting /static/d/... to proxy that remaining file, the whole thing is working!

After reading some more, it seems in order to get this to really work, we need to get gatsby-script-loader to recognize that the asset is hosted under some other domain (I might have just yapped some gibberish here). Any pointers?

Finally, as a bit of proposal, if we were to add this bit of functionality, I think perhaps, in the gatsby-config.js, we could add 1 more variable, assetOrigin or something like that (e.g. "https://123123123.cloudfront.net", default to ""). With this setting, all asset paths would be prepended with this, while Link behave as normal (this would also override the webpack publicPath config).

This way, one could host the generated site somewhere and be able to proxy the site under some other domain (of course with CORS properly setup), while taking advantage of the assets being served from the origin, which would likely be much faster. With the combination of pathPrefix, this would give us a lot more flexibility in terms of deployment.

The biggest issue I am trying to solve is to allow people with an old school app (Rails/Django) to introduce gatsby into the mix, starting with blog or doc pages.

[sidharthachatterjee]

Hey @gniquil

Thank you for opening this and digging around. @DSchau is working on adding support for this in #10933.

Closing this issue for the moment since it is a duplicate of #8833 but please feel free to follow along the conversation there!