App version from package.json with React and Webpack

3 min readDec 14, 2020

Before we start

Hi guys! It’s my first article ever. Moreover, I’m not a native English speaker. So, do not judge me very strictly. Just give me a chance and enjoy.

What is the problem

Some time ago, UX designer at my current company provided me new mockups of our application with new header. It had one new feature — label with app version. The place we store it is package.json file and we need to extract it somehow. So, let’s solve this small challenge together!

What we have

React application
TypeScript
Webpack
Version of application in package.json

Solution

Init project

First of all, let’s create simple React application with TypeScript and Webpack:

npm init -y

Add following dependencies into package.json:

{
  "name": "medium-version",
  "version": "0.1.0",
  "description": "",
  "private": true,
  "scripts": {
    "start": "webpack serve"
  },
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "awesome-typescript-loader": "^5.2.1",
    "css-loader": "^5.0.1",
    "html-webpack-plugin": "^4.5.0",
    "mini-css-extract-plugin": "^1.3.3",
    "source-map-loader": "^1.1.3",
    "typescript": "^4.0.3",
    "webpack": "^5.10.1",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

and install them:

npm i

Create Webpack configuration webpack.config.js:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
var webpack = require("webpack");module.exports = {
  entry: "./src/index.tsx",
  target: "web",
  mode: "development",
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "bundle.js",
  },
  resolve: {
    extensions: [".js", ".jsx", ".json", ".ts", ".tsx"],
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        loader: "awesome-typescript-loader",
      },
      {
        enforce: "pre",
        test: /\.js$/,
        loader: "source-map-loader",
      },
      {
        test: /\.css$/,
        loader: "css-loader",
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "index.html"),
    }),
    new MiniCssExtractPlugin({
      filename: "./src/index.css",
    }),
  ],
};

Let’s create some a simple code in order to show `Hello world` in App.tsx:

import React from "react";function App() {
  return (
    <div>Hello, World!</div>
  );
}export default App;

Now you can run our application and open it in http://localhost:8080:

npm run start

Extract version

In order to extract version of our application from package.json, we need to add following plugin into our webpack.config.js:

new webpack.DefinePlugin({
  VERSION: JSON.stringify(require("./package.json").version),
}),

As you can see, this plugin takes package.json file as a string, converts it into JSON object and define new global variable VERSION as value of version property.

Now, we can call it in our App.tsx like this:

import React from "react";declare const VERSION: string;function App() {
  let versionToDisplay = "unknown";
  try {
    versionToDisplay = VERSION;
  } catch (error) {
    console.log("Cannot get version of application.");
  }
  return (
    <div>{`Version: ${versionToDisplay}`}</div>
  );
}export default App;

We’ve done it!

Conclusion

As a conclusion just let me provide a link to my GitHub repository. I think, it more useful than many words. Thanks for your attention.