Hi, In this blog post, I will show the usage of a project that I recently created for web project maintenance. For projects that do not use a framework or library for development, it's difficult for them to manage and update versions. When we make changes in the project, it doesn't effect in the user's browser as the previous files are cached in the browser. So need to change the path of the modified files. But it's difficult if the number of files is large and we are not able to open each file and update the new path. So, we will use an auto version updater here to update the project.

Create sample project

For testing the auto version updater we need a project created in an organized way. For that, first, create a sample project.

Organizing Project Assets

Put all the web assets in a folder named assets or any other name that you want. Then create another folder inside the assets folder and rename the folder to the version specified name like v@0.01 or any-v@0.01 or anything similar to that. It's easy to rename that folder by just incrementing it. Anything you want to change in the future put in the version folder like some images, CSS styling, and JS scripting. Other assets that will remain the same, put them alongside the version folder.

Creating Project Files

Now, create project files. These files may be HTML, PHP, or any other language files. Don't put any project files in the assets folder. Add assets files path in the project files correctly, to use them. The structure of the sample project is given below.

sample-project-sample

Make changes in Changeable Content

Now, if we make changes in changeable content, then we need to rename the version folder from v@0.01 to v@0.02. Every time we make changes in changeable content, we need to increment the version folder name. Now, the path of the asset files becomes incorrect in the project files as they are using the previous folder name v@0.01. We need to update the asset files path by using the auto version updater.

Update Files Path using Auto Version Updater

Here, we will use an auto version updater to update the path of the asset files from v@0.01 to v@0.02. No matter, how many project files or sub-folders are available in the project. It will find and replace the version name anywhere, where it is needed.

Auto version updater has the following file structure.

auto-version-updater-file-structure

Add your app to the root folder of the version updater alongside version.json. Add the new and previous versions in the version.json file as given below and run the version updater.

{"app_version":{"new":"v@0.02","old":"v@0.01"}}

It will replace the previous version with the new version in the path of asset files.

assets/v@0.01/js/script.js => assets/v@0.02/js/script.js

So, the new version implemented throughout the whole project. Now, the user's browser thinks the updated assets are new files, so, the browser will load and use them. All the changes will show to the user without any issues.