feat: improve bridge_ui tilt

properly cache npm ci in Docker container image
support hotloading outside ci

Dockerfile.client

@@ -14,27 +14,27 @@ RUN --mount=type=cache,target=/root/.cache \
 ENV SOLANA_BIN_PATH="/root/.local/share/solana/install/active_release/bin"
 ENV PATH="$SOLANA_BIN_PATH:$PATH"
 
-ADD ethereum /usr/src/ethereum
 WORKDIR /usr/src/ethereum
-RUN --mount=type=cache,target=/root/.cache \
-	--mount=type=cache,target=/root/.npm \
+COPY ethereum/package.json ethereum/package-lock.json ./
+RUN --mount=type=cache,uid=1000,gid=1000,target=/home/node/.npm \
     npm ci
+COPY ethereum ./
 
-ADD clients/token_bridge /usr/src/clients/token_bridge
 WORKDIR /usr/src/clients/token_bridge
-RUN --mount=type=cache,target=/root/.cache \
-	--mount=type=cache,target=/root/.npm \
-	set -xe && \
-	npm ci && \
+COPY clients/token_bridge/package.json clients/token_bridge/package-lock.json ./
+RUN --mount=type=cache,uid=1000,gid=1000,target=/home/node/.npm \
+    npm ci
+COPY clients/token_bridge ./
+RUN set -xe && \
 	npm run build-contracts && \
 	npm run build
 
-ADD clients/nft_bridge /usr/src/clients/nft_bridge
 WORKDIR /usr/src/clients/nft_bridge
-RUN --mount=type=cache,target=/root/.cache \
-	--mount=type=cache,target=/root/.npm \
-	set -xe && \
-	npm ci && \
+COPY clients/nft_bridge/package.json clients/nft_bridge/package-lock.json ./
+RUN --mount=type=cache,uid=1000,gid=1000,target=/home/node/.npm \
+    npm ci
+COPY clients/nft_bridge ./
+RUN set -xe && \
 	npm run build-contracts && \
 	npm run build
 

Tiltfile

@@ -40,6 +40,7 @@ config.define_bool("explorer", False, "Enable explorer component")
 config.define_bool("bridge_ui", False, "Enable bridge UI component")
 config.define_bool("e2e", False, "Enable E2E testing stack")
 config.define_bool("ci_tests", False, "Enable tests runner component")
+config.define_bool("bridge_ui_hot", False, "Enable hot loading bridge_ui")
 
 cfg = config.parse()
 num_guardians = int(cfg.get("num", "1"))
@@ -54,6 +55,8 @@ bridge_ui = cfg.get("bridge_ui", ci)
 e2e = cfg.get("e2e", ci)
 ci_tests = cfg.get("ci_tests", ci)
 
+bridge_ui_hot = not ci
+
 if cfg.get("manual", False):
     trigger_mode = TRIGGER_MODE_MANUAL
 else:
@@ -279,14 +282,22 @@ k8s_resource(
 )
 
 if bridge_ui:
+    entrypoint = "npm run build && /app/node_modules/.bin/serve -s build -n"
+    live_update = []
+    if bridge_ui_hot:
+        entrypoint = "npm start"
+        live_update = [
+            sync("./bridge_ui/public", "/app/public"),
+            sync("./bridge_ui/src", "/app/src"),
+        ]
+
     docker_build(
         ref = "bridge-ui",
         context = ".",
         only = ["./bridge_ui"],
         dockerfile = "bridge_ui/Dockerfile",
-        live_update = [
-            sync("./bridge_ui/src", "/app/bridge_ui/src"),
-        ],
+        entrypoint = entrypoint,
+        live_update = live_update,
     )
 
     k8s_yaml_with_ns("devnet/bridge-ui.yaml")

bridge_ui/Dockerfile

@@ -6,25 +6,7 @@ FROM node:16-alpine@sha256:f21f35732964a96306a84a8c4b5a829f6d3a0c5163237ff4b6b8b
 RUN mkdir -p /app
 WORKDIR /app
 
-ADD . .
-
-# these are only needed if you are using the local version of the sdk (npm i ../sdk/js)
-# RUN --mount=type=cache,uid=1000,gid=1000,target=/home/node/.npm \
-#   npm ci --prefix ethereum
-# RUN --mount=type=cache,uid=1000,gid=1000,target=/home/node/.npm \
-#   npm ci --prefix sdk/js
-# RUN --mount=type=cache,uid=1000,gid=1000,target=/home/node/.npm \
-#   npm run build --prefix sdk/js
-
-
-WORKDIR ./bridge_ui
-
+COPY bridge_ui/package.json bridge_ui/package-lock.json ./
 RUN --mount=type=cache,uid=1000,gid=1000,target=/home/node/.npm \
-  npm ci
-
-RUN --mount=type=cache,uid=1000,gid=1000,target=/home/node/.npm \
-  npm i serve
-
-RUN --mount=type=cache,uid=1000,gid=1000,target=/home/node/.npm \
-  npm run build
-
+    npm ci
+COPY bridge_ui .

bridge_ui/package.json

@@ -79,6 +79,7 @@
     "jest": "^26.6.0",
     "jest-watch-typeahead": "^0.6.4",
     "prettier": "^2.3.2",
+    "serve": "^13.0.2",
     "truffle": "^5.4.1",
     "wasm-loader": "^1.3.0"
   }

devnet/bridge-ui.yaml

@@ -33,11 +33,7 @@ spec:
       containers:
         - name: bridge-ui
           image: bridge-ui
-          command:
-            - /app/bridge_ui/node_modules/.bin/serve
-            - -s
-            - build
-            - -n
+          # entrypoint set dynamically in Tiltfile
           tty: true
           ports:
             - containerPort: 3000

sdk/js/package.json

@@ -20,7 +20,6 @@
     "build": "npm run build-all",
     "format": "echo \"disabled: prettier --write \"src/**/*.ts\"\"",
     "lint": "tslint -p tsconfig.json",
-    "prepare": "npm run build",
     "prepublishOnly": "echo \"disabled: npm test && npm run lint\"",
     "preversion": "npm run lint",
     "version": "npm run format && git add -A src",

spydk/js/package.json

@@ -17,7 +17,6 @@
     "build": "npm run build-all",
     "format": "echo \"disabled: prettier --write \"src/**/*.ts\"\"",
     "lint": "tslint -p tsconfig.json",
-    "prepare": "npm run build",
     "prepublishOnly": "echo \"disabled: npm test && npm run lint\"",
     "preversion": "npm run lint",
     "version": "npm run format && git add -A src",

terra/Dockerfile

@@ -1,10 +1,10 @@
 # This is a multi-stage docker file, first stage builds contracts
 # And the second one creates node.js environment to deploy them
 FROM cosmwasm/workspace-optimizer:0.12.1@sha256:1508cf7545f4b656ecafa34e29c1acf200cdab47fced85c2bc076c0c158b1338 AS builder
-ADD Cargo.lock /code/
-ADD Cargo.toml /code/
-ADD contracts /code/contracts
-ADD packages /code/packages
+COPY Cargo.lock /code/
+COPY Cargo.toml /code/
+COPY contracts /code/contracts
+COPY packages /code/packages
 RUN optimize_workspace.sh
 
 # Contract deployment stage
@@ -15,5 +15,9 @@ RUN apt update && apt install netcat curl jq -y
 WORKDIR /app/tools
 
 COPY --from=builder /code/artifacts /app/artifacts
-ADD ./artifacts/cw20_base.wasm /app/artifacts/
-ADD ./tools /app/tools
+COPY ./artifacts/cw20_base.wasm /app/artifacts/
+
+COPY ./tools/package.json ./tools/package-lock.json /app/tools/
+RUN --mount=type=cache,uid=1000,gid=1000,target=/home/node/.npm \
+    npm ci
+COPY ./tools /app/tools

terra/tools/deploy.sh

@@ -10,4 +10,4 @@ done
 
 sleep 2
 
-npm ci && node deploy.js
+node deploy.js

testing/Dockerfile.tests

@@ -5,25 +5,28 @@ RUN apk update && apk add g++ make python3
 RUN mkdir -p /app
 WORKDIR /app
 
-ADD . .
-
+COPY ethereum/package.json ethereum/package-lock.json ./ethereum/
 RUN --mount=type=cache,uid=1000,gid=1000,target=/home/node/.npm \
-  npm ci --prefix ethereum
+    npm ci --prefix ethereum
+COPY ethereum ./ethereum
 
+COPY sdk/js/package.json sdk/js/package-lock.json  ./sdk/js/
 RUN --mount=type=cache,uid=1000,gid=1000,target=/home/node/.npm \
-  npm ci --prefix sdk/js
-RUN --mount=type=cache,uid=1000,gid=1000,target=/home/node/.npm \
-  npm run build --prefix sdk/js
+    npm ci --prefix sdk/js
+COPY sdk/js ./sdk/js
+RUN npm run build --prefix sdk/js
 
+COPY spydk/js/package.json spydk/js/package-lock.json ./spydk/js/
 RUN --mount=type=cache,uid=1000,gid=1000,target=/home/node/.npm \
-  npm ci --prefix spydk/js
-RUN --mount=type=cache,uid=1000,gid=1000,target=/home/node/.npm \
-  npm run build  --prefix spydk/js
+    npm ci --prefix spydk/js
+COPY spydk/js ./spydk/js
+RUN npm run build --prefix spydk/js
 
+COPY bridge_ui/package.json bridge_ui/package-lock.json ./bridge_ui/
 RUN --mount=type=cache,uid=1000,gid=1000,target=/home/node/.npm \
-  npm ci --prefix bridge_ui
-
-
-WORKDIR ./testing
+    npm ci --prefix bridge_ui
+COPY bridge_ui ./bridge_ui
 
+COPY testing ./testing
 
+WORKDIR /app/testing

third_party/pyth/p2w-sdk/Dockerfile

@@ -2,25 +2,22 @@ FROM node:16-alpine@sha256:004dbac84fed48e20f9888a23e32fa7cf83c2995e174a78d41d9a
 
 # Build ETH
 WORKDIR /usr/src/ethereum
-ADD ethereum .
-RUN --mount=type=cache,target=/home/node/.npm \
-  npm ci
+COPY ethereum/package.json ethereum/package-lock.json ./
+RUN --mount=type=cache,uid=1000,gid=1000,target=/home/node/.npm \
+    npm ci
+COPY ethereum .
 
 # Build Wormhole SDK
 WORKDIR /usr/src/sdk/js
-ADD sdk/js/ .
-RUN --mount=type=cache,target=/home/node/.npm \
-  npm ci
+COPY sdk/js/package.json sdk/js/package-lock.json ./
+RUN --mount=type=cache,uid=1000,gid=1000,target=/home/node/.npm \
+    npm ci
+COPY sdk/js .
 
 # Build p2w-sdk in dir preserving directory structure
 WORKDIR /usr/src/third_party/pyth/p2w-sdk
-COPY third_party/pyth/p2w-sdk/package.json third_party/pyth/p2w-sdk/package-lock.json .
-RUN --mount=type=cache,target=/root/.cache \
-    --mount=type=cache,target=/root/.npm \
+COPY third_party/pyth/p2w-sdk/package.json third_party/pyth/p2w-sdk/package-lock.json ./
+RUN --mount=type=cache,uid=1000,gid=1000,target=/home/node/.npm \
     npm ci
-
-WORKDIR /usr/src/third_party/pyth/p2w-sdk
 COPY third_party/pyth/p2w-sdk .
-RUN --mount=type=cache,target=/root/.cache \
-    --mount=type=cache,target=/root/.npm \
-    npm run build-test
+RUN npm run build-test