DEV - Improve bundling and release

.github/ISSUE_TEMPLATE/release.md

@@ -22,11 +22,11 @@ Release captain responsible - <@gh_username>
 
 ### 2. Prepare the codebase for a new release
 
-- [ ] Create a new git branch for the release `git checkout -b release-2023.9.1`
+- [ ] Create a new git branch for the release `git checkout -b release-2024.9.1`
   - [ ] Prepare the branch just in case `git clean -fxdq`
 - [ ] Bump `conda-store-ui` version in `package.json`
-- [ ] Follow the manual release instructions in the Release.md file (do not make the release yet!)
-- [ ] Make a release commit: `git commit -m 'REL - 2023.9.1'`
+- [ ] Follow the manual release instructions in the `Release.md` file (do not make the release yet!)
+- [ ] Make a release commit: `git commit -m 'REL - 2024.9.1'`
 - [ ] Push the release (REL) commit
 - [ ] If a **release candidate** is needed, tick this box when we're ready for a full release.
 

.github/workflows/build.yml

@@ -33,7 +33,8 @@ jobs:
         run: yarn run build
 
       - name: "Build application artifacts 🏗"
-        run: yarn run webpack bundle
+        # ensure we use the prod target to minimise assets
+        run: yarn run webpack:prod bundle
 
       - name: "Upload artifacts 📤"
         uses: actions/upload-artifact@v3

RELEASE.md

@@ -1,25 +1,32 @@
 # Manual release process
 
-1. Create a new branch for the release `git checkout -b release-2023.9.1`
-2. Clean the branch `git clean -fxdq`
-3. Increment version in `package.json`
-4. Build the package locally:
+1. Open a new release issue in the repository, following the [release issue template](../.github/ISSUE_TEMPLATE/release.md).
+1. Create a new branch for the release `git checkout -b release-2024.9.1`
+1. Clean the branch `git clean -fxdq`
+1. Increment the version in `package.json`
+1. Build the package locally:
 
    ```bash
    yarn install
 
    # build the package
    yarn run build
 
-   # for the browser bundle
-   yarn run webpack bundle
+   # for the browser bundle - this will generate a dist directory for the
+   # compiled assets, by using the prod target we ensure assets will be
+   # optimised accordingly, you can check the contents in the /dist directory
+   yarn run webpack:prod bundle
 
    # pack the bundle
    yarn pack --filename conda-store-ui.tgz
 
    ```
 
-5. Perform a local dry run publish:
+> [!IMPORTANT]  
+> You need to be logged in to the npmjs registry to publish the package.
+> And have access to the conda-store npm namespace.
+
+1. Perform a local dry run publish:
 
    ```bash
    # dry run publish to npmjs
@@ -30,25 +37,25 @@ If the dry run looks good, continue with the release checklist items.
 
 ## Troubleshooting notes
 
-* If there are issues with the [GitHub Release UI](https://github.com/conda-incubator/conda-store-ui/releases/new), ensure that whatever code you published is checked into git, then tag and push the commit and tag:
+- If there are issues with the [GitHub Release UI](https://github.com/conda-incubator/conda-store-ui/releases/new), ensure that whatever code you published is checked into git, then tag and push the commit and tag:
 
-   ```bash
-   # use the same version here as in package.json, but without a leading `v`
-   git tag -a YYYY.M.ReleaseNumber
+  ```bash
+  # use the same version here as in package.json, but without a leading `v`
+  git tag -a YYYY.M.ReleaseNumber
 
-   # push to upstream
-   git push && git push --tags
-   ```
+  # push to upstream
+  git push && git push --tags
+  ```
 
-* In case the [Release GitHub Actions workflow][release-action] fails, publish to npmjs manually. You need access to the [conda-store-ui npm package][cs-ui-npm] for this:
+- In case the [Release GitHub Actions workflow][release-action] fails, publish to npmjs manually. You need access to the [conda-store-ui npm package][cs-ui-npm] for this:
 
-   ```bash
-   # you likely need to login first
-   # npm login --registry https://registry.npmjs.org --scope @conda-store-ui
+  ```bash
+  # you will need to login first - and have access to the npm namespace
+  # npm login --registry https://registry.npmjs.org --scope @conda-store-ui
 
-   # publish release to npmjs
-   npm publish --verbose --access public conda-store-ui.tgz
-   ```
+  # publish release to npmjs
+  npm publish --verbose --access public conda-store-ui.tgz
+  ```
 
 <!-- Link -->
 

docker/assets/conda_store_config.py

@@ -53,7 +53,7 @@
 c.CondaStoreServer.authentication_class = DummyAuthentication
 c.CondaStoreServer.template_vars = {
     "banner": '<div class="alert alert-danger" role="alert">This is a localhost server</div>',
-    "logo": "https://quansight.com/_next/image?url=https%3A%2F%2Fa.storyblok.com%2Ff%2F147759%2F1076x520%2Fe6cd6af012%2Fquansight-logo-no-tagline.png&w=3840&q=75",
+    "logo": "https://raw.githubusercontent.com/conda-incubator/conda-store/main/docusaurus-docs/static/img/conda-store-logo-horizontal-lockup.svg",
 }
 
 # ==================================

package.json

@@ -21,7 +21,7 @@
     "start:services": "docker compose up -d",
     "start:ui": "REACT_APP_VERSION=$npm_package_version webpack server --history-api-fallback",
     "start:chromium": "webpack serve --open 'chromium'",
-    "start:prod": "NODE_ENV=production webpack serve",
+    "start:prod": "yarn run start:services && REACT_APP_VERSION=$npm_package_version NODE_ENV=production webpack serve",
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build",
     "test": "jest --coverage",
@@ -133,6 +133,8 @@
     "rimraf": "^3.0.2",
     "source-map-loader": "^3.0.1",
     "storybook": "^8.0.4",
+    "style-loader": "^4.0.0",
+    "terser-webpack-plugin": "^5.3.10",
     "ts-loader": "^8.0.17",
     "typescript": "^4.6.3",
     "webpack": "^5.72.0",

tsconfig.eslint.json

@@ -1,7 +1,4 @@
 {
   "extends": "./tsconfig",
-  "include": [
-    "src/**/*",
-    "test/**/*",
-  ]
+  "include": ["src/**/*", "test/**/*"]
 }

webpack.config.js

@@ -1,74 +1,105 @@
 /*
- * Copyright (c) 2022,  Quansight
+ * Copyright (c) 2020, conda-store development team
  *
- * This file is part of the tree-finder library, distributed under the terms of
- * the BSD 3 Clause license. The full license can be found in the LICENSE file.
+ * This file is distributed under the terms of the BSD 3 Clause license. 
+ * The full license can be found in the LICENSE file.
  */
-const HtmlWebpackPlugin = require("html-webpack-plugin");
+
 const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
 const Dotenv = require("dotenv-webpack");
 const webpack = require("webpack");
 
-// const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
-// To improve build times for large projects enable fork-ts-checker-webpack-plugin
-// const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
+const isProd = process.env.NODE_ENV === "production";
+const ASSET_PATH = isProd ? "" : "/";
 
-const {
-  dependencySrcMapRules,
-  stylingRules,
-  svgUrlRules,
-  getContext,
-  getOptimization,
-  getResolve,
-  tsRules
-} = require("./webpack.rules");
+// Calculate hash based on content, will be used when generating production 
+// bundles
+const cssLoader = {
+  loader: "css-loader",
+  options: {
+    modules: {
+      auto: true,
+      localIdentName: isProd ? "[hash:base64]" : "[name]__[local]--[hash:base64:5]",
+    },
+  },
+};
 
-const isProd = process.env.NODE_ENV === "production";
+const rules = [
+  {
+    test: /\.js$/,
+    use: "source-map-loader",
+    enforce: "pre",
+    exclude: /node_modules/,
+  },
+  {
+    test: /\.(css|less)$/,
+    use: [
+      isProd ? MiniCssExtractPlugin.loader : "style-loader",
+      cssLoader,
+      "less-loader",
+    ],
+  },
+  {
+    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
+    type: "asset",
+    parser: {
+      dataUrlCondition: {
+        maxSize: 10 * 1024, // 10kb
+      },
+    },
+  },
+  {
+    test: /\.tsx?$/,
+    exclude: /node_modules/,
+    use: [
+      {
+        loader: "ts-loader",
+        options: {
+          transpileOnly: true,
+          experimentalWatchApi: true,
+        },
+      },
+    ],
+  },
+];
 
-const basicConfig = {
+module.exports = {
+  mode: isProd ? "production" : "development",
+  // generate a sourcemap for production, in dev we generate mapping faster
+  devtool: isProd ? "source-map" : "eval-cheap-module-source-map",
   devServer: {
     port: 8000,
+    // enable hot module replacement
+    hot: true,
   },
-  devtool: isProd ? false : "source-map",
   entry: ["src/index.tsx", "src/main.tsx"],
-  watch: false,
-  ...getContext(__dirname),
-
   output: {
     path: path.resolve(__dirname, "dist"),
-    filename: "[name].js",
-    publicPath: "/"
-  },
-
-  module: {
-    rules: [
-      ...dependencySrcMapRules,
-      ...stylingRules,
-      ...svgUrlRules,
-      ...tsRules,
-    ]
+    filename: isProd ? "[name].[contenthash].js" : "[name].js",
+    publicPath: ASSET_PATH,
+    clean: true,
   },
-
+  module: { rules },
   resolve: {
-    ...getResolve(__dirname)
+    modules: ["node_modules", path.resolve(__dirname)],
+    extensions: [".tsx", ".ts", ".jsx", ".js", ".less", ".css"],
   },
-
   plugins: [
-    new HtmlWebpackPlugin({
-      title: "conda-store"
+    new HtmlWebpackPlugin({ title: "conda-store" }),
+    new MiniCssExtractPlugin({
+      filename: isProd ? "[name].[contenthash].css" : "[name].css",
     }),
-    new MiniCssExtractPlugin(),
     new Dotenv(),
-    new webpack.EnvironmentPlugin(['REACT_APP_VERSION'])
+    new webpack.EnvironmentPlugin(["REACT_APP_VERSION"]),
+    new webpack.ids.HashedModuleIdsPlugin(),
   ],
-
-  mode: isProd ? "production" : "development",
-
   optimization: {
     minimize: isProd,
-    ...(isProd && getOptimization())
-  }
-};
-
-module.exports = [basicConfig];
+    minimizer: [new TerserPlugin(), new CssMinimizerPlugin()],
+    runtimeChunk: "single",
+  },
+};