DEV - Improve bundling and release (conda-incubator#418)

Co-authored-by: gabalafou <[email protected]>

.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.
 
@@ -39,6 +39,7 @@ Release captain responsible - <@gh_username>
   - Add release notes in the field below [^github-activity].
 - [ ] Confirm that the release completed
   - [The `release` GitHub action job](https://github.com/conda-incubator/conda-store-ui/blob/main/.github/workflows/release.yml) has been completed successfully in the [actions tab](https://github.com/conda-incubator/conda-store-ui/actions).
+- Once the release is completed open a PR to adjust the `version` in `package.json` to the next release-dev (e.g., `2023.9.1-dev`)
 - [ ] Celebrate, you're done! 🎉
 
 [^github-activity]: If you wish, use [`github-activity` to generate a changelog](https://github.com/choldgraf/github-activity), e.g. `github-activity conda-incubator/conda-store --since 2023.9.1 --until 2023.10.1`.

.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@v4

README.md

@@ -32,16 +32,24 @@ This guide will help you to set up your local development environment.
 
 Before setting up conda-store-ui, you must prepare your environment.
 
-We use [Docker Compose](https://docs.docker.com/compose/) to set up the infrastructure before starting ensure that you have Docker Compose installed. If you need to install Docker Compose, please see their [installation documentation](https://docs.docker.com/compose/install/)
+We use [Docker Compose](https://docs.docker.com/compose/) to set up the infrastructure. Before starting ensure that you
+have Docker Compose installed.
+If you need to install Docker Compose, please see their [installation documentation](https://docs.docker.com/compose/install/)
 
 1. Clone the [conda-store-ui](https://github.com/conda-incubator/conda-store-ui.git) repository.
-2. Copy `.env.example` to `.env`. All default settings should work, but if you want to test against a different version of conda-store-server, you can specify if in the `.env` file by setting the `CONDA_STORE_SERVER_VERSION` variable to the desired version. Refer to the [Configuration documentation](https://conda-incubator.github.io/conda-store-ui/?path=/docs/docs-configuration--page) for more information on the `.env` file.
+2. Copy `.env.example` to `.env`. All default settings should work, but if you want to test against a different version
+   of conda-store-server, you can specify if in the `.env` file by setting the `CONDA_STORE_SERVER_VERSION` variable to
+   the desired version.
+   Refer to the [Configuration documentation](https://conda.store/conda-store-ui/how-tos/configure-ui/) for more
+   information on the `.env` file.
 
 ### Local Development with conda-store-ui running in Docker 🐳
 
 Running conda-store-ui in Docker is the most straightforward way to set up your local development environment.
 
-1. Run `yarn install`. This will download the needed JavaScript dependencies into a directory named `node_modules/`. This directory will later be copied into the `conda-store-ui` Docker container for use at runtime by the Conda Store UI app.
+1. Run `yarn install`. This will download the needed JavaScript dependencies into a directory named `node_modules/`.
+   This directory will later be copied into the `conda-store-ui` Docker container for use at runtime by the Conda Store
+   UI app.
 2. Run `yarn run start:docker` to start the entire development stack.
 3. Open you local browser and go to [http://localhost:8000](http://localhost:8000) so see conda-store-ui.
 4. You can then log in using the default username of `username` and default password of `password`.
@@ -54,7 +62,8 @@ This setup still uses Docker for supporting services but runs conda-store-ui loc
 
 #### Set up your environment
 
-This project uses [Conda](https://conda.io) for package management. To set up Conda, please see their [installation documentation](https://docs.conda.io/projects/conda/en/latest/user-guide/install/index.html).
+This project uses [conda](https://conda.io) for package management.
+To set up conda, please see their [installation documentation](https://docs.conda.io/projects/conda/en/latest/user-guide/install/index.html).
 
 1. Change to the project root `cd conda-store-ui`
 2. From the project root create the conda environment `conda env create -f environment_dev.yml`
@@ -71,18 +80,11 @@ Hot reloading is enabled, so when you make changes to source files, your browser
 
 ### Making a release 🚀
 
-To create a new version of this package, follow these steps:
+To create a new version of this package: the release captain will open an issue with the `release` template and follow
+the steps outlined in the issue.
 
-1. Bump the version number in `package.json` (we use CalVer: `YYYY.MM.releaseNumber` starting with `releaseNumber=1`)
-2. [Start a new GitHub release](https://github.com/conda-incubator/conda-store-ui/releases/new)
-   - Call the release the current version, e.g. `2023.9.1`
-   - In the **`Choose a Tag:`** dropdown, type in the release name (e.g., `2023.9.1`) and click "Create new tag"
-   - Add the release notes in the text field [^github-activity]
-3. Confirm that the release completed successfully by checking the [GitHub Actions page](https://github.com/conda-incubator/conda-store-ui/actions). Once completed, a new release will be available at [npm - @conda-store/conda-store-ui](https://libraries.io/npm/@conda-store%2Fconda-store-ui)
-
-🔗 You can find more details about out release process and versioning approach in our [Maintenance docs](https://conda.store/community/maintenance/release).
-
-[^github-activity]: If you wish, use [`github-activity` to generate a Changelog](https://github.com/choldgraf/github-activity), e.g. `github-activity conda-incubator/conda-store-ui --since 2023.9.1 --until 2023.10.1 --auth <GH personal access token>`
+🔗 You can find more details about out release process and versioning approach in our
+[Maintenance docs](https://conda.store/community/maintenance/release).
 
 ### Running Tests
 
@@ -125,19 +127,17 @@ Steps to install and set up:
    yarn build
    ```
 
-To run the tests, you will need to run commands in two separate terminal windows
-or tabs.
-
-Steps to run:
+To run the tests, you will need to run the following commands in two separate terminal windows
+or tabs:
 
 1. In the first terminal window/tab, enter the following:
    ```sh
    conda activate cs-ui-dev-env
    yarn start
    ```
 2. Wait for server to start (you'll know it's ready when it says "webpack 5.xx.x
-compiled successfully"). Open a **new terminal window or tab** and enter the
-following:
+   compiled successfully"). Open a **new terminal window or tab** and enter the
+   following:
    ```sh
    conda activate cs-ui-dev-env
    pytest
@@ -149,8 +149,8 @@ If you need to debug, try replacing the last command with:
 PWDEBUG=1 pytest
 ```
 
-Note: PW stands for Playwright. `PWDEBUG=1` puts [Playwright in debug
-mode](https://playwright.dev/python/docs/debug).
+> [!NOTE]
+> PW stands for Playwright. `PWDEBUG=1` puts [Playwright in debug mode](https://playwright.dev/python/docs/debug).
 
 ## Code of Conduct 🤝
 

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 both the commit and the 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

@@ -1,6 +1,6 @@
 {
   "name": "@conda-store/conda-store-ui",
-  "version": "2024.6.1",
+  "version": "2024.9.1-dev",
   "description": "UI elements for building a frontend for conda-store",
   "homepage": "https://github.com/conda-incubator/conda-store-ui",
   "bugs": {
@@ -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",
@@ -144,4 +146,4 @@
     "node": ">=18.0.0"
   },
   "packageManager": "[email protected]"
-}
+}

tsconfig.eslint.json

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