Merge pull request #242582 from thomasgauvin/patch-10

Fix NuxtJS doc (based on a previous commit)

Author: v-regandowner

articles/static-web-apps/deploy-nuxtjs.md

@@ -24,16 +24,15 @@ In this tutorial, you learn to deploy a [Nuxt 3](https://v3.nuxtjs.org/) applica
 
 You can set up a new Nuxt project using `npx nuxi init nuxt-app`. Instead of using a new project, this tutorial uses an existing repository set up to demonstrate how to deploy a Nuxt 3 site with universal rendering on Azure Static Web Apps.
 
-1. Create a new repository under your GitHub account from a template repository.
-1. Go to [http://github.com/staticwebdev/nuxt-3-starter/generate](https://github.com/login?return_to=/staticwebdev/nuxt-3-starter/generate)
+1. Navigate to [http://github.com/staticwebdev/nuxt-3-starter/generate](https://github.com/login?return_to=/staticwebdev/nuxt-3-starter/generate).
 1. Name the repository **nuxt-3-starter**.
 1. Next, clone the new repo to your machine. Make sure to replace <YOUR_GITHUB_ACCOUNT_NAME> with your account name.
 
     ```bash
     git clone http://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/nuxt-3-starter
     ```
 
-1. Go to the newly cloned Nuxt.js app:
+1. Navigate to the newly cloned Nuxt.js app:
 
    ```bash
    cd nuxt-3-starter
@@ -51,47 +50,17 @@ You can set up a new Nuxt project using `npx nuxi init nuxt-app`. Instead of usi
     npm run dev -- -o
     ```
 
-Go to `http://localhost:3000` to open the app, where you should see the following website open in your preferred browser:
+Navigate to `http://localhost:3000` to open the app, where you should see the following website open in your preferred browser. Select the buttons to invoke server and API routes.
 
 :::image type="content" source="media/deploy-nuxtjs/nuxt-3-app.png" alt-text="Start Nuxt.js app":::
 
-When you select a framework/library, you should see a details page about the selected item:
+## Deploy your Nuxt 3 site
 
-:::image type="content" source="media/deploy-nuxtjs/start-nuxtjs-details.png" alt-text="Details page":::
-
-## Generate a static website from Nuxt.js build
-
-When you build a Nuxt.js site using `npm run build`, the app is built as a traditional web app, not a static site. To generate a static site, use the following application configuration.
-
-1. Update the _package.json_'s build script to only generate a static site using the `nuxt generate` command:
-
-    ```json
-    "scripts": {
-      "dev": "nuxt dev",
-      "build": "nuxt generate"
-    },
-    ```
-
-    Now with this command in place, Static Web Apps runs the `build` script every time you push a commit.
-
-2. Generate a static site:
-
-    ```bash
-    npm run build
-    ```
-
-    Nuxt.js generates the static site and copy it into a _dist_ folder at the root of your working directory.
-
-    > [!NOTE]
-    > This folder is listed in the _.gitignore_ file because it should be generated by CI/CD when you deploy.
-
-## Deploy your static website
-
-The following steps show how to link the app you just pushed to GitHub to Azure Static Web Apps. Once in Azure, you can deploy the application to a production environment.
+The following steps show how to create an Azure Static Web Apps resource and configure it to deploy your app from GitHub.
 
 ### Create an Azure Static Web Apps resource
 
-1. Go to the [Azure portal](https://portal.azure.com).
+1. Navigate to the [Azure portal](https://portal.azure.com).
 1. Select **Create a Resource**.
 1. Search for **Static Web Apps**.
 1. Select **Static Web Apps**.
@@ -127,13 +96,13 @@ The following steps show how to link the app you just pushed to GitHub to Azure
 
 1. Select **Review + Create** to verify the details are all correct.
 
-2. Select **Create** to start the creation of the App Service Static Web App and provision a GitHub Actions for deployment.
+1. Select **Create** to start the creation of the static web app and provision a GitHub Actions for deployment.
 
-3. Once the deployment completes, select **Go to resource**.
+1. Once the deployment completes, select **Go to resource**.
 
-4. On the _Overview_ window, select the *URL* link to open your deployed application.
+1. On the _Overview_ window, select the *URL* link to open your deployed application.
 
-If the website does note immediately load, then the background GitHub Actions workflow is still running. Once the workflow is complete you can then select refresh the browser to view your web app.
+If the website does not immediately load, then the background GitHub Actions workflow is still running. Once the workflow is complete you can then refresh the browser to view your web app.
 
 You can check the status of the Actions workflows by navigating to the Actions for your repository:
 
@@ -143,50 +112,15 @@ https://github.com/<YOUR_GITHUB_USERNAME>/nuxt-3-starter/actions
 
 ### Synchronize changes
 
-When you created the app, Azure Static Web Apps created a GitHub Actions workflow file in your repository. Return to the terminal and run the following command `git pull origin main` to pull the commit containing the new file.
-
-## Configure dynamic routes
+When you created the app, Azure Static Web Apps created a GitHub Actions workflow file in your repository. Return to the terminal and run the following command to pull the commit containing the new file.
 
-Go to the newly-deployed site and select one of the framework or library logos. Instead of getting a details page, you get a 404 error page.
-
-:::image type="content" source="media/deploy-nuxtjs/404-in-production.png" alt-text="404 on dynamic routes":::
-
-The reason for this is, Nuxt.js generated the static site, it only did so for the home page. Nuxt.js can generate equivalent static `.html` files for every `.vue` pages file, but there's an exception. 
-
-If the page is a dynamic page, for example `_id.vue`, it won't have enough information to generate a static HTML from such dynamic page. You'll have to explicitly provide the possible paths for the dynamic routes.
-
-## Generate static pages from dynamic routes
-
-1. Update the _nuxt.config.js_ file so that Nuxt.js uses a list of all available data to generate static pages for each framework/library:
-
-   ```javascript
-     import { projects } from "./utils/projectsData";
-
-     export default {
-       mode: "universal",
-
-       //...truncated
-
-       generate: {
-         async routes() {
-           const paths = [];
-
-           projects.forEach(project => {
-             paths.push(`/project/${project.slug}`);
-           });
-
-           return paths;
-         }
-       }
-     };
-   ```
-
-   > [!NOTE]
-   > `routes` is an async function, so you can make a request to an API in this function and use the returned list to generate the paths.
+```bash
+git pull
+```
 
 Make changes to the app by updating the code and pushing it to GitHub. GitHub Actions automatically builds and deploys the app.
 
-For more information, see the Azure Static Web Apps Nuxt 3 deployment preset [documentation](https://nitro.unjs.io/deploy/providers/azure).
+For more information, see the Azure Static Web Apps Nuxt 3 deployment preset [documentation](https://nitro.unjs.io/deploy/providers/azure#azure-static-web-apps).
 
 > [!div class="nextstepaction"]
 > [Set up a custom domain](custom-domain.md)