Versioning for app's: best practice? [SOLVED]

[richb-hanover]

I am converting a small project to Snowpack. What a delight! It has been so straightforward (compared to all the copy/paste magic I had to do to make gulp work.)

I'm looking for advice about best practice for incorporating a "version number" into my app. The current app uses %%GULP_INJECT_VERSION%% to display the "version" property from package.json.

My question: Is there a best practice to get this effect with Snowpack? I could, of course, update manually, but wonder if there is some mechanism for retrieving version information from either the package.json or git tag or ... Thanks.

[winkler1]

Sounds like a plugin? https://www.snowpack.dev/guides/plugins. Something like-

// snowpack.config.json
{
  "plugins": [
    ["./InjectVersionPlugin.js",


// InjectVersionPlugin.js
let versionFromPackageJSON = "(todo)";
module.exports = function (snowpackConfig, pluginOptions) {
  return {
    name: 'inject-version-plugin',
    resolve: {
      input: ['.js'],
      output: ['.js'],
    },
    async transform({ id, contents, isDev, fileExt }) {
      if (fileExt === '.js') {
        return contents.replaceAll("%%GULP_INJECT_VERSION%%", versionFromPackageJSON);
      }
    },
  };
};

[FredKSchott]

Nice! Tip: resolve only needed if you have a load() function. transform() runs on everything!

Another idea: You could look at how our dotenv plugin works to add env variables to your build that you can reference in code via import.meta.env.GULP_INJECT_VERSION: https://github.com/snowpackjs/snowpack/blob/master/plugins/plugin-dotenv/plugin.js

[richb-hanover]

That looks pretty simple, even for a newbie. I'll do more reading and come back if I have more questions. Thanks for these speedy responses!

[richb-hanover]

I got it working. A plugin turns out to be pretty simple, only needing two things:

1. An entry in the plugins: property of thesnowpack.config.json file that specifies the path to the plugin .js file. This can be a file in the local repo, or read about publishing a plugin that can live elsewhere.
2. A javascript file that exports a function that (I believe) will be run against all files in the project.

Here's what worked for me:

// snowpack.config.js
plugins: [
    ... other plugin names ...
    ["./inject-version.js", {/* pluginOptions */ }],
    ... 

// ./inject-version.js - in the top-level directory of the repo
// Replace all occurrences of %%INJECTED_VERSION%%  in ".html" files with the package.json's version string
var packagejson = require('./package.json');
module.exports = function (snowpackConfig, pluginOptions) {
  return {
    name: 'inject-version',
    async transform({ id, contents, isDev, fileExt }) {
      if (fileExt === '.html') {
        return contents.replace(/%%INJECTED_VERSION%%/g, packagejson.version);
      }
    },
  };
}

Thanks for the help!

[FredKSchott]

Awesome! Glad you got something working

For anyone else, I'd still recommend our env variable support mentioned above: #2018 (reply in thread)

You can reference env variables in both JS & HTML: https://www.snowpack.dev/reference/configuration#environment-variables

[berlinshawn063]

Keep in mind to check version 5.3.22 against version 5.3.4. The major version 5 is the same, we continue. The minor version 3 is the same, we continue. The revision is 22 which is higher than 4, therefore 5.3.22 is newer than 5.3.4.

Let's check version 5.4.2 against version 5.3.4. The major version 5 is the same, we continue. The minor version 4 is higher than minor version 3, therefore 5.4.2 is newer than 5.3.4.

Always remember these steps as I always do in making apps, recently I did the same thing for baby jeeter pre rolls app!