fix: do not rewrite /api and /data-api requests to SvelteKit (#162)

.github/workflows/azure-static-web-apps-polite-desert-00b80111e.yml

@@ -44,7 +44,7 @@ jobs:
           ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
           # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
           app_location: '/demo' # App source code path
-          api_location: 'demo/build/server' # Api source code path - optional
+          api_location: 'demo/func' # Api source code path - optional
           output_location: 'build/static' # Built app content directory - optional
           # needed when we set CUSTOM_BUILD_COMMAND
           skip_api_build: true

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 coverage/
 *.tgz
+.vscode/

.prettierignore

@@ -1,2 +1,5 @@
 CHANGELOG.md
 coverage/
+build/
+.svelte-kit/
+sk_render/

demo/.gitignore

@@ -10,3 +10,4 @@ node_modules
 .output
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+sk_render/

demo/README.md

@@ -4,6 +4,8 @@ This is a repo demonstrating how to use [svelte-adapter-azure-swa](https://www.n
 
 This demo uses the local version of the adapter to make testing unreleased changes easier. In your app, you should install `svelte-adapter-azure-swa` from npm.
 
+This demo also uses a custom Azure function to make testing that integration easier. If you do not need a custom Azure function, you do not need the `func/` folder or need to set the `apiDir` option in `svelte.config.js`.
+
 [Deployed demo](https://polite-desert-00b80111e.2.azurestaticapps.net/)
 
 ## Developing

demo/func/HelloWorld/function.json

@@ -0,0 +1,16 @@
+{
+	"bindings": [
+		{
+			"authLevel": "anonymous",
+			"type": "httpTrigger",
+			"direction": "in",
+			"name": "req",
+			"methods": ["get", "post"]
+		},
+		{
+			"type": "http",
+			"direction": "out",
+			"name": "res"
+		}
+	]
+}

demo/func/HelloWorld/index.js

@@ -0,0 +1,13 @@
+module.exports = async function (context, req) {
+	context.log('JavaScript HTTP trigger function processed a request.');
+
+	const name = req.query.name || (req.body && req.body.name);
+	const responseMessage = name
+		? 'Hello, ' + name + '. This HTTP triggered function executed successfully.'
+		: 'This HTTP triggered function executed successfully. Pass a name in the query string or in the request body for a personalized response.';
+
+	context.res = {
+		// status: 200, /* Defaults to 200 */
+		body: responseMessage
+	};
+};

demo/func/HelloWorld/sample.dat

@@ -0,0 +1,3 @@
+{
+    "name": "Azure"
+}

demo/func/host.json

@@ -0,0 +1,7 @@
+{
+	"version": "2.0",
+	"extensionBundle": {
+		"id": "Microsoft.Azure.Functions.ExtensionBundle",
+		"version": "[2.*, 3.0.0)"
+	}
+}

demo/func/package.json

@@ -0,0 +1 @@
+{}

demo/svelte.config.js

@@ -3,7 +3,9 @@ import adapter from 'svelte-adapter-azure-swa';
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	kit: {
-		adapter: adapter()
+		adapter: adapter({
+			apiDir: './func'
+		})
 	}
 };
 

demo/tests/test.js

@@ -17,3 +17,12 @@ test('submits sverdle guess', async ({ page }) => {
 	await expect(input).toHaveValue('a');
 	await expect(input).toBeDisabled();
 });
+
+test('can call custom API azure function', async ({ request }) => {
+	const response = await request.post('/api/HelloWorld', {
+		data: {
+			name: 'Geoff'
+		}
+	});
+	expect(response.ok()).toBeTruthy();
+});

index.js

@@ -196,6 +196,12 @@ export function generateConfig(customStaticWebAppConfig, appDir) {
 		...customStaticWebAppConfig,
 		routes: [
 			...customStaticWebAppConfig.routes,
+			{
+				route: '/api/*'
+			},
+			{
+				route: '/data-api/*'
+			},
 			{
 				route: '*',
 				methods: ['POST', 'PUT', 'DELETE'],

test/index.test.js

@@ -26,7 +26,7 @@ describe('generateConfig', () => {
 			platform: {
 				apiRuntime: 'node:16'
 			},
-			routes: [
+			routes: expect.arrayContaining([
 				{
 					methods: ['POST', 'PUT', 'DELETE'],
 					rewrite: '/api/__render',
@@ -38,7 +38,7 @@ describe('generateConfig', () => {
 					},
 					route: '/appDir/immutable/*'
 				}
-			]
+			])
 		});
 	});