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 +32 -9
4 changed files with 32 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit a8cc00feac - Show all commits

9
Makefile
View file

@ -40,12 +40,9 @@ backend:
serve: frontend backend serve: frontend backend
ifeq ($(DEBUG),1) ifeq ($(DEBUG),1)
RUST_LOG=info,actix_web=debug $(CARGO_RUN) --manifest-path=$(BACKEND_DIR)/Cargo.toml $(MAKE) -C $(FRONTEND_DIR) serve DEBUG=1 & \
RUST_LOG=info,actix_web=debug $(CARGO_RUN) --manifest-path=$(BACKEND_DIR)/Cargo.toml; \
kill %1
else ifeq ($(RELEASE),1) else ifeq ($(RELEASE),1)
$(CARGO_RUN) --release --manifest-path=$(BACKEND_DIR)/Cargo.toml $(CARGO_RUN) --release --manifest-path=$(BACKEND_DIR)/Cargo.toml
endif endif
clean:
rm -rf $(PUBLIC_DIR)/*
rm -rf $(BACKEND_DIR)/target
make -C $(FRONTEND_DIR) clean

9
README.md
View file

@ -12,6 +12,13 @@ make serve RELEASE=1 # can also do DEBUG=1 instead
Now open `http://127.0.0.1:8080` in your browser. Now open `http://127.0.0.1:8080` in your browser.
# Elm application hot reloading
Hot reloading for Elm application is exposed at port `8000` under `DEBUG=1` mode.
`make serve DEBUG=1`
visit `localhost:8000`
# TODO # TODO
- [ ] Address compiler warnings. - [ ] Address compiler warnings.

13
flake.nix
View file

@ -113,6 +113,19 @@
with pkgs; with pkgs;
mkShell { mkShell {
inputsFrom = [ example-spa-elm-app ]; inputsFrom = [ example-spa-elm-app ];
buildInputs = [
nodejs_22
];
shellHook = ''
if [ ! -d "$PWD/frontend/node_modules/elm-go" ]; then
echo "Installing elm-go..."
cd "$PWD/frontend"
${nodejs_22}/bin/npm install elm-go
azkarim marked this conversation as resolved Outdated
Yehowshua commented 2025-01-31 13:00:11 +00:00
Outdated
Review
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
Outdated
Review
Copy link

I will add elmPackages.elm-live

I will add `elmPackages.elm-live`
Artturin commented 2025-01-31 15:09:20 +00:00
Outdated
Review
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
Outdated
Review
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
cd ..
fi
export PATH="$PWD/frontend/node_modules/.bin:$PATH"
'';
}; };
} }
); );

10
frontend/Makefile
View file

@ -2,7 +2,7 @@ SRC_FILES := $(shell find src -name "*.elm")
all: elm.min.js all: elm.min.js
.PHONY: elm.min.js .PHONY: elm.min.js serve
ifeq ($(DEBUG)$(RELEASE),) # Both are empty ifeq ($(DEBUG)$(RELEASE),) # Both are empty
$(error You must set exactly one of DEBUG=1 or RELEASE=1) $(error You must set exactly one of DEBUG=1 or RELEASE=1)
@ -12,7 +12,6 @@ ifeq ($(DEBUG)$(RELEASE),11) # Both are set
$(error Both DEBUG and RELEASE cannot be set at the same time) $(error Both DEBUG and RELEASE cannot be set at the same time)
endif endif
elm.min.js: elm.min.js:
ifeq ($(DEBUG),1) ifeq ($(DEBUG),1)
./build.sh --debug src/Main.elm ./build.sh --debug src/Main.elm
@ -20,5 +19,12 @@ else ifeq ($(RELEASE),1)
./build.sh --optimize src/Main.elm ./build.sh --optimize src/Main.elm
endif endif
serve:
ifeq ($(DEBUG),1)
elm-go src/Main.elm --port=8000 --dir=../public --start-page=index.html -- --output=../public/elm.min.js
else ifeq ($(RELEASE),1)
$(error Cannot use serve target with RELEASE=1)
endif
clean: clean:
rm elm.js elm.min.js rm elm.js elm.min.js