Change dev build for landing-page

build-scripts/gulp/landing-page.js

@@ -1,5 +1,4 @@
 import gulp from "gulp";
-import env from "../env.cjs";
 import "./clean.js";
 import "./entry-html.js";
 import "./gather-static.js";
@@ -20,11 +19,7 @@ gulp.task(
     gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
     "copy-static-landing-page",
     "gen-pages-landing-page-dev",
-    gulp.parallel(
-      env.useRollup()
-        ? "rollup-dev-server-landing-page"
-        : "webpack-dev-server-landing-page"
-    )
+    gulp.parallel("webpack-watch-landing-page")
   )
 );
 
@@ -38,7 +33,7 @@ gulp.task(
     "translations-enable-merge-backend",
     gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
     "copy-static-landing-page",
-    env.useRollup() ? "rollup-prod-landing-page" : "webpack-prod-landing-page",
+    "webpack-prod-landing-page",
     "gen-pages-landing-page-prod"
   )
 );

build-scripts/gulp/webpack.js

@@ -203,28 +203,18 @@ gulp.task("webpack-prod-gallery", () =>
   )
 );
 
-gulp.task("webpack-dev-server-landing-page", () =>
-  runDevServer({
-    compiler: webpack(
-      process.env.ES5
-        ? bothBuilds(createLandingPageConfig, { isProdBuild: false })
-        : createLandingPageConfig({ isProdBuild: false, latestBuild: true })
-    ),
-    contentBase: paths.landingPage_output_root,
-    port: 8110,
-    listenHost: "0.0.0.0",
-    proxy: [
-      {
-        context: ["/observer"],
-        target: "http://localhost:8830",
-      },
-      {
-        context: ["/supervisor"],
-        target: "http://localhost:8830",
-      },
-    ],
-  })
-);
+gulp.task("webpack-watch-landing-page", () => {
+  // This command will run forever because we don't close compiler
+  webpack(
+    process.env.ES5
+      ? bothBuilds(createLandingPageConfig, { isProdBuild: false })
+      : createLandingPageConfig({ isProdBuild: false, latestBuild: true })
+  ).watch({ poll: isWsl }, doneHandler());
+  gulp.watch(
+    path.join(paths.translations_src, "en.json"),
+    gulp.series("build-translations", "copy-translations-app")
+  );
+});
 
 gulp.task("webpack-prod-landing-page", () =>
   prodBuild(

landing-page/README.md

@@ -19,17 +19,26 @@ In this time the [home-assistant/landingpage](https://github.com/home-assistant/
 
 ## Develop
 
+It is similar to the core frontend dev.
+
+- frontend repo is building stuff
+- landingpage repo can set the frontend repo path and serve the dev frontend
+
 ### landingpage dev server
 
 - clone [home-assistant/landingpage](https://github.com/home-assistant/landingpage)
+- Add frontend repo as mount to your devcontainer config
+  - please do not commit this changes, you can remove it after initial dev container build, because the build will keep the options as long as you don't rebuild it.
+  - `"mounts": ["source=/path/to/hass/frontend,target=/workspaces/frontend,type=bind,consistency=cached"]`
 - use the dev container
 - start the dev server with following optional env vars:
   - `SUPERVISOR_HOST` to have real supervisor data, you can [setup a supervisor remote API access](https://developers.home-assistant.io/docs/supervisor/development/#supervisor-api-access) and set the host of your supervisor. e.g.: `SUPERVISOR_HOST=192.168.0.20:8888`
   - `SUPERVISOR_TOKEN` the supervisor api token you get from the Remote API proxy Addon Logs
-  - example: `SUPERVISOR_TOKEN=abc123 SUPERVISOR_HOST=192.168.0.20:8888 go run main.go http.go mdns.go`
+  - `FRONTEND_PATH` the path inside your container should be `/workspaces/frontend`
+  - example: `SUPERVISOR_TOKEN=abc123 SUPERVISOR_HOST=192.168.0.20:8888 FRONTEND_PATH=/workspaces/frontend go run main.go http.go mdns.go`
+  - You can also add this into your devcontainer settings, but then it's not so flexible to change if you want to test something else.
 
 ### frontend dev server
 
 - install all dependencies
 - run `landing-page/script/develop`
-  - The dev server has a proxy activated to landingpage dev server (`http://localhost:8830`)

landing-page/src/components/landing-page-logs.ts

@@ -2,7 +2,7 @@ import "@material/mwc-linear-progress/mwc-linear-progress";
 import { mdiArrowCollapseDown, mdiDownload } from "@mdi/js";
 // eslint-disable-next-line import/extensions
 import { IntersectionController } from "@lit-labs/observers/intersection-controller.js";
-import { LitElement, PropertyValues, css, html, nothing } from "lit";
+import { LitElement, type PropertyValues, css, html, nothing } from "lit";
 import { classMap } from "lit/directives/class-map";
 import { customElement, property, query, state } from "lit/decorators";
 import type { LocalizeFunc } from "../../../src/common/translations/localize";

landing-page/src/components/landing-page-network.ts

@@ -1,8 +1,8 @@
 import "@material/mwc-linear-progress/mwc-linear-progress";
 import {
-  CSSResultGroup,
+  type CSSResultGroup,
   LitElement,
-  PropertyValues,
+  type PropertyValues,
   css,
   html,
   nothing,