Merge pull request #141 from rimi-itk/feature/DISPLAY-1030-build-impr…

…ovements

DISPLAY-1030: Improved build for local development

CHANGELOG.md

@@ -4,6 +4,8 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+- [#141](https://github.com/os2display/display-templates/pull/141)
+  improve build for local development
 - [#146](https://github.com/os2display/display-templates/pull/146)
   - Fixed issue where image-text image cycle is not restarting when only on slide is displayed.
   - Fixed issue with slideshow default duration being 5000 s.

README.md

@@ -12,8 +12,9 @@ example content for the different templates.
 `index.html` serves a local setup for working with the templates.
 
 ```bash
-docker-compose run --rm node yarn
-docker-compose up -d
+docker compose pull
+docker compose run --rm node yarn
+docker compose up --detach
 ```
 
 The docker setup serves the files in the `build/` (see build for production) folder as `display-templates.local.itkdev.dk/build/`.
@@ -46,26 +47,62 @@ Add it to `const entry = {}`:
 To build the templates for production
 
 ```bash
-docker-compose run --rm node yarn build
+docker compose run --rm node yarn install
+docker compose run --rm node yarn build
 ```
 
 To continually build components when files change
 
 ```bash
-docker-compose run --rm node yarn build-watch
+docker compose run --rm node yarn build-watch
 ```
 
 The compiled files will be placed in `build/`. These should be committed to
 git repository, to enable Remote Components to load them in the clients.
 
+### Build base URL
+
+The default base build URLs,
+`https://raw.githubusercontent.com/os2display/display-templates/develop/build/`
+and
+`https://raw.githubusercontent.com/os2display/display-templates/main/build/`,
+respectively, can be overridden via environment variables:
+
+Override both with same value:
+
+```sh
+docker compose run --rm --env DEPLOYMENT_BUILD_BASE_URL="http://$(docker compose port nginx 80)/build/" node yarn build
+```
+
+Override "develop" base URL only:
+
+```sh
+docker compose run --rm --env DEPLOYMENT_BUILD_BASE_URL_DEVELOP="http://$(docker compose port nginx 80)/build/" node yarn build
+```
+
+Override "main" base URL only:
+
+```sh
+docker compose run --rm --env DEPLOYMENT_BUILD_BASE_URL_MAIN="http://$(docker compose port nginx 80)/build/" node yarn build
+```
+
+The default behavoir is equivalent to
+
+```sh
+docker compose run --rm \
+    --env DEPLOYMENT_BUILD_BASE_URL_DEVELOP="https://raw.githubusercontent.com/os2display/display-templates/develop/build/" \
+    --env DEPLOYMENT_BUILD_BASE_URL_MAIN="https://raw.githubusercontent.com/os2display/display-templates/main/build/" \
+    node yarn build
+```
+
 ### Linting
 
 ```bash
-docker-compose run --rm node yarn check-coding-standards
+docker compose run --rm node yarn check-coding-standards
 ```
 
 ```bash
-docker-compose run --rm node yarn apply-coding-standards
+docker compose run --rm node yarn apply-coding-standards
 ```
 
 ### Tests

webpack.config.js

@@ -51,6 +51,36 @@ const entry = devMode
 
 const timestamp = new Date().getTime();
 
+const transformConfig = (type) => (content) => {
+    const config = JSON.parse(content.toString())
+    // Base build URL with trailing slash.
+    const baseUrl = ('develop' === type
+                     ? process.env.DEPLOYMENT_BUILD_BASE_URL_DEVELOP ?? process.env.DEPLOYMENT_BUILD_BASE_URL ?? "https://raw.githubusercontent.com/os2display/display-templates/develop/build/"
+                     : process.env.DEPLOYMENT_BUILD_BASE_URL_MAIN  ?? process.env.DEPLOYMENT_BUILD_BASE_URL ?? "https://raw.githubusercontent.com/os2display/display-templates/main/build/")
+          .replace(/\/*$/, '/')
+
+    const processPath = (path) => {
+        try {
+            const url = new URL(path, baseUrl)
+            url.searchParams.set('ts', timestamp)
+            return url.toString()
+        } catch (error) {
+            console.error(error)
+            return path
+        }
+    }
+
+    for (const key of ['component', 'admin', 'schema', 'assets']) {
+        if (config.resources[key]) {
+            config.resources[key] = Array.isArray(config.resources[key])
+                ? config.resources[key].map(processPath)
+                : processPath(config.resources[key])
+        }
+    }
+
+    return JSON.stringify(config, null, 2)
+}
+
 const plugins = devMode
   ? [
       new HtmlWebpackPlugin({
@@ -88,19 +118,7 @@ const plugins = devMode
             to: "[name]-main[ext]",
             context: path.resolve(__dirname, "src"),
             toType: "template",
-            transform(content) {
-              return content
-                .toString()
-                .replace(".json", `.json?ts=${timestamp}`)
-                .replace(".js", `.js?ts=${timestamp}`)
-                .replace(
-                  new RegExp(
-                    "https://display-templates.local.itkdev.dk/build/",
-                    "g"
-                  ),
-                  "https://raw.githubusercontent.com/os2display/display-templates/main/build/"
-                );
-            },
+            transform: transformConfig('main')
           },
         ],
       }),
@@ -111,19 +129,7 @@ const plugins = devMode
             to: "[name]-develop[ext]",
             context: path.resolve(__dirname, "src"),
             toType: "template",
-            transform(content) {
-              return content
-                .toString()
-                .replace(".json", `.json?ts=${timestamp}`)
-                .replace(".js", `.js?ts=${timestamp}`)
-                .replace(
-                  new RegExp(
-                    "https://display-templates.local.itkdev.dk/build/",
-                    "g"
-                  ),
-                  "https://raw.githubusercontent.com/os2display/display-templates/develop/build/"
-                );
-            },
+            transform: transformConfig('develop')
           },
         ],
       }),