You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: articles/static-apps/deploy-nextjs.md
+14-10Lines changed: 14 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,7 +10,7 @@ ms.author: chnwamba
10
10
---
11
11
12
12
13
-
# Deploy server-rendered Next.js websites on App Service Static Apps
13
+
# Deploy server-rendered Next.js websites on Azure Static Web Apps
14
14
15
15
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
16
16
@@ -24,10 +24,11 @@ In this tutorial, you learn to deploy a [Next.js](https://nextjs.org) generated
24
24
25
25
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.
26
26
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
+
28
29
1. Navigate to <http://github.com/staticwebdev/nextjs-starter/generate>
29
30
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.
@@ -121,14 +122,13 @@ Azure Static Web Apps deploys your app from a GitHub repository and keeps doing
121
122
122
123
## Deploy your static website
123
124
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.
125
126
126
-
### Create Azure App Service Static App
127
+
### Create a static app
127
128
128
129
1. Navigate to the [Azure Portal](https://portal.azure.com).
129
130
1. Click **Create a Resource** then search for **Static Web Apps** and select the matching result.
130
131
131
-
<!--- TODO: Add screenshot for navigating to static web apps --->
132
132
133
133
1. Select a subscription from the *Subscription* drop-down list or use the default value.
134
134
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
1. Type **out** in the *App artifact location* text box.
161
+
2. Type **out** in the *App artifact location* text box.
162
162
163
163
### Review and create
164
164
@@ -167,19 +167,23 @@ Azure Static Web Apps is built to automatically carry out common tasks like inst
167
167
1. Once the deployment is completed, click **Go to resource**
168
168
1. On the _Overview_ window, click the *URL* link to open your deployed application.
169
169
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.
170
171
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.
171
172
172
173
You can check the status of the Actions workflows by navigating to the Actions for your repository:
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.
181
185
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`.
183
187
184
188
## Configure dynamic routes
185
189
@@ -225,4 +229,4 @@ The reason for this error is because Next.js only generated the home page based
225
229
:::image type="content" source="media/deploy-nextjs/404-in-production-fixed.png" alt-text="404 on dynamic routes fixed":::
Copy file name to clipboardExpand all lines: articles/static-apps/deploy-nuxtjs.md
+5-6Lines changed: 5 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -21,7 +21,7 @@ In this tutorial, you learn to deploy a [Nuxt.js](https://nuxtjs.org) generated
21
21
22
22
## Set up a Nuxt.js app
23
23
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.
25
25
26
26
1. Create a new repository under your GitHub account from a template repository.
27
27
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
104
104
105
105
## Deploy your static website
106
106
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.
108
108
109
-
### Create Azure App Service Static App
109
+
### Create an Azure Static Apps resource
110
110
111
111
1. Navigate to the [Azure Portal](https://portal.azure.com).
112
112
1. Click **Create a Resource** then search for **Static Web Apps** and select the matching result.
113
113
114
-
<!--- TODO: Add screenshot for navigating to static web apps --->
115
114
116
115
1. Select a subscription from the *Subscription* drop-down list or use the default value.
117
116
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
153
152
154
153
You can check the status of the Actions workflows by navigating to the Actions for your repository:
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.
163
162
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`.
0 commit comments