Merge pull request #274582 from adrianhall/swa/tutorial/react

Corrected problems with React tutorials

Author: prmerger-automator[bot]

articles/static-web-apps/add-api.md

@@ -21,14 +21,24 @@ You can add serverless APIs to Azure Static Web Apps that are powered by Azure F
 
 - Azure account with an active subscription.
   - If you don't have an account, you can [create one for free](https://azure.microsoft.com/free).
-- [Visual Studio Code](https://code.visualstudio.com/)
-- [Azure Static Web Apps extension](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurestaticwebapps) for Visual Studio Code
-- [Azure Functions extension](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurefunctions) for Visual Studio Code
-- [Node.js](https://nodejs.org/download/) to run the frontend app and API
+- [Visual Studio Code](https://code.visualstudio.com/).
+- [Azure Static Web Apps extension](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurestaticwebapps) for Visual Studio Code.
+- [Azure Functions extension](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurefunctions) for Visual Studio Code.
+- [Node.js v18](https://nodejs.org/en/download) to run the frontend app and API.
+
+> [!TIP]
+> You can use the [nvm](https://github.com/nvm-sh/nvm/blob/master/README.md) tool to manage multiple versions of Node.js on your development system.
+> On Windows, [NVM for Windows](https://github.com/coreybutler/nvm-windows/blob/master/README.md) can be installed via Winget.
 
 ## Create the static web app
 
-Before adding an API, create and deploy a frontend application to Azure Static Web Apps. Use an existing app that you've already deployed or create one by following the [Building your first static site with Azure Static Web Apps](getting-started.md) quickstart.
+Before adding an API, create and deploy a frontend application to Azure Static Web Apps by following the [Building your first static site with Azure Static Web Apps](getting-started.md) quickstart.
+
+Once you have a frontend application deployed to Azure Static Web Apps, [clone your app repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository). For example, to clone using the `git` command line:
+
+```bash
+git clone https://github.com/my-username/my-first-static-web-app
+```
 
 In Visual Studio Code, open the root of your app's repository. The folder structure contains the source for your frontend app and the Static Web Apps GitHub workflow in _.github/workflows_ folder.
 
@@ -226,9 +236,12 @@ To run your frontend app and API together locally, Azure Static Web Apps provide
 Ensure you have the necessary command line tools installed.
 
 ```bash
-npm install -D @azure/static-web-apps-cli
+npm install -g @azure/static-web-apps-cli
 ```
 
+> [!TIP]
+> If you don't want to install the `swa` command line globally, you can use `npx swa` instead of `swa` in the following instructions.
+
 ### Build frontend app
 
 If your app uses a framework, build the app to generate the output before running the Static Web Apps CLI.
@@ -266,7 +279,7 @@ npm run build
 
 ---
 
-### Start the CLI
+### Run the application locally
 
 Run the frontend app and API together by starting the app with the Static Web Apps CLI. Running the two parts of your application this way allows the CLI to serve your frontend's build output from a folder, and makes the API accessible to the running app.
 
@@ -306,9 +319,11 @@ Run the frontend app and API together by starting the app with the Static Web Ap
 
     ---
 
-1. When the CLI processes start, access your app at `http://localhost:4280/`. Notice how the page calls the API and displays its output, `Hello from the API`.
+1. Windows Firewall may prompt to request that the Azure Functions runtime can access the Internet. Select **Allow**.
+   
+2. When the CLI processes start, access your app at `http://localhost:4280/`. Notice how the page calls the API and displays its output, `Hello from the API`.
 
-1. To stop the CLI, type <kbd>Ctrl + C</kbd>.
+3. To stop the CLI, type <kbd>Ctrl + C</kbd>.
 
 ## Add API location to workflow
 
@@ -317,6 +332,16 @@ Before you can deploy your app to Azure, update your repository's GitHub Actions
 1. Open your workflow at _.github/workflows/azure-static-web-apps-\<DEFAULT-HOSTNAME>.yml_.
 
 1. Search for the property `api_location` and set the value to `api`.
+
+   ```yaml
+   ###### 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: "/" # App source code path
+   api_location: "api" # Api source code path - optional
+   output_location: "build" # Built app content directory - optional
+   ###### End of Repository/Build Configurations ######
+   ```
+
 1. Save the file.
 
 ## Deploy changes

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

@@ -107,4 +107,4 @@ Select **Go to resource**.
 ## Next steps
 
 > [!div class="nextstepaction"]
-> [Configure app settings](./application-settings.yml)
+> [Add an API to your application](./add-api.md?tabs=angular)

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

@@ -28,7 +28,7 @@ This article uses a GitHub template repository to make it easy for you to get st
 
     [https://github.com/staticwebdev/react-basic/generate](https://github.com/login?return_to=%2Fstaticwebdev%2Freact-basic%2Fgenerate)
 
-1. Name your repository **my-first-static-web-app**
+1. Name your repository **my-first-static-web-app**.
 
 1. Select **Create repository from template**.
 
@@ -107,4 +107,4 @@ Select **Go to resource**.
 ## Next steps
 
 > [!div class="nextstepaction"]
-> [Configure app settings](./application-settings.yml)
+> [Add an API to your application](./add-api.md?tabs=react)

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

@@ -107,4 +107,4 @@ Select **Go to resource**.
 ## Next steps
 
 > [!div class="nextstepaction"]
-> [Configure app settings](./application-settings.yml)
+> [Add an API to your application](./add-api.md?tabs=vue)

includes/static-web-apps/create-a-static-web-app.md

@@ -12,8 +12,8 @@ Now that the repository is created, you can create a static web app from the Azu
 
 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**.
+1. Search for **Static Web App**.
+1. Select **Static Web App**.
 1. Select **Create**.
 
 In the _Basics_ section, begin by configuring your new app and linking it to a GitHub repository.

includes/static-web-apps/static-web-apps-tutorials-portal-create.md

@@ -10,8 +10,8 @@ Now that the repository is created, you can create a static web app from the Azu
 
 1. Go to the [Azure portal](https://portal.azure.com).
 1. Select **Create a Resource**.
-1. Search for **Static Web Apps**.
-1. Select **Static Web Apps**.
+1. Search for **Static Web App**.
+1. Select **Static Web App**.
 1. Select **Create**.
 
 ::: zone pivot="github"

includes/static-web-apps/static-web-apps-tutorials-portal-view-website.md

@@ -16,9 +16,9 @@ The Static Web Apps *Overview* window displays a series of links that help you i
 
 :::image type="content" source="../../articles/static-web-apps/media/getting-started/overview-window.png" alt-text="Screenshot of Azure Static Web Apps overview window.":::
 
-1. Selecting on the banner that says, _Select here to check the status of your GitHub Actions runs_ takes you to the GitHub Actions running against your repository. Once you verify the deployment job is complete, then you can go to your website via the generated URL.
+1. Selecting _GitHub Action runs_ in the Overview takes you to the GitHub Actions running against your repository.  Verify that the deployment action is complete before continuing. 
 
-1. Once GitHub Actions workflow is complete, you can select the _URL_ link to open the website in new tab.
+1. Once the GitHub Actions workflow is complete, you can select the _URL_ link to open the website in new tab.
 
 ::: zone-end