how to clean assets AFTER build

[davidrojo]

Hello, I have an application that uses webpack in production to generate the js/css assets.

This assets are built in production as the user can edit the scss files to customize the application and generate a custom css.

The problem is that with the function cleanupOutputBeforeBuild() the assets are removed and then built again, and while building the assets, the page fails loading as the manifest.json has been removed and until it is built again the page doesn't load.

Is there a way to build the new assets and after the assets are built remove the old assets? so there will not be a downtime while the new assets are being built and the page would load the old assets until the new assets are ready.

[stof]

Even if cleaning old files is done after the build, your process will still cause other issues, because the new files won't all be written at the same time (and I'm not even counting the case of failed builds). My suggestion would be to use a different destination folder for the new build. And once the build is done, swap the live directory from the old one to the new one (the easy way to achieve this is to make your web-visible folder a symlink to the actual output folder). This way, you can deploy the new build atomically (when swapping the symlink), and it also solves the case of failed builds (well, it avoids loosing the old assets, but reporting the failure to the relevant user is still to be done).

The tree cool look like that:

project_root/
├─ public/
│    └─ build    ->  ../dist/2020-05-23/build
└─ dist/
    ├─ 2020-05-23/ # or whatever naming you want for each build
    │    └─ build/
    └─ 2020-05-26/
         └─ build/

Encore would write to the new dist/*/build folder, while EncoreBundle and nginx would be reading files through public/build/

[davidrojo]

Hi @stof, I have enabled versioning so the files are generated with a hash, that should avoid rewriting the same file. And having some files built and some files still building, while the manifest.json is not rewrite, shouldn't be an issue as the users will be loading the previous version files identified in manifest.json, isn't it?

When all files are built, webpack will write the manifest.json with the updated files/versions, and then the customers will load the new files, if some files hasn't change, they will maintain the same hash, so the customers will load the cached version in their browsers.

Currently, I've build a command in Symfony, that reads manifest.json and removes all files in public/build that are not present in the manifest.json, but I think that this could be done in Encore adding an option cleanupOutputAfterBuild that instead of removing all files, removes the ones that are not present in manifest.json

[stephanvierkant]

I've created such a command as well. An option like cleanupOutputAfterBuild should really be there.

See also https://stackoverflow.com/questions/68595570/asset-management-with-webpack-encore-in-my-symfony-project