Setting the /static path via environment variables?

[Pixelatex]

We can set the public folder path using the PUBLIC_URL but I need to change the static folder path. (out of my control but the hosted domain is not the same as the on that is serving it... blame our backend fellas for this)

So it's currently trying to get the assets from mysite.com/static/js/chunk.2323.js

While actually it should get it from somethingcomplete.different.co.au/random/static/js/chunk.2323.js

So basically, I need to replace everything before the /static. And this also needs to be handled by an env file. Is this even possible?

[yuuk]

any solution here?

[rafalp]

static/ seems to be hardcoded in webpack config, so only ways to go about this are to eject or use CRACO to monkeypatch webpack's config:

const MiniCssExtractPlugin = require("mini-css-extract-plugin")

module.exports = {
  webpack: {
    configure: (webpackConfig, { env, paths }) => {
      if (webpackConfig["mode"] !== "production") return webpackConfig

      // Namespace js files under "misago"
      webpackConfig.output.filename =
        "static/misago/js/[name].[contenthash:8].js"
      webpackConfig.output.chunkFilename =
        "static/misago/js/[name].[contenthash:8].chunk.js"

      // Same with media files
      webpackConfig.module.rules.forEach((ruleset) => {
        if (!ruleset.oneOf) return

        ruleset.oneOf.forEach((rule) => {
          if (rule.options && rule.options.name) {
            rule.options.name = rule.options.name.replace(
              "static",
              "static/misago"
            )
          }
        })
      })

      // And CSS files
      webpackConfig.plugins.forEach((plugin) => {
        if (!(plugin instanceof MiniCssExtractPlugin)) return

        plugin.options.filename =
          "static/misago/css/[name].[contenthash:8].css"
        plugin.options.chunkFilename =
          "static/misago/css/[name].[contenthash:8].chunk.css"
      })

      return webpackConfig
    },
  }
}

[jrejaud]

This worked for me, thank you!

I second craco in order to modify webpack without having to eject.
https://www.npmjs.com/package/@craco/

[prmichaelsen]

I may have found a better solution. From hashrocket:

When I build my CRA app I get a path for my assets (css, images) that begins with /static. If I deploy my app to https://something.com/myapp, then the app will try to access those asset paths at https://something.com/static/asset.css. That's not where the asset lives. The asset lives at https://something.com/myapp/static/asset.css.

Create React App allows you to change the prefix for a the built assets with the homepage attribute in your package.json file.

You could set it to myapp:

"homepage": "/myapp"

And then the asset will have the path of /myapp/static/asset.css

---

In my case, I made the following changes to my package.json:

  "homepage": "/search",
  "build": "react-scripts build && mkdir build/search && mv build/static build/search/static"

This is because I had an nginx reverse proxy serving /search to a different endpoint, so all my static assets had to be served from /search/static instead.