fix(nitro): update azure swa implementation (#1069)

docs/content/3.docs/3.deployment/1.azure.md

@@ -6,6 +6,54 @@ icon: LogoAzure
 
 How to deploy Nuxt to Azure Static Web Apps or Azure Functions.
 
+## Azure Static Web Apps
+
+How to deploy Nuxt to Azure Static Web Apps with Nuxt Nitro.
+
+::list
+- Support for serverless SSR build
+- Auto-detected when deploying
+- Minimal configuration required
+::
+
+### Setup
+
+Azure Static Web Apps are designed to be deployed continuously in a [GitHub Actions workflow](https://docs.microsoft.com/en-us/azure/static-web-apps/github-actions-workflow). By default, Nitro will detect this deployment environment and enable the `azure` preset.
+
+### Local preview
+
+You can invoke a development environment to preview before deploying.
+
+```bash
+NITRO_PRESET=azure yarn build
+npx @azure/static-web-apps-cli start .output/public --api-location .output/server
+```
+
+### Deploy from CI/CD via GitHub Actions
+
+When you link your GitHub repository to Azure Static Web Apps, a workflow file is added to the repository.
+
+Find the build configuration section in this workflow and update the build configuration:
+
+```yml{}[.github/workflows/azure-static-web-apps-<RANDOM_NAME>.yml]
+###### Repository/Build Configurations ######
+app_location: '/'
+api_location: '.output/server'
+output_location: '.output/public'
+###### End of Repository/Build Configurations ######
+```
+
+**Note**
+
+Pending an update in the [Azure Static Web Apps workflow](https://github.com/Azure/static-web-apps-deploy), you will also need to run the following in your root directory:
+```bash
+mkdir -p .output/server
+touch .output/server/.gitkeep
+git add -f .output/server/.gitkeep
+```
+
+That's it! Now Azure Static Web Apps will automatically deploy your Nitro-powered Nuxt application on push.
+
 ## Azure Functions
 
 ::list
@@ -114,42 +162,3 @@ Consider [turning on immutable packages](https://docs.microsoft.com/en-us/azure/
 ### Demo
 
 A live demo is available on https://nuxt-nitro.azurewebsites.net/
-
-## Azure Static Web Apps
-
-How to deploy Nuxt to Azure Static Web Apps with Nuxt Nitro.
-
-::list
-- Support for serverless SSR build
-- Auto-detected when deploying
-- Minimal configuration required
-::
-
-### Setup
-
-Azure Static Web Apps are designed to be deployed continuously in a [GitHub Actions workflow](https://docs.microsoft.com/en-us/azure/static-web-apps/github-actions-workflow). By default, Nitro will detect this deployment environment and enable the `azure` preset.
-
-### Deploy from CI/CD via GitHub Actions
-
-When you link your GitHub repository to Azure Static Web Apps, a workflow file is added to the repository.
-
-Find the build configuration section in this workflow and update the build configuration:
-
-```yml{}[.github/workflows/azure-static-web-apps-<RANDOM_NAME>.yml]
-###### Repository/Build Configurations ######
-app_location: '/'
-api_location: '.output/server'
-output_location: '.output/public'
-###### End of Repository/Build Configurations ######
-```
-
-**Note**
-
-Pending an update in the [Azure Static Web Apps workflow](https://github.com/Azure/static-web-apps-deploy), you will also need to run the following in your root directory:
-```bash
-mkdir -p .output/server
-touch .output/server/.gitkeep
-git add -f .output/server/.gitkeep
-```
-
-That's it! Now Azure Static Web Apps will automatically deploy your Nitro-powered Nuxt application on push.

packages/nitro/src/presets/azure.ts

@@ -2,7 +2,7 @@ import consola from 'consola'
 import fse from 'fs-extra'
 import globby from 'globby'
 import { join, resolve } from 'pathe'
-import { writeFile } from '../utils'
+import { hl, prettyPath, writeFile } from '../utils'
 import { NitroPreset, NitroContext } from '../context'
 
 export const azure: NitroPreset = {
@@ -17,60 +17,60 @@ export const azure: NitroPreset = {
   }
 }
 
-async function writeRoutes ({ output: { serverDir, publicDir } }: NitroContext) {
+async function writeRoutes ({ output }: NitroContext) {
   const host = {
     version: '2.0'
   }
 
-  const routes = [
+  const config = {
-    {
+    routes: [],
-      route: '/*',
+    navigationFallback: {
-      serve: '/api/server'
+      rewrite: '/api/server'
     }
-  ]
+  }
 
-  const indexPath = resolve(publicDir, 'index.html')
+  const indexPath = resolve(output.publicDir, 'index.html')
   const indexFileExists = fse.existsSync(indexPath)
   if (!indexFileExists) {
-    routes.unshift(
+    config.routes.unshift(
-      {
-        route: '/',
-        serve: '/api/server'
-      },
       {
         route: '/index.html',
-        serve: '/api/server'
+        redirect: '/'
+      },
+      {
+        route: '/',
+        rewrite: '/api/server'
       }
     )
   }
 
   const folderFiles = await globby([
-    join(publicDir, 'index.html'),
+    join(output.publicDir, 'index.html'),
-    join(publicDir, '**/index.html')
+    join(output.publicDir, '**/index.html')
   ])
-  const prefix = publicDir.length
+  const prefix = output.publicDir.length
   const suffix = '/index.html'.length
   folderFiles.forEach(file =>
-    routes.unshift({
+    config.routes.unshift({
       route: file.slice(prefix, -suffix) || '/',
-      serve: file.slice(prefix)
+      rewrite: file.slice(prefix)
     })
   )
 
-  const otherFiles = await globby([join(publicDir, '**/*.html'), join(publicDir, '*.html')])
+  const otherFiles = await globby([join(output.publicDir, '**/*.html'), join(output.publicDir, '*.html')])
   otherFiles.forEach((file) => {
     if (file.endsWith('index.html')) {
       return
     }
-    const route = file.slice(prefix, -5)
+    const route = file.slice(prefix, '.html'.length)
-    const existingRouteIndex = routes.findIndex(_route => _route.route === route)
+    const existingRouteIndex = config.routes.findIndex(_route => _route.route === route)
     if (existingRouteIndex > -1) {
-      routes.splice(existingRouteIndex, 1)
+      config.routes.splice(existingRouteIndex, 1)
     }
-    routes.unshift(
+    config.routes.unshift(
       {
         route,
-        serve: file.slice(prefix)
+        rewrite: file.slice(prefix)
       }
     )
   })
@@ -94,12 +94,14 @@ async function writeRoutes ({ output: { serverDir, publicDir } }: NitroContext)
     ]
   }
 
-  await writeFile(resolve(serverDir, 'function.json'), JSON.stringify(functionDefinition))
+  await writeFile(resolve(output.serverDir, 'function.json'), JSON.stringify(functionDefinition))
-  await writeFile(resolve(serverDir, '../host.json'), JSON.stringify(host))
+  await writeFile(resolve(output.serverDir, '../host.json'), JSON.stringify(host))
-  await writeFile(resolve(publicDir, 'routes.json'), JSON.stringify({ routes }))
+  await writeFile(resolve(output.publicDir, 'staticwebapp.config.json'), JSON.stringify(config))
   if (!indexFileExists) {
     await writeFile(indexPath, '')
   }
 
-  consola.success('Ready to deploy.')
+  const apiDir = resolve(output.serverDir, '..')
+
+  consola.success('Ready to run', hl('npx @azure/static-web-apps-cli start ' + prettyPath(output.publicDir) + ' --api-location ' + prettyPath(apiDir)), 'for local testing')
 }