Giters

kczulko / rules_elm

Bazel rules for building web applications written in Elm

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

recommended dev workflow

joprice opened this issue · comments

commented

Is there a recommended dev workflow? Some pattern with ibazel to reload on update would be very useful.

I'm new to using bazel for web dev, so not sure if there's some nicer patterns out there. I currently got a simple workflow going with the following:

load("@npm//http-server:index.bzl", "http_server")
load("@com_github_edschouten_rules_elm//elm:def.bzl", "elm_binary", "elm_library")

elm_library(
    name = "lib",
    srcs = glob(["**/*.elm"]),
    strip_import_prefix = "elm",
    deps = [
        "@elm_package_elm_browser",
    ],
)

elm_binary(
    name = "app",
    main = "App.elm",
    deps = ["lib"],
)

http_server(
    name = "server",
    data = [
        "index.html",
    ] + [":app"],
)

I can then run ibazel run server, and reference the script <script src="app.js"></script> in index.html.

However, each reload requires a force reload since the file is not hashed, and not sure if there's a way to get live-reload working.

commented

I can give here my experience with dev live reload workflow:

It starts from addition of concat-js to package.json (e.g. via npm install @bazel/concatjs). Then you can add concatjs_devserver target e.g. under assets directory:

$ cat assets/BUILD.bazel
load("@npm//@bazel/concatjs:index.bzl", "concatjs_devserver")
...

concatjs_devserver(
    name = "devserver",
    deps = [":assets"],
    serving_path = "/assets/index.html",
    port = 3001,
)

However, live reloading feature that comes with concatjs_devserver is using livereload protocol which requires some client side js code (downloaded from you concatjs_devserver) included into html frontend source, e.g.:

$ cat ./assets/index.htm
...
  <body>
    <div id="elm-app-is-loaded-here"></div>
    <script src="http://localhost:35729/livereload.js?snipver=1"></script>
    <script src="main.js"></script>
...

This somehow worked for me.