chore: fix TS types, document CUSTOM_BUILD_COMMAND, enable HTTP streaming (#192)

Author: ktarmyshov

README.md

@@ -53,6 +53,30 @@ Oryx, Azure's build system, may attempt to build your application with an EOL ve
 }
 ```
 
+### CUSTOM_BUILD_COMMAND
+
+If `CUSTOM_BUILD_COMMAND` is not provided to the github action, the [azure swa github action](https://docs.microsoft.com/en-us/azure/static-web-apps/build-configuration?tabs=github-actions) runs the following (as of 03.03.2025)
+
+```yaml
+npm install # this could lead to differences in final used dependencies
+npm run build
+npm run build:azure # Although according to docs "...the workflow tries to run the npm run build or npm run build:azure commands"
+npm install # in build/server
+```
+
+If you wish to control that `npm ci` is executed instead of `npm install`, define the `CUSTOM_BUILD_COMMAND` environment variable for the build in combination with `skip_api_build: true`. In this case you will need to execute `npm install` in the `build/server` directory with api functions manually.
+
+```yaml
+	...
+	env:
+		# npm install in build/server should be executed manually
+		# or execute npm ci before this action
+		CUSTOM_BUILD_COMMAND: "npm ci && npm run build && npm install --prefix ./build/server --omit=dev"
+	with:
+		skip_api_build: true
+		...
+```
+
 ## Running locally with the Azure SWA CLI
 
 You can debug using the [Azure Static Web Apps CLI](https://github.com/Azure/static-web-apps-cli). Note that the CLI is currently in preview and you may encounter issues.

demo/src/routes/styles.css

@@ -1,8 +1,9 @@
 @import '@fontsource/fira-mono';
 
 :root {
-	--font-body: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-		Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+	--font-body:
+		Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+		'Open Sans', 'Helvetica Neue', sans-serif;
 	--font-mono: 'Fira Mono', monospace;
 	--color-bg-0: rgb(202, 216, 228);
 	--color-bg-1: hsl(209, 36%, 86%);
@@ -22,11 +23,8 @@ body {
 	background-attachment: fixed;
 	background-color: var(--color-bg-1);
 	background-size: 100vw 100vh;
-	background-image: radial-gradient(
-			50% 50% at 50% 50%,
-			rgba(255, 255, 255, 0.75) 0%,
-			rgba(255, 255, 255, 0) 100%
-		),
+	background-image:
+		radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 100%),
 		linear-gradient(180deg, var(--color-bg-0) 0%, var(--color-bg-1) 15%, var(--color-bg-2) 50%);
 }
 

files/api/.funcignore

@@ -0,0 +1,10 @@
+*.js.map
+*.ts
+.git*
+.vscode
+__azurite_db*__.json
+__blobstorage__
+__queuestorage__
+local.settings.json
+test
+tsconfig.json

files/entry.js

@@ -6,7 +6,7 @@ import {
 	getClientPrincipalFromHeaders,
 	splitCookiesFromHeaders
 } from './headers';
-import { app } from '@azure/functions';
+import { app, HttpResponse } from '@azure/functions';
 
 // replaced at build time
 // @ts-expect-error
@@ -20,9 +20,12 @@ const initialized = server.init({ env: process.env });
 /**
  * @typedef {import('@azure/functions').InvocationContext} InvocationContext
  * @typedef {import('@azure/functions').HttpRequest} HttpRequest
- * @typedef {import('@azure/functions').HttpResponse} HttpResponse
  */
 
+app.setup({
+	enableHttpStream: true
+});
+
 app.http('sk_render', {
 	methods: ['HEAD', 'GET', 'POST', 'DELETE', 'PUT', 'OPTIONS'],
 	/**
@@ -96,7 +99,6 @@ function toRequest(httpRequest) {
 	return new Request(originalUrl, {
 		method: httpRequest.method,
 		headers: new Headers(headers),
-		// @ts-ignore
 		body: httpRequest.body,
 		duplex: 'half'
 	});
@@ -109,12 +111,11 @@ function toRequest(httpRequest) {
 async function toResponse(rendered) {
 	const { headers, cookies } = splitCookiesFromHeaders(rendered.headers);
 
-	return {
+	return new HttpResponse({
 		status: rendered.status,
-		// @ts-ignore
 		body: rendered.body,
 		headers,
 		cookies,
 		enableContentNegotiation: false
-	};
+	});
 }

index.d.ts

@@ -39,7 +39,7 @@ declare global {
 			 */
 			context: InvocationContext;
 
-			user: HttpRequestUser;
+			user: HttpRequestUser | null;
 
 			clientPrincipal?: ClientPrincipal;
 		}