Lessons learned during practice bazel

Beginning Bazel

practices following the book "Beginning Bazel"

go-grpc-bazel-docker

grpc client and server, put in docker image, protobuffer and generated files from protobuffers, vscode IDE integration

rule

create customized rules based on rule tutorials from bazel official site.

Troubeshooting

• bazel query to find dependencies

• build a specific target and find its sources, artifact and output

• try the native way to build in the langauge envirornment such as go build and javac etc.

vue

the relative module path issue

#option 1, hang
#https://github.com/bazelbuild/rules_nodejs/issues/1840#issuecomment-619277667
load("@bazel_skylib//rules:write_file.bzl", "write_file")

write_file(
    name = "write_chdir_script",
    out = "chdir.js",
    content = ["process.chdir(__dirname)"],
)

vue-cli-service(
    ...
    args = ["--node_options=--require=./$(execpath chdir.js)"],
    data = ["chdir.js"],
)

#option 2
# out folder is empty


vue-cli-service(
    ...
    args = [],
    data = [],
    chdir = package_name(),
)

# https://github.com/vuejs/vue-cli/issues/3152#issuecomment-448892609
#VUE_CLI_CONTEXT=/path/to/your/dir /path/to/your/dir/node_modules/.bin/vue-cli-service build


#option 3
# not try yet
#https://github.com/bazelbuild/rules_nodejs/issues/1776#issuecomment-619313234
genrule(
    name = "build",
    outs = ["dist"],
    srcs = ["@npm//:node_modules"] + glob(
        ["**"],
        exclude = ["node_modules/**"],
    ),
    # TODO: external/npm/node_modules is a hardcode path for @npm//:node_modules, should get package path of @npm
    cmd = """
        export PATH=$$PWD/$$(dirname $(location @nodejs//:node_bin)):$$PATH
        vue_cli_service=$$PWD/$(location @npm//:node_modules/.bin/vue-cli-service) outs=$$PWD/$@
        cd frontend && ln -s ../external/npm/node_modules ./ && $$vue_cli_service build --dest $$outs
    """,
    tools = [
        "@npm//:node_modules/.bin/vue-cli-service",
        "@nodejs//:node_bin",
    ],
)

# option 4
# https://github.com/bazelbuild/rules_nodejs/issues/1831#issuecomment-615219600
load("@build_bazel_rules_nodejs//:index.bzl", "npm_package_bin")
load("@bazel_tools//tools/build_defs/pkg:pkg.bzl", "pkg_tar")
load("@io_bazel_rules_docker//container:container.bzl", "container_image")

npm_package_bin(
    name = "app",
    tool = "@npm//@vue/cli-service/bin:vue-cli-service",
    args = [
        "build", "$(location :src/main.js)",
        "--dest", "$(@D)"
    ],
    data = [
        "@npm//:node_modules"
    ] + glob(["src/**"]),
    output_dir = 1
)

pkg_tar(
    name = "app-tar",
    strip_prefix = "/js/app",
    package_dir = "/usr/share/nginx/html",
    srcs = ["//js:app"],
    mode = "0755",
)

container_image(
   name = "image",
   base = "@nginx//image",
   tars = ["app-tar"]
)

#option 5
# https://github.com/bazelbuild/rules_nodejs/issues/1840#issuecomment-619321919
# https://www.npmjs.com/package/vue-cli-launcher#bazel
load("@npm//vue-cli-launcher:index.bzl", "vue_cli_launcher")
vue_cli_launcher(
  name = "build",
  args = [
    "build",
    "--dest=$(@D)",
    "--resolve-dest-by-cwd",
    "--package-json-path=$(execpath package.json)",
  ],
  data = [
    "package.json",
    ...
  ],
  output_dir = True,
)

out folder empty issue

vue_cli_service(
    name = "build",
    outs = ["dist"],
    args = [
        "build",
        "--dest",
        # add more .. if your projects is deep in the subfolders
        "../../$(@D)/dist",
        "--skip-plugins",
        "eslint",
    ],
    data = [
        ":babel.config.js",
        ":package.json",
        ":package-lock.json",
        "//backend/admin-web/src:admin-web-src",
        "@npm//:node_modules",
        "@npm//@vue/cli-plugin-babel",
        "@npm//@vue/cli-plugin-eslint",
         "@npm//vue",
    ],
    #output_dir = True,
    chdir = package_name(),
)