frontend: add nginx webserver

* creates a customizable nginx webserver for local development * adds nix-inclusive to prevent unnecessary rebuilds * changes VITE_BASE_URL to not automatically append `/api`
IntersectMBO · May 30, 2024 · 1b8e94b · 1b8e94b
1 parent 5ad1a80
commit 1b8e94b
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 13 deletions.
diff --git a/flake.lock b/flake.lock
diff --git a/flake.nix b/flake.nix
@@ -1,26 +1,32 @@
 {
   description = "GovTool and utilities monorepo.";
+  inputs = {
+    default_nixpkgs.url = "github:nixos/nixpkgs/c9ece0059f42e0ab53ac870104ca4049df41b133";
+    node_nixpkgs.url = "github:nixos/nixpkgs/9957cd48326fe8dbd52fdc50dd2502307f188b0d";
+    flake-utils.url = "github:numtide/flake-utils";
+    nix-inclusive.url = "github:input-output-hk/nix-inclusive";
+  };
 
-  inputs.default_nixpkgs.url = "github:nixos/nixpkgs/c9ece0059f42e0ab53ac870104ca4049df41b133";
-  inputs.node_nixpkgs.url = "github:nixos/nixpkgs/9957cd48326fe8dbd52fdc50dd2502307f188b0d";
-  inputs.flake-utils.url = "github:numtide/flake-utils";
-
-  outputs = { self, default_nixpkgs, node_nixpkgs, flake-utils, ... }:
+  outputs = { self, default_nixpkgs, node_nixpkgs, flake-utils, nix-inclusive, ... }:
     flake-utils.lib.eachDefaultSystem (system:
       let
         defaultPkgs = import default_nixpkgs { inherit system; config.allowBroken = true; };
         nodePkgs = import node_nixpkgs { inherit system; config.allowUnfree = true; };
-        frontend = nodePkgs.callPackage ./govtool/frontend { pkgs = nodePkgs; };
+        frontend = nodePkgs.callPackage ./govtool/frontend { pkgs = nodePkgs; incl = nix-inclusive.lib.inclusive; };
       in
       {
         packages.scripts = defaultPkgs.callPackage ./scripts/govtool { pkgs = nodePkgs; };
         packages.infra = defaultPkgs.callPackage ./infra/terraform { pkgs = nodePkgs; };
         packages.backend = defaultPkgs.callPackage ./govtool/backend { pkgs = defaultPkgs; };
-        packages.frontendModules = frontend.nodeModules;
-        packages.frontend = frontend.staticSite;
+        packages.frontend = frontend;
+        packages.webserver = defaultPkgs.callPackage frontend.webserver {
+          staticSiteRoot = frontend.staticSite.overrideAttrs (finalAttrs: prevAttrs: {
+            VITE_BASE_URL = "/api";
+          });
+        };
 
         # Example of how to change VITE variables
-        #packages.frontendOverride = frontend.staticSite.overrideAttrs (finalAttrs: prevAttrs: {
+        #packages.frontendOverride = frontend.overrideAttrs (finalAttrs: prevAttrs: {
         #  VITE_BASE_URL = "https://example.com:8443";
         #});
 

diff --git a/govtool/frontend/.envrc b/govtool/frontend/.envrc
@@ -9,7 +9,7 @@ if [[ "${CARDANO_NETWORK}" = "mainnet" ]]; then
 else
   export VITE_NETWORK_FLAG=0
 fi
-export VITE_BASE_URL=http://localhost
+export VITE_BASE_URL=http://localhost:9999
 export VITE_IS_DEV=true
 export VITE_GTM_ID="${GTM_ID}"
 export VITE_SENTRY_DSN="${SENTRY_DSN}"

diff --git a/govtool/frontend/default.nix b/govtool/frontend/default.nix
@@ -1,4 +1,5 @@
 { pkgs ? import <nixpkgs> {}
+, incl
 , VITE_BASE_URL ? "http://localhost"
 , VITE_IS_DEV ? "true"
 , VITE_GTM_ID ? ""
@@ -7,16 +8,26 @@
 }:
 let
   VITE_NETWORK_FLAG = if CARDANO_NETWORK == "mainnet" then "1" else "0";
+  frontendSrc = incl ./. [
+    ./package.json
+    ./yarn.lock
+    ./src
+    ./public
+    ./patches
+    ./vite.config.ts
+    ./index.html
+  ];
+
   nodeModules = pkgs.mkYarnPackage {
     name = "govtool-node-modules";
-    src = ./.;
+    src = frontendSrc;
     packageJSON = ./package.json;
     yarnLock = ./yarn.lock;
     nodejs = pkgs.nodejs_18;
   };
   staticSite = pkgs.stdenv.mkDerivation {
     name = "govtool-website";
-    src = ./.;
+    src = frontendSrc;
     buildInputs = [pkgs.yarn nodeModules];
     inherit VITE_BASE_URL VITE_IS_DEV VITE_GTM_ID VITE_SENTRY_DSN VITE_NETWORK_FLAG;
     buildPhase = ''
@@ -27,7 +38,33 @@ let
       mv dist $out
     '';
   };
+  webserver = { staticSiteRoot ? staticSite, backendUrl ? "http://localhost:9999" }: let
+    nginxConfig = pkgs.writeText "govtool-nginx.conf" ''
+      daemon off;
+      pid /tmp/govtool-nginx.pid;
+      events {
+      }
+      error_log /dev/stdout info;
+      http {
+        access_log /dev/stdout combined;
+        server {
+          listen 8081;
+          include ${pkgs.nginx}/conf/mime.types;
+          root ${staticSiteRoot}/;
+          index index.html;
+          try_files $uri $uri /index.html;
+          location /api/ {
+            proxy_pass ${backendUrl}/;
+          }
+        }
+      }
+    '';
+  in pkgs.writeScriptBin "govtool-webserver" ''
+    echo "Starting nginx from site root ${staticSiteRoot}... at http://localhost:8081"
+    ${pkgs.nginx}/bin/nginx -c ${nginxConfig} -e /dev/stderr
+  '';
   devShell = pkgs.mkShell {
+    buildInputs = [pkgs.nodejs_18 pkgs.yarn];
     shellHook = ''
       function warn() { tput setaf $2; echo "$1"; tput sgr0; }
 
@@ -39,4 +76,4 @@ let
       ln -s ${nodeModules.out}/libexec/voltaire-voting-app/node_modules ./node_modules
     '';
   };
-in { inherit nodeModules devShell staticSite; }
+in staticSite // { inherit nodeModules devShell staticSite webserver; }