Generate build without hashed file names.

[lgomez]

Hi all,

I'm trying this project out to simplify work on a web app that's to be embedded into a hardware device. For reasons I have no control over, the "embed" team is requesting I commit builds without hashed names. Is there a way to disable hashed names completely for the build without having to eject? This is the only thing I need to override and ejecting for that one reason seems excessive.

In case it matters, I also don't need to distribute sourcemap files in the build.

I'm happy to contribute to the docs if there is a way to do this.

Thank you,

[gaearon]

This is not supported and it’s unlikely we would support it. Generating hashes is the right default for a vast majority of cases. If for some reason you’d rather not have them generated, you would need to maintain your own Webpack config.

As an alternative to ejecting, you can fork react-scripts: #779.

[lgomez]

Thank you. I wasn't expecting you to add it. Just wanted to know if perhaps it was supported.

Thanks for the suggestions. I'll look into it.

[jrzerr]

A different way to handle this is to do a rename as a part of your build process with a new npm run script so you don't have to do an eject. I used the renamer npm library to do this for me.

npm install --save-dev renamer

Then in package.json scripts section I added some rename helpers:

    "build-rename": "npm run build-rename-js && npm run build-rename-css",
    "build-rename-js": "renamer --regex --find 'main\\.[^\\.]+\\.js' --replace 'main.js' build/static/js/*.js",
    "build-rename-css": "renamer --regex --find 'main\\.[^\\.]+\\.css' --replace 'main.css' build/static/css/*.css",

then you can modify your build script to do the rename post-build like this:

"build": "react-scripts build && npm run build-rename",

Anyways, this is just one way to do it. You will give up source maps unless you do a search and replace inside the js file, but in your specific case of putting on a mobile device that probably doesn't matter.

[gaearon]

Note that this will break code splitting (i.e import('./module').then(...)) because the hardcoded JS path in the bundle will be wrong.

Having changing hashes makes working in Visual Studio projects a bit annoying as you can't just update the files, you have to add the new ones and delete the old ones from the project file.

Previously I dealt with cache busting on the chunk files like this in my webpack.config:

    output: {
      filename: 'main.js',
      chunkFilename: 'main.[id].js?v=[hash]',
    },

Then in my HTML template I would add a cache busting query string like so:
<script src="main.js?v<%=LastModified('main.js') %>"></script>

So adding an option to CRA to support something like this seems like a reasonably common use case.

[StefanSchoof]

Based on @jrzerr workaround, I added the replace inside the js and css file to get source maps working. For the change of the sourcemap url I used replace. I use this on a windows machine:

"scripts": {
    ...
    "build": "react-scripts-ts build&&npm run build-rename",
    "build-rename": "npm run build-rename-js&&npm run build-rename-css&&npm run build-fix-sourcemap",
    "build-rename-js": "renamer --regex --find \"main\\.[^\\.]+\\.\" --replace \"main.\" build\\static\\js\\*",
    "build-rename-css": "renamer --regex --find \"main\\.[^\\.]+\\.\" --replace \"main.\" build\\static\\css\\*",
    "build-fix-sourcemap": "npm run build-fix-sourcemap-js&&npm run build-fix-sourcemap-css",
    "build-fix-sourcemap-js": "replace \"# sourceMappingURL=main..*.js.map\" \"# sourceMappingURL=main.js.map\" build\\static\\js\\main.js",
    "build-fix-sourcemap-css": "replace \"# sourceMappingURL=main..*.map\" \"# sourceMappingURL=main.css.map\" build\\static\\css\\main.css"
  },

[marcoc1712]

@StefanSchoof 👍
It works, but you should replace css and js also in index.html and service-worker.js in the main directory.

[StefanSchoof]

@marcoc1712 Thanks for pointing this out. In my setup I embed js in a bigger site and have no need for these files.

[olgeorge]

@gaearon what's your suggestion on using hashed file names together with cached CDNs?

I'm using S3 to store the app and CloudFront as a CDN. When I deploy a new version, the files with old hashes are removed and new files are added. However, since CloudFront caches index.html, it points to old non-existent files until it refreshes the cache. Thus, I'm breaking the website with each build, and even if I manually refresh the cache, the website still might be down for some time until the cache is refreshed. I could store all prior versions on S3 instead of deleting them, but that doesn't seem like a good long-term solution either.

[Meemaw]

@olgeorge did you solve this?

[aftabnaveed]

I am using CRA for server side rendering along with Airbnb Hypernova. Because my backend server is not in NodeJS and I need to point to the css file from my backend APP. It is very annoying to keep updating the css paths, therefore, file without hashes should be supported.

[Sofianio]

Here's what i did:
in the file index.html
I get the bundle name from asset-manifest.json
then add the script with the bundle name

<script type="text/javascript">
        var bundle_name = "bundle.js"; // dev mode
        $.getJSON("/asset-manifest.json", function(json){ var bundle_name = json["main.js"]; })
        .always(function(){
            var bundle = document.createElement('script');
            bundle.setAttribute('type', "text/javascript");
            bundle.setAttribute('src', "/static/js/" + bundle_name);
            document.body.appendChild(bundle);
        });
</script>

[lisandrolan]

@Sofianio that solution helped you? I couldnt do that work! :(

[aftabnaveed]

I came up with a shell script which I execute instead of just yarn build

Place it in your site root to make it work. In my case the destination is ../../../public/js/main.js you may change it your desired destination.

#!/bin/bash
yarn build
cp -v build/static/js/main.*.js ../../../public/js/main.js
cp -v build/static/css/main.*.css ../../../public/css/main.css