Skip to content

Commit e33aaaf

Browse files
Apply suggestions from code review
Co-authored-by: Craig Shoemaker <[email protected]>
1 parent 0d418fd commit e33aaaf

File tree

2 files changed

+19
-16
lines changed

2 files changed

+19
-16
lines changed

articles/static-apps/deploy-nextjs.md

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ ms.author: chnwamba
1010
---
1111

1212

13-
# Deploy server-rendered Next.js websites on App Service Static Apps
13+
# Deploy server-rendered Next.js websites on Azure Static Web Apps
1414

1515
In this tutorial, you learn to deploy a [Next.js](https://nextjs.org) generated static website to [Azure Static Web Apps](overview.md). To begin, you learn to set up, configure, and deploy a Next.js app. During this process, you also learn to deal with common challenges often faced when generating static pages with Next.js
1616

@@ -24,10 +24,11 @@ In this tutorial, you learn to deploy a [Next.js](https://nextjs.org) generated
2424

2525
Rather than using the Next.js CLI to create an app, you can use a starter repository that includes an existing Next.js app. This repository features a Next.js app with dynamic routes, which highlights a common deployment issue. Dynamic routes need an extra deployment configuration which you will learn more about in a moment.
2626

27-
1. Create a new repository under your GitHub account from a template repository.
27+
To begin, create a new repository under your GitHub account from a template repository.
28+
2829
1. Navigate to <http://github.com/staticwebdev/nextjs-starter/generate>
2930
1. Name the repository **nextjs-starter**
30-
1. Next, clone the new repo to your machine. Make sure to replace <YOUR_GITHUB_ACCOUNT_NAME> with your account name.
31+
1. Next, clone the new repo to your machine. Make sure to replace `<YOUR_GITHUB_ACCOUNT_NAME>` with your account name.
3132

3233
```bash
3334
git clone http://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/nextjs-starter
@@ -121,14 +122,13 @@ Azure Static Web Apps deploys your app from a GitHub repository and keeps doing
121122
122123
## Deploy your static website
123124
124-
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.
125+
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.
125126
126-
### Create Azure App Service Static App
127+
### Create a static app
127128
128129
1. Navigate to the [Azure Portal](https://portal.azure.com).
129130
1. Click **Create a Resource** then search for **Static Web Apps** and select the matching result.
130131
131-
<!--- TODO: Add screenshot for navigating to static web apps --->
132132
133133
1. Select a subscription from the *Subscription* drop-down list or use the default value.
134134
1. Click the **New** link below the *Resource group* drop-down. In *New resource group name*, type **mystaticsite** and click **OK**
@@ -158,7 +158,7 @@ Azure Static Web Apps is built to automatically carry out common tasks like inst
158158
159159
:::image type="content" source="media/deploy-nextjs/build-tab.png" alt-text="Build tab":::
160160
161-
1. Type **out** in the *App artifact location* text box.
161+
2. Type **out** in the *App artifact location* text box.
162162
163163
### Review and create
164164
@@ -167,19 +167,23 @@ Azure Static Web Apps is built to automatically carry out common tasks like inst
167167
1. Once the deployment is completed, click **Go to resource**
168168
1. On the _Overview_ window, click the *URL* link to open your deployed application.
169169
170+
If the website does note immediately load, then the background GitHub Actions workflow is still running. Once the workflow is complete you can then click refresh the browser to view your web app.
170171
If the website does note immediately load, then the background GitHub Actions workflow is still running. Once the workflow is complete you can then click refresh the browser to view your web app.
171172
172173
You can check the status of the Actions workflows by navigating to the Actions for your repository:
173174
174175
```bash
175176
https://github.com/<YOUR_GITHUB_USERNAME>/nextjs-starter/actions
176-
```
177+
You can check the status of the Actions workflows by navigating to the Actions for your repository:
178+
179+
```url
180+
https://github.com/<YOUR_GITHUB_USERNAME>/nextjs-starter/actions
177181
178182
### Sync changes
179183
180184
When you created the app, Azure Static Web Apps created a GitHub Actions workflow file in your repository. You need to bring this file down to your local repository so your git history is synchronized.
181185
182-
Return to the terminal and run the following command `git pull origin maser`.
186+
Return to the terminal and run the following command `git pull origin master`.
183187
184188
## Configure dynamic routes
185189
@@ -225,4 +229,4 @@ The reason for this error is because Next.js only generated the home page based
225229
:::image type="content" source="media/deploy-nextjs/404-in-production-fixed.png" alt-text="404 on dynamic routes fixed":::
226230
227231
> [!div class="nextstepaction"]
228-
> [Set up a custom domain](custom-domain.md)
232+
> [Set up a custom domain](custom-domain.md)

articles/static-apps/deploy-nuxtjs.md

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ In this tutorial, you learn to deploy a [Nuxt.js](https://nuxtjs.org) generated
2121

2222
## Set up a Nuxt.js app
2323

24-
You can set up a new Nuxt.js project using `create-nuxt-app`. Instead of a new project, let's clone a repository that is set up to demonstrate an edge case when you try to deploy a dynamic Nuxt.js app. The repository contains an example of a dynamic site that we want to serve as a static site.
24+
You can set up a new Nuxt.js project using `create-nuxt-app`. Instead of a new project, in this tutorial you begin by cloning an existing repository. This repository is set up to demonstrate how to deploy a dynamic Nuxt.js app as a static site.
2525

2626
1. Create a new repository under your GitHub account from a template repository.
2727
1. Navigate to <http://github.com/staticwebdev/nuxtjs-starter/generate>
@@ -104,14 +104,13 @@ Azure Static Web Apps deploys your app from a GitHub repository and keeps doing
104104
105105
## Deploy your static website
106106
107-
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.
107+
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.
108108
109-
### Create Azure App Service Static App
109+
### Create an Azure Static Apps resource
110110
111111
1. Navigate to the [Azure Portal](https://portal.azure.com).
112112
1. Click **Create a Resource** then search for **Static Web Apps** and select the matching result.
113113
114-
<!--- TODO: Add screenshot for navigating to static web apps --->
115114
116115
1. Select a subscription from the *Subscription* drop-down list or use the default value.
117116
1. Click the **New** link below the *Resource group* drop-down. In *New resource group name*, type **mystaticsite** and click **OK**
@@ -153,15 +152,15 @@ If the website does note immediately load, then the background GitHub Actions wo
153152
154153
You can check the status of the Actions workflows by navigating to the Actions for your repository:
155154
156-
```bash
155+
```url
157156
https://github.com/<YOUR_GITHUB_USERNAME>/nuxtjs-starter/actions
158157
```
159158
160159
### Sync changes
161160
162161
When you created the app, Azure Static Web Apps created a GitHub Actions workflow file in your repository. You need to bring this file down to your local repository so your git history is synchronized.
163162
164-
Return to the terminal and run the following command `git pull origin maser`.
163+
Return to the terminal and run the following command `git pull origin master`.
165164
166165
## Configure dynamic routes
167166

0 commit comments

Comments
 (0)