ReferenceProjects/example-spa-elm-app
1
0
Fork 0
Code Issues 1 Pull requests Actions Packages Projects Releases Wiki Activity

Hot reload for Elm application #6

Merged
Yehowshua merged 3 commits from nix-frontend-hot-reload into main 2025-02-02 20:58:57 +00:00
Conversation 2 Commits 3 Files changed 4 +45 -9
azkarim commented 2025-01-31 11:21:19 +00:00
Collaborator
Copy link

Currently there are no setup for Elm application to reflect changes in the browser without killing the server and restarting for each change. This PR adds elm-go to Nix setup which enables live reloads.

But comes with few caveats

  • Hot reload is exposed at port 8000 (different from rust backend running at port 8080)
  • Only available in debug mode i.e. make serve DEBUG=1

The is not ideal as web sockets and any communication with backend fails due to port mismatch. This can be solved by adding a reverse proxy (like Caddy) that maps localhost:8000 to localhost:8080 but this entail bringing in additional setup complexity in Nix which we can avoid for now.

One more thing, we can always use refresh the page while working on port 8080 page (backend enabled).

Currently there are no setup for Elm application to reflect changes in the browser without killing the server and restarting for each change. This PR adds `elm-go` to Nix setup which enables live reloads. But comes with few caveats - Hot reload is exposed at port `8000` (different from rust backend running at port `8080`) - Only available in debug mode i.e. `make serve DEBUG=1` The is not ideal as web sockets and any communication with backend fails due to port mismatch. This can be solved by adding a reverse proxy (like Caddy) that maps `localhost:8000` to `localhost:8080` but this entail bringing in additional setup complexity in Nix which we can avoid for now. One more thing, we can always use refresh the page while working on port `8080` page (backend enabled).
azkarim added 1 commit 2025-01-31 11:21:19 +00:00
azkarim requested review from Yehowshua 2025-01-31 11:23:06 +00:00
Yehowshua reviewed 2025-01-31 13:00:11 +00:00
flake.nix Outdated
@ -116,0 +121,4 @@
if [ ! -d "$PWD/frontend/node_modules/elm-go" ]; then
echo "Installing elm-go..."
cd "$PWD/frontend"
${nodejs_22}/bin/npm install elm-go
Yehowshua commented 2025-01-31 13:00:11 +00:00
Owner
Copy link

So you're technically not supposed to install things inside nix build files that require internet access. To fix this, we should either use elmPackages.elm-live or have @Artturin package up the elm-live fork, elm-go.

So you're technically not supposed to install things inside nix build files that require internet access. To fix this, we should either use [elmPackages.elm-live](https://search.nixos.org/packages?channel=24.11&show=elmPackages.elm-live&from=0&size=50&sort=relevance&type=packages&query=elm-live) or have @Artturin package up the elm-live fork, [elm-go](https://github.com/lucamug/elm-go).
azkarim commented 2025-01-31 13:02:46 +00:00
Author
Collaborator
Copy link

I will add elmPackages.elm-live

I will add `elmPackages.elm-live`
Artturin commented 2025-01-31 15:09:20 +00:00
Collaborator
Copy link

So you're technically not supposed to install things inside nix build files that require internet access. To fix this, we should either use elmPackages.elm-live or have @Artturin package up the elm-live fork, elm-go.

This is a mkShell shellHook, which runs commands outside the build sandbox so using the internet is fine but running a package managers install commands is still unhygienic.

Here's a patch adding elm-go which can then be used with pkgs.elm-go

diff --git a/flake.nix b/flake.nix
index aa446c5..59789cc 100644
--- a/flake.nix
+++ b/flake.nix
@@ -99,6 +99,29 @@
                   }
                 )
               ) { };
+
+              elm-go = prev.callPackage (
+                {
+                  lib,
+                  buildNpmPackage,
+                  elmPackages,
+                }:
+                buildNpmPackage {
+                  name = "elm-go";
+                  version = "5.0.20";
+                  src = pkgs.fetchFromGitHub {
+                    owner = "lucamug";
+                    repo = "elm-go";
+                    rev = "9a7bd8c980a03b026128fcd626b9395b4e2cb1e0";
+                    sha256 = "sha256-B5Cngv8EGOY79u9aZeixA3EBt8rIc6bkYA4zoqycpk8=";
+                  };
+                  npmDepsHash = "sha256-0LfLpUbav8cVoZ9/Cjb7Mr8jdo1/KjVcjR4lcYB3AzY=";
+                  dontNpmBuild = true;
+                  makeWrapperArgs = [
+                    "--suffix PATH : ${lib.makeBinPath [ elmPackages.elm ]}"
+                  ];
+                }
+              ) { };
             })
           ];
         };
> So you're technically not supposed to install things inside nix build files that require internet access. To fix this, we should either use [elmPackages.elm-live](https://search.nixos.org/packages?channel=24.11&show=elmPackages.elm-live&from=0&size=50&sort=relevance&type=packages&query=elm-live) or have @Artturin package up the elm-live fork, [elm-go](https://github.com/lucamug/elm-go). This is a `mkShell` `shellHook`, which runs commands outside the build sandbox so using the internet is fine but running a package managers install commands is still unhygienic. Here's a patch adding elm-go which can then be used with `pkgs.elm-go` ```diff diff --git a/flake.nix b/flake.nix index aa446c5..59789cc 100644 --- a/flake.nix +++ b/flake.nix @@ -99,6 +99,29 @@ } ) ) { }; + + elm-go = prev.callPackage ( + { + lib, + buildNpmPackage, + elmPackages, + }: + buildNpmPackage { + name = "elm-go"; + version = "5.0.20"; + src = pkgs.fetchFromGitHub { + owner = "lucamug"; + repo = "elm-go"; + rev = "9a7bd8c980a03b026128fcd626b9395b4e2cb1e0"; + sha256 = "sha256-B5Cngv8EGOY79u9aZeixA3EBt8rIc6bkYA4zoqycpk8="; + }; + npmDepsHash = "sha256-0LfLpUbav8cVoZ9/Cjb7Mr8jdo1/KjVcjR4lcYB3AzY="; + dontNpmBuild = true; + makeWrapperArgs = [ + "--suffix PATH : ${lib.makeBinPath [ elmPackages.elm ]}" + ]; + } + ) { }; }) ]; }; ```
👍 1
azkarim commented 2025-01-31 15:48:04 +00:00
Author
Collaborator
Copy link

So you're technically not supposed to install things inside nix build files that require internet access. To fix this, we should either use elmPackages.elm-live or have @Artturin package up the elm-live fork, elm-go.

This is a mkShell shellHook, which runs commands outside the build sandbox so using the internet is fine but running a package managers install commands is still unhygienic.

Here's a patch adding elm-go which can then be used with pkgs.elm-go

diff --git a/flake.nix b/flake.nix
index aa446c5..59789cc 100644
--- a/flake.nix
+++ b/flake.nix
@@ -99,6 +99,29 @@
                   }
                 )
               ) { };
+
+              elm-go = prev.callPackage (
+                {
+                  lib,
+                  buildNpmPackage,
+                  elmPackages,
+                }:
+                buildNpmPackage {
+                  name = "elm-go";
+                  version = "5.0.20";
+                  src = pkgs.fetchFromGitHub {
+                    owner = "lucamug";
+                    repo = "elm-go";
+                    rev = "9a7bd8c980a03b026128fcd626b9395b4e2cb1e0";
+                    sha256 = "sha256-B5Cngv8EGOY79u9aZeixA3EBt8rIc6bkYA4zoqycpk8=";
+                  };
+                  npmDepsHash = "sha256-0LfLpUbav8cVoZ9/Cjb7Mr8jdo1/KjVcjR4lcYB3AzY=";
+                  dontNpmBuild = true;
+                  makeWrapperArgs = [
+                    "--suffix PATH : ${lib.makeBinPath [ elmPackages.elm ]}"
+                  ];
+                }
+              ) { };
             })
           ];
         };

@Artturin Thanks

> > So you're technically not supposed to install things inside nix build files that require internet access. To fix this, we should either use [elmPackages.elm-live](https://search.nixos.org/packages?channel=24.11&show=elmPackages.elm-live&from=0&size=50&sort=relevance&type=packages&query=elm-live) or have @Artturin package up the elm-live fork, [elm-go](https://github.com/lucamug/elm-go). > > This is a `mkShell` `shellHook`, which runs commands outside the build sandbox so using the internet is fine but running a package managers install commands is still unhygienic. > > Here's a patch adding elm-go which can then be used with `pkgs.elm-go` > > ```diff > diff --git a/flake.nix b/flake.nix > index aa446c5..59789cc 100644 > --- a/flake.nix > +++ b/flake.nix > @@ -99,6 +99,29 @@ > } > ) > ) { }; > + > + elm-go = prev.callPackage ( > + { > + lib, > + buildNpmPackage, > + elmPackages, > + }: > + buildNpmPackage { > + name = "elm-go"; > + version = "5.0.20"; > + src = pkgs.fetchFromGitHub { > + owner = "lucamug"; > + repo = "elm-go"; > + rev = "9a7bd8c980a03b026128fcd626b9395b4e2cb1e0"; > + sha256 = "sha256-B5Cngv8EGOY79u9aZeixA3EBt8rIc6bkYA4zoqycpk8="; > + }; > + npmDepsHash = "sha256-0LfLpUbav8cVoZ9/Cjb7Mr8jdo1/KjVcjR4lcYB3AzY="; > + dontNpmBuild = true; > + makeWrapperArgs = [ > + "--suffix PATH : ${lib.makeBinPath [ elmPackages.elm ]}" > + ]; > + } > + ) { }; > }) > ]; > }; > ``` @Artturin Thanks
azkarim marked this conversation as resolved
azkarim added 1 commit 2025-01-31 14:08:20 +00:00
Artturin commented 2025-01-31 15:13:36 +00:00
Collaborator
Copy link
  • Hot reload is exposed at port 8000 (different from rust backend running at port 8080)
  • Only available in debug mode i.e. make serve DEBUG=1

The is not ideal as web sockets and any communication with backend fails due to port mismatch. This can be solved by adding a reverse proxy (like Caddy) that maps localhost:8000 to localhost:8080 but this entail bringing in additional setup complexity in Nix which we can avoid for now.

One more thing, we can always use refresh the page while working on port 8080 page (backend enabled).

The port can be changed with EXAMPLE_ELM_APP_PORT env var if needed.

> - Hot reload is exposed at port `8000` (different from rust backend running at port `8080`) > - Only available in debug mode i.e. `make serve DEBUG=1` > > The is not ideal as web sockets and any communication with backend fails due to port mismatch. This can be solved by adding a reverse proxy (like Caddy) that maps `localhost:8000` to `localhost:8080` but this entail bringing in additional setup complexity in Nix which we can avoid for now. > > One more thing, we can always use refresh the page while working on port `8080` page (backend enabled). The port can be changed with `EXAMPLE_ELM_APP_PORT` env var if needed.
azkarim added 1 commit 2025-01-31 15:45:59 +00:00
Yehowshua commented 2025-02-02 20:58:49 +00:00
Owner
Copy link

Looks good to me! Merging now!

Looks good to me! Merging now!
Yehowshua merged commit c51606377c into main 2025-02-02 20:58:57 +00:00
Yehowshua deleted branch nix-frontend-hot-reload 2025-02-02 20:58:58 +00:00
Sign in to join this conversation.
Reviewers
No reviewers
Yehowshua
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
3 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: ReferenceProjects/example-spa-elm-app#6
No description provided.
Delete branch "nix-frontend-hot-reload"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?