fix: add support for SPA mode (aka. historyMode)

Author: manekinekko

bin/index.js

@@ -41,14 +41,8 @@ const appUriPort = appUriSegments[2] || APP_PORT;
 
 // provide binaries
 const concurrentlyBin = path.resolve(__dirname, "..", "./node_modules/.bin/concurrently");
-const httpServerBin = path.resolve(__dirname, "..", "./node_modules/.bin/http-server");
 const { app_artifact_location, api_location } = readConfigFile();
 
-if (program.build) {
-  // run the app/api builds
-  builder();
-}
-
 const envVarsObj = {
   // set env vars for current command
   StaticWebAppsAuthCookie: 123,
@@ -74,7 +68,7 @@ const startCommand = [
   // run concurrent commands
   concurrentlyBin,
   `--restart-tries 3`,
-  `--names emulator,auth,hosting,functions`,
+  `--names x,emulator,auth,hosting,functions`,
   `-c 'bgYellow.bold,bgMagenta.bold,bgCyan.bold,bgGreen.bold'`,
 
   // start the reverse proxy
@@ -96,6 +90,11 @@ if (process.env.DEBUG) {
   console.log(startCommand);
 }
 
+if (program.build) {
+  // run the app/api builds
+  builder();
+}
+
 if (program.ui) {
   // print the dashboard UI
 

src/proxy.js

@@ -15,7 +15,7 @@ const serveStatic = (file, res) => {
       res.end(JSON.stringify(err));
       return;
     }
-    console.log("serving", file);
+    console.log(">> serving", file);
     res.writeHead(200);
     res.end(data);
   });
@@ -128,12 +128,19 @@ const server = http.createServer(function (req, res) {
   }
 
   // detected a proxy pass-through from http-server, so 404 it
-  else if (req.url.startsWith("/?") || req.url.startsWith("/routes.json")) {
+  else if (req.url.startsWith("/routes.json")) {
     console.log("proxy>", req.method, req.headers.host + req.url);
     const file404 = path.resolve(__dirname, "404.html");
     serveStatic(file404, res);
   }
 
+  // detected SPA mode
+  else if (req.url.startsWith("/?")) {
+    console.log("proxy>", req.method, req.headers.host + req.url);
+    const fileIndex = path.join(process.env.SWA_EMU_APP_LOCATION, "index.html");
+    serveStatic(fileIndex, res);
+  }
+
   // proxy APP request to local APP
   else {
     const target = process.env.SWA_EMU_APP_URI || "http://localhost:4200";

src/runtimeHost.js

@@ -8,6 +8,8 @@ module.exports.createRuntimeHost = (port, proxyHost, proxyPort) => {
   const { app_location, app_artifact_location } = readConfigFile();
   const runtimeType = detectRuntime(app_location);
 
+  console.log(">> detected runtime:", runtimeType);
+
   switch (runtimeType) {
     // .NET runtime
     case RuntimeType.dotnet:
@@ -20,7 +22,6 @@ module.exports.createRuntimeHost = (port, proxyHost, proxyPort) => {
     case RuntimeType.node:
     case RuntimeType.unknown:
     default:
-
       // See available options for http-server: https://github.com/http-party/http-server#available-options
       // Note: --proxy allows us to add fallback routes for SPA (https://github.com/http-party/http-server#catch-all-redirect)
       const command = httpServerBin;

src/runtimes.js

@@ -20,15 +20,12 @@ module.exports.detectRuntime = (app_location) => {
   const files = fs.readdirSync(app_location);
 
   if (files.some((file) => path.extname(file) === ".csproj")) {
-    console.log(">> .NET detected.");
     return RuntimeType.dotnet;
   }
 
   if (files.includes("package.json")) {
-    console.log(">> Node.js detected.");
     return RuntimeType.node;
   }
 
-  console.log(">> Unknown runtime detected.");
   return RuntimeType.unknown;
 };