CODEWITHSUNDEEP
reactjscreate-react-appesp32spiffs
user2741831
user2741831

Reputation: 2408

Shorten file names in React build directory to less than 32 chars

This is going to sound really dumb but I need a way to shorten file names of my React build folder because I need to upload my React app to a SPIFFS file system on an ESP32 that only supports file names up to 32 characters (including folders).

I think an easy way would be to get rid of the hashes at the end of the files but I don't know how to do that.

So how can I shorten the file names of a React app?

Upvotes: 3

Views: 518

Answers (2)

Zac Anger
Zac Anger

Reputation: 7787

Firstly, don't get rid of hashes entirely, they're incredibly useful for cache invalidation. I also recommend not starting your own build from scratch unless you know what you're doing; CRA is really good at this stuff, even if it does throw in a bunch of stuff you probably will never use. (Vite templates are also a good solution, see the other answer and especially the comments there).

If you're set on using CRA, first run npm run eject. This means you'll now be in charge of your own config rather than relying entirely on create-react-app, but you need this to change your Webpack config (or you could use react-app-rewired, customize-cra, or some other similar option).

Change the output to use a shorter contenthash (maybe 4) and change out [name] for something shorter, like the result of a random character generator that only returns two chars. If you always just produce one bundle, use a static name rather than something dynamic (in brackets). If you don't want chunks, delete the chunk related config.

And if you want the simplest possible solution, still start from create-react-app and ejecting, but change all of output to something like this:

const crypto = require('crypto')
const id = crypto.randomBytes(2).toString('hex')
output: {
  filename: `x.${id}.js`
}

And definitely gzip the output, with a Make target or shell script or a package.

Upvotes: 2

par
par

Reputation: 17734

I used vite with preact to create my React for ESP32 project (npm create vite@latest my_project --template preact). vite uses rollup as it's bundler and rollup has simple configuration options to change its bundling strategy.

To create filenames compatible with ESP32 SPIFFS (i.e. the full path not longer than 31 characters), I used the following config options in vite.config.js:

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        assetFileNames: "a/[hash:10][extname]",
        chunkFileNames: "c/[hash:10].js",
        entryFileNames: "e/[hash:10].js"
      }
    }
  },
  ...

You can read about the rollup configuration options here.

Upvotes: 1

Related Questions