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-web-apps/deploy-nextjs.md
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,7 +3,7 @@ title: "Tutorial: Deploy server-rendered Next.js websites on Azure Static Web Ap
3
3
description: "Generate and deploy Next.js dynamic sites with Azure Static Web Apps."
4
4
services: #Required for articles that deal with a service; service slug assigned to your service by ACOM.
5
5
author: christiannwamba
6
-
ms.service: azure-functions
6
+
ms.service: static-web-apps
7
7
ms.topic: tutorial
8
8
ms.date: 05/08/2020
9
9
ms.author: chnwamba
@@ -106,10 +106,13 @@ When you build a Next.js site using `npm run build`, the app is built as a tradi
106
106
Azure Static Web Apps deploys your app from a GitHub repository and keeps doing so for every pushed commit to a designated branch. Use the following commands sync your changes to GitHub.
107
107
108
108
1. Stage all changed files
109
+
109
110
```bash
110
111
git add .
111
112
```
113
+
112
114
1. Commit all changes
115
+
113
116
```bash
114
117
git commit -m "Update build config"
115
118
```
@@ -129,14 +132,12 @@ The following steps show how to link the app you just pushed to GitHub to Azure
129
132
1. Navigate to the [Azure portal](https://portal.azure.com).
130
133
1. Click **Create a Resource** then search for **Static Web Apps** and select the matching result.
131
134
132
-
133
135
1. Select a subscription from the *Subscription* drop-down list or use the default value.
134
136
1. Click the **New** link below the *Resource group* drop-down. In *New resource group name*, type **mystaticsite** and click **OK**
135
137
1. Provide a globally unique name for your app in the **Name** text box. Valid characters include `a-z`, `A-Z`, `0-9`, and `-`. This value is used as the URL prefix for your static app in the format of `https://<APP_NAME>.azurestaticapps.net`.
136
138
1. In the *Region* drop-down, choose a region closest to you.
137
139
1. Select **Free** from the SKU drop-down.
138
140
139
-
140
141
:::image type="content" source="media/deploy-nextjs/create-static-web-app.png" alt-text="Create Static Web App":::
141
142
142
143
### Add a GitHub repository
@@ -222,7 +223,6 @@ The reason for this error is because Next.js only generated the home page based
222
223
223
224
2. Push the new changes to your GitHub repository and wait for a few minutes while GitHub Actions builds your site again. After the build is complete, the 404 error disappears.
224
225
225
-
226
226
:::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-web-apps/deploy-nuxtjs.md
+14-11Lines changed: 14 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,15 +1,15 @@
1
1
---
2
2
title: "Tutorial: Deploy server-rendered Nuxt.js websites on Azure Static Web Apps"
3
3
description: "Generate and deploy Nuxt.js dynamic sites with Azure Static Web Apps."
4
-
services: #Required for articles that deal with a service; service slug assigned to your service by ACOM.
4
+
services: static-web-apps
5
5
author: christiannwamba
6
-
ms.service: azure-functions
6
+
ms.service: static-web-apps
7
7
ms.topic: tutorial
8
8
ms.date: 05/08/2020
9
9
ms.author: chnwamba
10
10
---
11
11
12
-
# Deploy server-rendered Nuxt.js websites on App Service Static Apps
12
+
# Deploy server-rendered Nuxt.js websites on Azure Static Web Apps
13
13
14
14
In this tutorial, you learn to deploy a [Nuxt.js](https://nuxtjs.org) generated static website to [Azure Static Web Apps](overview.md). To begin, you learn to set up, configure, and deploy a Nuxt.js app. During this process, you also learn to deal with common challenges often faced when generating static pages with Nuxt.js
15
15
@@ -23,7 +23,7 @@ In this tutorial, you learn to deploy a [Nuxt.js](https://nuxtjs.org) generated
23
23
24
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
-
1. Create a new repository under your GitHub account from a template repository.
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>
28
28
1. Name the repository **nuxtjs-starter**
29
29
1. Next, clone the new repo to your machine. Make sure to replace <YOUR_GITHUB_ACCOUNT_NAME> with your account name.
@@ -37,6 +37,7 @@ You can set up a new Nuxt.js project using `create-nuxt-app`. Instead of a new p
37
37
```bash
38
38
cd nuxtjs-starter
39
39
```
40
+
40
41
1. Install dependencies:
41
42
42
43
```bash
@@ -87,11 +88,14 @@ When you build a Nuxt.js site using `npm run build`, the app is built as a tradi
87
88
88
89
Azure Static Web Apps deploys your app from a GitHub repository and keeps doing so for every pushed commit to a designated branch. Use the following commands sync your changes to GitHub.
89
90
90
-
1. Stage all changed files
91
+
1. Stage all changed files:
92
+
91
93
```bash
92
94
git add .
93
95
```
96
+
94
97
1. Commit all changes
98
+
95
99
```bash
96
100
git commit -m "Update build config"
97
101
```
@@ -106,19 +110,18 @@ Azure Static Web Apps deploys your app from a GitHub repository and keeps doing
106
110
107
111
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
112
109
-
### Create an Azure Static Apps resource
113
+
### Create an Azure Static Web Apps resource
110
114
111
115
1. Navigate to the [Azure portal](https://portal.azure.com).
112
116
1. Click **Create a Resource** then search for **Static Web Apps** and select the matching result.
113
117
114
-
115
118
1. Select a subscription from the *Subscription* drop-down list or use the default value.
116
119
1. Click the **New** link below the *Resource group* drop-down. In *New resource group name*, type **mystaticsite** and click **OK**
117
120
1. Provide a globally unique name for your app in the **Name** text box. Valid characters include `a-z`, `A-Z`, `0-9`, and `-`. This value is used as the URL prefix for your static app in the format of `https://<APP_NAME>.azurestaticapps.net`.
118
121
1. In the *Region* drop-down, choose a region closest to you.
119
122
1. Select **Free** from the SKU drop-down.
120
123
121
-
:::image type="content" source="media/deploy-nuxtjs/create-static-web-app.png" alt-text="Create Static Web App":::
124
+
:::image type="content" source="media/deploy-nuxtjs/create-static-web-app.png" alt-text="Create Static Web App":::
122
125
123
126
### Add a GitHub repository
124
127
@@ -178,7 +181,7 @@ If the page is a dynamic page, for example `_id.vue`, it won't have enough infor
178
181
179
182
```javascript
180
183
import { projects } from "./utils/projectsData";
181
-
184
+
182
185
export default {
183
186
mode: "universal",
184
187
@@ -187,11 +190,11 @@ If the page is a dynamic page, for example `_id.vue`, it won't have enough infor
0 commit comments