Update to build frontend without Bazel (#3572)

* Switch to build web without Bazel

* Fix indent

* Remove web-test from Kapetanios

* Refactor

Author: nghialv

.github/workflows/build.yaml

@@ -8,9 +8,6 @@ on:
     branches:
       - master
 
-env:
-  HELM_VERSION: 3.8.2
-
 jobs:
   backend:
     name: Backend
@@ -40,7 +37,6 @@ jobs:
       - uses: actions/setup-node@v2
         with:
           node-version: '16.13.0'
-
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
@@ -51,12 +47,17 @@ jobs:
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-yarn-
+      - name: Yarn install
+        working-directory: web
+        run: yarn install --prefer-offline
       - name: Build web static
-        run: make build-frontend
+        run: make web-build
 
   chart:
     name: Helm Chart
     runs-on: ubuntu-latest
+    env:
+      HELM_VERSION: 3.8.2
     steps:
       - uses: actions/checkout@v2
         with:

.github/workflows/publish.yaml

@@ -39,8 +39,28 @@ jobs:
         run: make build-go GO_BUILD_COMPONENT=helloworld
 
       # Building frontend.
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '16.13.0'
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+      - uses: actions/cache@v2
+        id: yarn-cache
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+      - name: Yarn install
+        working-directory: web
+        run: yarn install
       - name: Build web static
-        run: make build-frontend
+        run: |
+          make web-build
+          rm -rf .artifacts/web-static
+          mkdir -p .artifacts/web-static
+          cp -rf web/dist/. .artifacts/web-static
 
       # Login to push container images.
       - name: Log in to the container registry

.github/workflows/test.yaml

@@ -28,7 +28,6 @@ jobs:
       - uses: actions/setup-node@v2
         with:
           node-version: '16.13.0'
-
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
@@ -39,10 +38,8 @@ jobs:
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-yarn-
-
       - name: Yarn install
         working-directory: web
-        run: yarn install
+        run: yarn install --prefer-offline
       - name: Run unit tests
-        working-directory: web
-        run: echo "WIP"
+        run: make web-test

.kapetanios/presubmit.yaml

@@ -57,43 +57,3 @@ spec:
       secrets:
       - name: bazel_cache_service_account
         type: PROJECT
-
-  - name: web-test
-    timeout: 30m
-    whenChanged:
-      - web/**
-    steps:
-    - name: restore-cache
-      description: Restore node modules cache
-      runner: kapetanios@restore-cache
-      params:
-        - key=node_modules
-        - path=/workspace/.yarn
-    - name: install-dependencies
-      runner: gcr.io/kapetanios/node:16.13.1
-      commands:
-        - cd web
-        - yarn install --frozen-lockfile
-    - description: Save node modules cache
-      runner: kapetanios@save-cache
-      params:
-        - key=node_modules
-        - path=/workspace/.yarn
-    - name: generate-client
-      description: Generate API client code
-      runner: gcr.io/pipecd/runner:1.0.0
-      commands:
-        - bazelisk --output_base=/workspace/bazel_out build --config=ci //web:build_api //web:build_model
-      secrets:
-      - name: bazel_cache_service_account
-        type: PROJECT
-    - name: test
-      description: Run all web tests
-      runner: gcr.io/kapetanios/node:16.13.1
-      commands:
-        - cd web
-        - yarn test:coverage --coverageDirectory=/artifact --runInBand
-        - yarn typecheck
-      requires:
-        - generate-client
-        - install-dependencies

Makefile

@@ -86,6 +86,10 @@ web-dep:
 web-dev:
 	cd web; yarn dev
 
+.PHONY: web-build
+web-build:
+	cd web; yarn build
+
 .PHONY: web-test
 web-test:
 	cd web; yarn test:coverage --runInBand
@@ -131,14 +135,6 @@ update-docsy:
 codegen:
 	docker run --rm -v ${PWD}:/repo -it gcr.io/pipecd/codegen:0.7.0 /repo
 
-.PHONY: build-frontend
-build-frontend:
-	rm -rf .artifacts/web-static
-	mkdir -p .artifacts/web-static
-	bazelisk ${BAZEL_FLAGS} build ${BAZEL_COMMAND_FLAGS} -- //web:static
-	cp -rf bazel-bin/web/static/. .artifacts/web-static
-
-
 GO_BUILD_VERSION ?= $(shell git describe --tags --always --dirty --abbrev=7)
 GO_BUILD_COMMIT ?= $(shell git rev-parse HEAD)
 GO_BUILD_DATE ?= $(shell date -u '+%Y%m%d-%H%M%S')
@@ -157,3 +153,4 @@ package-chart: VERSION ?= $(shell git describe --tags --always --dirty --abbrev=
 package-chart:
 	mkdir -p .artifacts
 	helm package manifests/$(CHART) --version $(VERSION) --app-version $(VERSION) --dependency-update --destination .artifacts
+

WORKSPACE

@@ -1,6 +1,5 @@
 workspace(
     name = "pipecd",
-    managed_directories = {"@npm": ["web/node_modules"]},
 )
 
 load(
@@ -87,36 +86,4 @@ load(
 
 buildifier_dependencies()
 
-### web
-
-http_archive(
-    name = "build_bazel_rules_nodejs",
-    sha256 = "cfc289523cf1594598215901154a6c2515e8bf3671fd708264a6f6aefe02bf39",
-    urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/4.4.6/rules_nodejs-4.4.6.tar.gz"],
-)
-
-load(
-    "@build_bazel_rules_nodejs//:index.bzl",
-    "node_repositories",
-    "yarn_install",
-)
-
-### https://bazelbuild.github.io/rules_nodejs/Built-ins.html#usage
-node_repositories(
-    node_version = "16.13.0",
-    package_json = ["//web:package.json"],
-    yarn_version = "1.22.4",
-)
-
-yarn_install(
-    name = "npm",
-    frozen_lockfile = False,
-    package_json = "//web:package.json",
-    yarn_lock = "//web:yarn.lock",
-)
-
-load("@npm//@bazel/labs:package.bzl", "npm_bazel_labs_dependencies")
-
-npm_bazel_labs_dependencies()
-
 # gazelle:repository_macro repositories.bzl%go_repositories

cmd/pipecd/BUILD.bazel

@@ -64,9 +64,6 @@ go_library(
 
 go_binary(
     name = "pipecd",
-    data = [
-        "//web:static",
-    ],
     embed = [":go_default_library"],
     visibility = ["//visibility:public"],
 )

web/BUILD.bazel

@@ -6,7 +6,7 @@ module.exports = {
       "<rootDir>/file-transformer.js",
   },
   moduleNameMapper: {
-    "^pipecd/(.*)$": "<rootDir>/../bazel-bin/$1",
+    "^pipecd/(.*)$": "<rootDir>/../$1",
     "^~/(.*)$": "<rootDir>/src/$1",
     "^~~/(.*)$": "<rootDir>/$1",
   },

web/jest.config.local.js

@@ -5,6 +5,7 @@
   "private": true,
   "license": "Apache-2.0",
   "scripts": {
+    "build": "webpack build --mode production --env htmlTemplate=./base.html --config ./webpack.config.js",
     "dev": "STABLE_VERSION=`git describe --tags --always --dirty --abbrev=7` webpack serve --env htmlTemplate=./base.html --config ./webpack.config.dev.js",
     "gen": "scaffdog generate",
     "test": "TZ=Asia/Tokyo jest --config jest.config.local.js",