Gabriella439/nixos-in-production

Website autoreload of changed `index.html` doesn't work

Closed this issue · 3 comments

timfenney commented

The "Our First Webserver" part has a section, "Passing through the filesystem." When I run the command to pass the www folder (WWW="$PWD/www" nix run), I was able to fetch index.html in my browser from http://localhost:8080, and I saw the button with "+" to make a new Todo.

However when I added an <h1> to the index.html, no changes were visible in the browser even after several refreshes.

My operating system is Ubuntu 22.10. I pinned the Nix install as suggested, and it is a multiuser install. The contents of my files follows.

flake.lock:

{
  "nodes": {
    "flake-utils": {
      "locked": {
        "lastModified": 1652776076,
        "narHash": "sha256-gzTw/v1vj4dOVbpBSJX4J0DwUR6LIyXo7/SuuTJp1kM=",
        "owner": "numtide",
        "repo": "flake-utils",
        "rev": "04c1b180862888302ddfb2e3ad9eaa63afc60cf8",
        "type": "github"
      },
      "original": {
        "owner": "numtide",
        "ref": "v1.0.0",
        "repo": "flake-utils",
        "type": "github"
      }
    },
    "nixpkgs": {
      "locked": {
        "lastModified": 1663460020,
        "narHash": "sha256-rDClYj1dCXd3v5ZbIkxQLn5rkdFxqJFrPbnwz3GNXUE=",
        "owner": "NixOS",
        "repo": "nixpkgs",
        "rev": "f1a49e20e1b4a7eeb43d73d60bae5be84a1e7610",
        "type": "github"
      },
      "original": {
        "owner": "NixOS",
        "repo": "nixpkgs",
        "rev": "f1a49e20e1b4a7eeb43d73d60bae5be84a1e7610",
        "type": "github"
      }
    },
    "root": {
      "inputs": {
        "flake-utils": "flake-utils",
        "nixpkgs": "nixpkgs"
      }
    }
  },
  "root": "root",
  "version": 7
}

flake.nix:

{ inputs = {
    flake-utils.url = "github:numtide/flake-utils/v1.0.0";

    nixpkgs.url = "github:NixOS/nixpkgs/f1a49e20e1b4a7eeb43d73d60bae5be84a1e7610";
  };

  outputs = { flake-utils, nixpkgs, ... }:
    flake-utils.lib.eachDefaultSystem (system:
      let
        pkgs = nixpkgs.legacyPackages."${system}";

        base = { lib, modulesPath, ... }: {
          imports = [ "${modulesPath}/virtualisation/qemu-vm.nix" ];

          # https://github.com/utmapp/UTM/issues/2353
          networking.nameservers = lib.mkIf pkgs.stdenv.isDarwin [ "8.8.8.8" ];

          virtualisation = {
            graphics = false;

            host = { inherit pkgs; };
          };
        };

        machine = nixpkgs.lib.nixosSystem {
          system = builtins.replaceStrings [ "darwin" ] [ "linux" ] system;

          modules = [ base ./module.nix ];
        };

        program = pkgs.writeShellScript "run-vm.sh" ''
          export NIX_DISK_IMAGE=$(mktemp -u -t nixos.qcow2)

          trap "rm -f $NIX_DISK_IMAGE" EXIT

          ${machine.config.system.build.vm}/bin/run-nixos-vm
        '';

      in
        { packages = { inherit machine; };

          apps.default = {
            type = "app";

            program = "${program}";
          };
        }
    );
}

module.nix:

{
    services.nginx = {
        enable = true;
        virtualHosts.localhost.locations."/" = {
            index = "index.html";
            root = ./www;
        };
    };
    networking.firewall.allowedTCPPorts = [ 80 ];
    virtualisation.forwardPorts = [
        { from = "host"; guest.port = 80; host.port = 8080; }
    ];
    virtualisation.sharedDirectories.www = {
        source = "$WWW";
        target = "/var/www";
    };
    users.users.root.initialPassword = "";
    system.stateVersion = "22.11";
}

www/index.html:

<html>
<body>
    <h1>Todo, muthafuckas</h1>
<button id='add'>+</button>
</body>
<script>
let add = document.getElementById('add');

function newTask() {
    let subtract = document.createElement('button');
    subtract.textContent = "-";

    let input = document.createElement('input');
    input.setAttribute('type', 'text');

    let div = document.createElement('div');
    div.replaceChildren(subtract, input);

    function remove() {
        div.replaceChildren();
        div.remove();
    }

    subtract.addEventListener('click', remove);
    add.before(div);
}

add.addEventListener('click', newTask);
</script>
</html>
Gabriella439 commented

yeah, this was an issue in the first release of the book (see: #3) and was fixed in 83e069f and #6

if you download the latest release of the book the example is fixed

timfenney commented

Wow thanks for the fast reply!! 🔥

Gabriella439 commented

you're welcome! 😊