diff --git a/.github/workflows/docker-nightly.yml b/.github/workflows/docker-nightly.yml index 49163666e3..e620f2b5e5 100644 --- a/.github/workflows/docker-nightly.yml +++ b/.github/workflows/docker-nightly.yml @@ -129,7 +129,16 @@ jobs: tags: | eclipse/ditto-connectivity:${{ env.IMAGE_TAG }} - - name: Build and push ditto-ui + name: Use Node.js 18.x + uses: actions/setup-node@v3 + with: + node-version: 18 + - + name: Build UI with node + run: npm run build + working-directory: ./ui + - + name: Build and push ditto-ui image uses: docker/build-push-action@v3 with: context: ./ui diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml index d507c2ecf9..e2ea1f1247 100644 --- a/.github/workflows/gh-pages.yml +++ b/.github/workflows/gh-pages.yml @@ -30,6 +30,13 @@ jobs: group: ${{ github.workflow }}-${{ github.ref }} steps: - uses: actions/checkout@v3 + - name: Use Node.js 18.x + uses: actions/setup-node@v3 + with: + node-version: 18 + - name: Build UI with node + run: npm run build + working-directory: ./ui - name: Deploy uses: peaceiris/actions-gh-pages@v3 with: diff --git a/.github/workflows/push-dockerhub-on-demand.yml b/.github/workflows/push-dockerhub-on-demand.yml index 91c0f382aa..46bebf6d4c 100644 --- a/.github/workflows/push-dockerhub-on-demand.yml +++ b/.github/workflows/push-dockerhub-on-demand.yml @@ -170,6 +170,15 @@ jobs: eclipse/ditto-connectivity:${{ env.IMAGE_MINOR_TAG }} eclipse/ditto-connectivity:${{ env.IMAGE_MAJOR_TAG }} eclipse/ditto-connectivity:latest + - + name: Use Node.js 18.x + uses: actions/setup-node@v3 + with: + node-version: 18 + - + name: Build UI with node + run: npm run build + working-directory: ./ui - name: Build and push ditto-ui if: env.MILESTONE_OR_RC_SUFFIX == env.IMAGE_TAG && inputs.dittoImage == 'ditto-ui' diff --git a/.github/workflows/push-dockerhub.yml b/.github/workflows/push-dockerhub.yml index 0b2930c89b..adc95db098 100644 --- a/.github/workflows/push-dockerhub.yml +++ b/.github/workflows/push-dockerhub.yml @@ -155,6 +155,15 @@ jobs: eclipse/ditto-connectivity:${{ env.IMAGE_MINOR_TAG }} eclipse/ditto-connectivity:${{ env.IMAGE_MAJOR_TAG }} eclipse/ditto-connectivity:latest + - + name: Use Node.js 18.x + uses: actions/setup-node@v3 + with: + node-version: 18 + - + name: Build UI with node + run: npm run build + working-directory: ./ui - name: Build and push ditto-ui if: env.MILESTONE_OR_RC_SUFFIX == env.IMAGE_TAG diff --git a/.gitignore b/.gitignore index e28468ceb2..bb0a675137 100755 --- a/.gitignore +++ b/.gitignore @@ -22,6 +22,5 @@ deployment/helm/eclipse-ditto/requirements.lock deployment/helm/eclipse-ditto/charts/* .factorypath ui/node_modules -ui/package.json -ui/package-lock.json +ui/dist diff --git a/ui/Dockerfile b/ui/Dockerfile index 608321e665..aae579baa6 100644 --- a/ui/Dockerfile +++ b/ui/Dockerfile @@ -14,7 +14,4 @@ FROM nginxinc/nginx-unprivileged:alpine WORKDIR /usr/share/nginx/html COPY ./index.html . -COPY ./index.css . -COPY ./main.js . -COPY ./modules ./modules -COPY ./templates ./templates +COPY ./dist ./dist diff --git a/ui/build.mjs b/ui/build.mjs new file mode 100644 index 0000000000..dd12376c81 --- /dev/null +++ b/ui/build.mjs @@ -0,0 +1,29 @@ +import {argv} from 'node:process'; +import * as esbuild from 'esbuild'; +import {sassPlugin} from 'esbuild-sass-plugin'; + +const config = { + entryPoints: ['main.js'], + bundle: true, + outdir: 'dist', + loader: { + '.html': 'text', + }, + plugins: [sassPlugin()], +}; + +if (argv[2] === 'serve') { + config.sourcemap = true; + + const ctx = await esbuild.context(config); + + let {host, port} = await ctx.serve({ + servedir: '.', + }); +} else { + config.minify = true; + + await esbuild.build(config); +} + + diff --git a/ui/index.html b/ui/index.html index e3e4026858..813efd4803 100644 --- a/ui/index.html +++ b/ui/index.html @@ -16,13 +16,10 @@