Replaced webpack with esbuild (wasmCloud#350)

* replaced webpack with esbuild Signed-off-by: Brooks Townsend <[email protected]> wip Signed-off-by: Brooks Townsend <[email protected]> * converted to building assets before docker build Signed-off-by: Brooks Townsend <[email protected]> * added esbuild, no push and run on PR to test action Signed-off-by: Brooks Townsend <[email protected]> temporary only do docker release on workflow Signed-off-by: Brooks Townsend <[email protected]> install erlang/otp elixir Signed-off-by: Brooks Townsend <[email protected]> corrected elixir install Signed-off-by: Brooks Townsend <[email protected]> install mix deps Signed-off-by: Brooks Townsend <[email protected]> added secret key base Signed-off-by: Brooks Townsend <[email protected]> reverted test changes to release action Signed-off-by: Brooks Townsend <[email protected]> * updated readme for dependencies Signed-off-by: Brooks Townsend <[email protected]>
vados-cosmonic · Apr 5, 2022 · cc1fc60 · cc1fc60
1 parent 68330d2
commit cc1fc60
Show file tree

Hide file tree

Showing 37 changed files with 107 additions and 14,247 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -0,0 +1,11 @@
+*/_build/
+*/.elixir_ls/
+*/deps/
+*/.git/
+*/.gitignore
+*/Dockerfile
+*/Makefile
+*/README*
+*/test/
+*/target/debug/
+*/target/release/
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -14,6 +14,7 @@ jobs:
     env:
       MIX_ENV: prod
       working-directory: wasmcloud_host
+      SECRET_KEY_BASE: ${{ secrets.WASMCLOUD_HOST_SECRET_KEY_BASE }}
 
     steps:
       - name: Checkout
@@ -42,6 +43,30 @@ jobs:
       - name: Determine version
         run: echo "wasmcloud_host_version=$(grep '@app_vsn "' ${{env.working-directory}}/mix.exs | cut -d '"' -f2)" > $GITHUB_ENV
 
+      # Install erlang/OTP and elixir
+      - name: Install erlang and elixir
+        uses: erlef/setup-beam@v1
+        with:
+          otp-version: "=24"
+          elixir-version: "1.12"
+          install-hex: true
+          install-rebar: true
+
+      - name: Install Mix Dependencies
+        working-directory: ${{env.working-directory}}
+        run: |
+          mix local.rebar --force 
+          mix local.hex --force
+          mix deps.get
+
+      - name: Compile Phoenix Assets
+        working-directory: ${{env.working-directory}}
+        # esbuild + dart sass are only included in the dev runtime environment
+        env:
+          MIX_ENV: dev
+        run: |
+          make esbuild
+
       - name: Build and release docker image
         uses: docker/build-push-action@v2
         with:
@@ -114,12 +139,6 @@ jobs:
           target: ${{ matrix.rust-target }}
           override: true
 
-      # Setup node for phoenix deps
-      - uses: actions/setup-node@v2
-        if: ${{ env.working-directory == 'wasmcloud_host' }}
-        with:
-          node-version: "14"
-
       # Install erlang/OTP and elixir
       - name: Install erlang and elixir
         if: ${{ startswith(matrix.os, 'ubuntu') || startswith(matrix.os, 'windows') }}
@@ -160,16 +179,13 @@ jobs:
           mix compile
 
       - name: Compile Phoenix Assets
-        if: ${{ env.working-directory == 'wasmcloud_host' }}
-        working-directory: ${{env.working-directory}}/assets
-        run: |
-          npm install --python=python2.7
-          npm run deploy
-
-      - name: Create digest
         if: ${{ env.working-directory == 'wasmcloud_host' }}
         working-directory: ${{env.working-directory}}
-        run: mix phx.digest
+        # esbuild + dart sass are only included in the dev runtime environment
+        env:
+          MIX_ENV: dev
+        run: |
+          make esbuild
 
       - name: Create Distillery Release
         working-directory: ${{env.working-directory}}

diff --git a/.github/workflows/wasmcloud_host.yml b/.github/workflows/wasmcloud_host.yml
@@ -56,6 +56,10 @@ jobs:
         working-directory: ${{env.working-directory}}
         run: mix format --check-formatted
 
+      - name: Ensure static files build properly
+        working-directory: ${{env.working-directory}}
+        run: make esbuild
+
       - name: Run Credo
         working-directory: ${{env.working-directory}}
         continue-on-error: true # Don't fail entire action with refactoring opportunities for now

diff --git a/wasmcloud_host/.dockerignore b/wasmcloud_host/.dockerignore
diff --git a/wasmcloud_host/Dockerfile b/wasmcloud_host/Dockerfile
@@ -75,12 +75,8 @@ RUN apt update && \
   ca-certificates \
   libssl-dev \
   pkg-config \
-  python2.7 \
   inotify-tools \
-  build-essential && \
-  # Install node from nodesource (needed for phoenix)
-  curl -fsSL https://deb.nodesource.com/setup_14.x | bash - && \
-  apt install -y --no-install-recommends nodejs
+  build-essential
 
 # Install Rust for NIF compilation
 RUN curl https://sh.rustup.rs -sSf | bash -s -- -y
@@ -93,15 +89,6 @@ RUN mix local.rebar --force && \
 WORKDIR ./wasmcloud_host
 RUN mix do deps.compile, compile
 
-# This step builds assets for the Phoenix app
-RUN if [ ! "$SKIP_PHOENIX" = "true" ]; then \
-  cd ./assets && \
-  npm install --python=python2.7 && \
-  npm run deploy && \
-  cd - && \
-  mix phx.digest; \
-fi
-
 RUN mkdir -p /opt/built && \
   mix distillery.release --verbose && \
   cp _build/${MIX_ENV}/rel/${APP_NAME}/releases/${APP_VSN}/${APP_NAME}.tar.gz /opt/built && \

diff --git a/wasmcloud_host/Makefile b/wasmcloud_host/Makefile
@@ -17,7 +17,7 @@ BASE_TAGS ?= -t $(NAME):$(VERSION)-$(BUILD) -t $(NAME):$(TAG)
 help:  ## Display this help
 	@awk 'BEGIN {FS = ":.*##"; printf "\nUsage:\n  make \033[36m<target>\033[0m\n"} /^[a-zA-Z_\-.*]+:.*?##/ { printf "  \033[36m%-15s\033[0m %s\n", $$1, $$2 } /^##@/ { printf "\n\033[1m%s\033[0m\n", substr($$0, 5) } ' $(MAKEFILE_LIST)
 
-build-image: build ## Build docker image for running, testing, or distribution
+build-image: build esbuild ## Build docker image for running, testing, or distribution
 	cd ../ && \
 	docker build $(BASE_ARGS) \
 		--build-arg BUILDER_IMAGE=elixir:1.12.2-slim \
@@ -26,13 +26,14 @@ build-image: build ## Build docker image for running, testing, or distribution
 		-f $(DOCKERFILE) \
 		.
 
-build-arm-image: ## Build arm64 docker image for running, testing, or distribution
+build-arm-image: build esbuild ## Build arm64 docker image for running, testing, or distribution
 	cd ../ && \
 	docker buildx build $(BASE_ARGS) \
 		--build-arg BUILDER_IMAGE=elixir:1.12.2-slim \
-		--build-arg RELEASE_IMAGE=debian:buster-slim  \
+		--build-arg RELEASE_IMAGE=debian:buster-slim \
 		-t wasmcloud_host:arm64 \
 		--platform linux/arm64 \
+		--load \
 		-f $(DOCKERFILE) \
 		.
 
@@ -53,9 +54,14 @@ wasmex-nif: ## Build wasmex native NIF
 	cd target/$(RUST_ARCH)-$(RUST_TARGET)/release/ && \
 	ls | egrep ".*(dylib|so|dll)$$" | xargs -I % cp % ../../../../../priv/native/libwasmex.so
 
+esbuild:
+	MIX_ENV=dev mix sass default assets/css/app.scss priv/static/assets/app.css
+	MIX_ENV=dev mix assets.deploy
+	cp -r assets/static/* priv/static/
+	cp -r assets/css/coreui priv/static/assets/coreui
+
 build: deps ## Build wasmcloud_host for development
 	mix compile
-	npm --prefix ./assets install ./assets
 
 run: build ## Run development wasmcloud_host
 	mix phx.server

diff --git a/wasmcloud_host/README.md b/wasmcloud_host/README.md
@@ -8,8 +8,7 @@ This is the web UI dashboard that provides for a basic way to interact with a ho
 
 - [Elixir installation](https://elixir-lang.org/install.html), minimum `v1.12.0`
 - [Erlang/OTP installation](https://elixir-lang.org/install.html#installing-erlang), minimum `OTP 22`
-- [NATS installation](https://docs.nats.io/nats-server/installation), minimum `v2.3.4`
-- [Node/NPM installation](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), recommended node `14`
+- [NATS installation](https://docs.nats.io/nats-server/installation), minimum `v2.7.2`
 
 ## Starting the Host and Web UI Dashboard
 
@@ -21,7 +20,7 @@ nats-server -js &
 
 # install dependencies
 mix deps.get
-npm --prefix ./assets install ./assets
+make esbuild
 
 # start the host
 mix phx.server

diff --git a/wasmcloud_host/assets/.babelrc b/wasmcloud_host/assets/.babelrc
diff --git a/wasmcloud_host/assets/js/app.js b/wasmcloud_host/assets/js/app.js
@@ -1,30 +1,10 @@
-// We need to import the CSS so that webpack will load it.
-// The MiniCssExtractPlugin is used to separate it out into
-// its own CSS file.
-import "../css/app.scss"
-
-// webpack automatically bundles all modules in your
-// entry points. Those entry points can be configured
-// in "webpack.config.js".
-//
-// Import deps with the dep name or local files with a relative path, for example:
-//
-//     import {Socket} from "phoenix"
-//     import socket from "./socket"
-//
 import "phoenix_html"
 import { Socket } from "phoenix"
-import topbar from "topbar"
 import { LiveSocket } from "phoenix_live_view"
 
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 let liveSocket = new LiveSocket("/live", Socket, { params: { _csrf_token: csrfToken } })
 
-// Show progress bar on live navigation and form submits
-topbar.config({ barColors: { 0: "#29d" }, shadowColor: "rgba(0, 0, 0, .3)" })
-window.addEventListener("phx:page-loading-start", info => topbar.show())
-window.addEventListener("phx:page-loading-stop", info => topbar.hide())
-
 // connect if there are any LiveViews on the page
 liveSocket.connect()