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
description: Deploy your first Node.js Hello World to Azure App Service in minutes. You deploy using Visual Studio Code, which is one of many ways to deploy to App Service.
Azure App Service provides a highly scalable, self-patching web hosting service. This quickstart shows how to deploy a Node.js app to Azure App Service.
19
+
Get started with Azure App Service by creating a Node.js/Express app locally using Visual Studio Code and then deploying the app to the cloud. Because you use a free App Service tier, you incur no costs to complete this quickstart.
20
20
21
21
## Prerequisites
22
22
23
-
If you don't have an Azure account, [sign up today](https://azure.microsoft.com/free/?utm_source=campaign&utm_campaign=vscode-tutorial-app-service-extension&mktingSource=vscode-tutorial-app-service-extension) for a free account with $200 in Azure credits to try out any combination of services.
23
+
- An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?utm_source=campaign&utm_campaign=vscode-tutorial-app-service-extension&mktingSource=vscode-tutorial-app-service-extension).
24
+
-[Node.js and npm](https://nodejs.org). Run the command `node --version` to verify that Node.js is installed.
25
+
-[Visual Studio Code](https://code.visualstudio.com/).
26
+
- The [Azure App Service extension](vscode:extension/ms-azuretools.vscode-azureappservice) for Visual Studio Code.
24
27
25
-
You need [Visual Studio Code](https://code.visualstudio.com/) installed along with [Node.js and npm](https://nodejs.org/en/download), the Node.js package manager.
28
+
## Clone and run a local Node.js application
26
29
27
-
You will also need to install the [Azure App Service extension](vscode:extension/ms-azuretools.vscode-azureappservice), which you can use to create, manage, and deploy Linux Web Apps on the Azure Platform as a Service (PaaS).
30
+
1. On your local computer, open a terminal and clone the sample repository:
28
31
29
-
### Sign in
30
-
31
-
Once the extension is installed, log into your Azure account. In the Activity Bar, select on the Azure logo to show the **AZURE APP SERVICE** explorer. Select **Sign in to Azure...** and follow the instructions.
32
-
33
-
34
-
35
-
### Troubleshooting
36
-
37
-
If you see the error **"Cannot find subscription with name [subscription ID]"**, it might be because you're behind a proxy and unable to reach the Azure API. Configure `HTTP_PROXY` and `HTTPS_PROXY` environment variables with your proxy information in your terminal using `export`.
If setting the environment variables doesn't correct the issue, contact us by selecting the **I ran into an issue** button below.
45
-
46
-
### Prerequisite check
47
-
48
-
Before you continue, ensure that you have all the prerequisites installed and configured.
49
-
50
-
In VS Code, you should see your Azure email address in the Status Bar and your subscription in the **AZURE APP SERVICE** explorer.
51
-
52
-
> [!div class="nextstepaction"]
53
-
> [I ran into an issue](https://www.research.net/r/PWZWZ52?tutorial=node-deployment-azure-app-service&step=getting-started)
54
-
55
-
## Create your Node.js application
56
-
57
-
Next, create a Node.js application that can be deployed to the Cloud. This quickstart uses an application generator to quickly scaffold out the application from a terminal.
58
-
59
-
> [!TIP]
60
-
> If you have already completed the [Node.js tutorial](https://code.visualstudio.com/docs/nodejs/nodejs-tutorial), you can skip ahead to [Deploy to Azure](#deploy-to-azure).
61
-
62
-
### Scaffold a new application with the Express Generator
63
-
64
-
[Express](https://www.expressjs.com) is a popular framework for building and running Node.js applications. You can scaffold (create) a new Express application using the [Express Generator](https://expressjs.com/en/starter/generator.html) tool. The Express Generator is shipped as an npm module and can be run directly (without installation) by using the npm command-line tool `npx`.
The `--view pug --git` parameters tell the generator to use the [pug](https://pugjs.org/api/getting-started.html) template engine (formerly known as `jade`) and to create a `.gitignore` file.
71
-
72
-
To install all of the application's dependencies, go to the new folder and run `npm install`.
1. Press **Ctrl**+**C**in the terminal to stop the server.
90
51
91
52
> [!div class="nextstepaction"]
92
53
> [I ran into an issue](https://www.research.net/r/PWZWZ52?tutorial=node-deployment-azure-app-service&step=create-app)
93
54
94
-
## Deploy to Azure
95
-
96
-
In this section, you deploy your Node.js app using VS Code and the Azure App Service extension. This quickstart uses the most basic deployment model where your app is zipped and deployed to an Azure Web App on Linux.
55
+
## Deploy the app to Azure
97
56
98
-
### Deploy using Azure App Service
57
+
In this section, you deploy your Node.js app to Azure using VS Code and the Azure App Service extension.
99
58
100
-
First, open your application folder in VS Code.
59
+
1. In the terminal, make sure you're in the *nodejs-docs-hello-world* folder, then start Visual Studio Code with the following command:
101
60
102
-
```bash
103
-
code .
104
-
```
61
+
```bash
62
+
code .
63
+
```
105
64
106
-
In the **AZURE APP SERVICE** explorer, select the blue up arrow icon to deploy your app to Azure.
65
+
1. In the VS Code activity bar, select the Azure logo to show the **AZURE APP SERVICE** explorer. Select **Sign in to Azure...** and follow the instructions. (See [Troubleshooting Azure sign-in](#troubleshooting-azure-sign-in) below if you run into errors.) Once signed in, the explorer should show the name of your Azure subscription.
107
66
108
-
67
+
109
68
110
-
> [!TIP]
111
-
> You can also deploy from the **Command Palette** (CTRL + SHIFT + P) by typing 'deploy to web app' and running the **Azure App Service: Deploy to Web App** command.
69
+
1. In the **AZURE APP SERVICE** explorer of VS Code, select the blue up arrow icon to deploy your app to Azure. (You can also invoke the same command from the **Command Palette** (**Ctrl**+**Shift**+**P**) by typing 'deploy to web app' and choosing **Azure App Service: Deploy to Web App**).
112
70
113
-
1. Choose the directory that you currently have open, `myExpressApp`.
71
+
72
+
73
+
1. Choose the *nodejs-docs-hello-world* folder.
114
74
115
75
1. Choose a creation option based on the operating system to which you want to deploy:
116
76
117
-
- Linux: Choose **Create new Web App**.
118
-
- Windows: Choose **Create new Web App** and select the **Advanced** option.
77
+
- Linux: Choose **Create new Web App**
78
+
- Windows: Choose **Create new Web App... Advanced**
119
79
120
-
1. Type a globally unique name for your Web App and press ENTER. Valid characters for an app name are 'a-z', '0-9', and '-'.
80
+
1. Type a globally unique name for your web app and press **Enter**. The name must be unique across all of Azure and use only alphanumeric characters ('A-Z', 'a-z', and '0-9') and hyphens ('-').
121
81
122
82
1. If targeting Linux, select a Node.js version when prompted. An **LTS** version is recommended.
123
83
124
-
1. If targeting Windows using the **Advanced** option, follow the additional prompts:
125
-
1. Select **Create a new resource group**, then enter a name for the resource group.
84
+
1. If targeting Windows, follow the additional prompts:
85
+
1. Select **Create a new resource group**, then enter a name for the resource group, such as `AppServiceQS-rg`.
126
86
1. Select **Windows** for the operating system.
127
-
1. Select an existing App Service Plan or create a new one. You can select a pricing tier when creating a new plan.
87
+
1. Select **Create new App Service plan**, then enter a name for the plan (such as `AppServiceQS-plan`), then select **F1 Free** for the pricing tier.
128
88
1. Choose **Skip for now** when prompted about Application Insights.
129
89
1. Choose a region near you or near resources you wish to access.
130
90
131
-
1. After you respond to all the prompts, the notification channel shows the Azure resources that are being created for your app.
91
+
1. After you respond to all the prompts, VS Code shows the Azure resources that are being created for your app in its notification popup.
92
+
93
+
When deploying to Linux, select **Yes** when prompted to update your configuration to run `npm install` on the target Linux server.
132
94
133
-
1. Select **Yes** when prompted to update your configuration to run `npm install`on the target server. Your app is then deployed.
95
+
1. Select **Yes** when prompted with **Always deploy the workspace "nodejs-docs-hello-world" to (app name)"**. Selecting **Yes** tells VS Code to automatically target the same App Service Web App with subsequent deployments.
136
98
137
-
1.When the deployment starts, you're prompted to update your workspace so that later deployments will automatically target the same App Service Web App. Choose **Yes** to ensure your changes are deployed to the correct app.
99
+
1. If deploying to Linux, select **Browse Website** in the prompt to view your freshly deployed web app once deployment is complete. The browser should display "Hello World!"
Once the deployment completes, select **Browse Website** in the prompt to view your freshly deployed web app.
107
+
1. Enter `WEBSITE_NODE_DEFAULT_VERSION` for the setting key.
108
+
1. Enter `10.15.2` for the setting value.
109
+
1. Right-click the node for the app service and select **Restart**
147
110
148
-
### Troubleshooting
111
+
149
112
150
-
If you see the error **"You do not have permission to view this directory or page."**, then the application probably failed to start correctly. Head to the next section and view the log output to find and fix the error. If you aren't able to fix it, contact us by selecting the **I ran into an issue** button below. We're happy to help!
113
+
1. Right-click the node for the app service once more and select **Browse Website**.
151
114
152
115
> [!div class="nextstepaction"]
153
116
> [I ran into an issue](https://www.research.net/r/PWZWZ52?tutorial=node-deployment-azure-app-service&step=deploy-app)
154
117
118
+
### Troubleshooting Azure sign-in
119
+
120
+
If you see the error **"Cannot find subscription with name [subscription ID]"** when signing into Azure, it might be because you're behind a proxy and unable to reach the Azure API. Configure `HTTP_PROXY` and `HTTPS_PROXY` environment variables with your proxy information in your terminal using `export`.
If setting the environment variables doesn't correct the issue, contact us by selecting the **I ran into an issue** button above.
128
+
155
129
### Update the app
156
130
157
-
You can deploy changes to this app by using the same process and choosing the existing app rather than creating a new one.
131
+
You can deploy changes to this app by making edits in VS Code, saving your files, and then using the same process as before only choosing the existing app rather than creating a new one.
158
132
159
133
## Viewing Logs
160
134
161
-
In this section, you learn how to view (or "tail") the logs from the running App Service app. Any calls to `console.log` in the app are displayed in the output window in Visual Studio Code.
135
+
You can view log output (calls to `console.log`) from the app directly in the VS Code output window.
162
136
163
-
Find the app in the **AZURE APP SERVICE** explorer, right-click the app, and choose **View Streaming Logs**.
137
+
1. In the **AZURE APP SERVICE** explorer, right-click the app node and choose **Start Streaming Logs**.
164
138
165
-
When prompted, choose to enable logging and restart the application. Once the app is restarted, the VS Code output window opens with a connection to the log stream.
1. When prompted, choose to enable logging and restart the application. Once the app is restarted, the VS Code output window opens with a connection to the log stream.
168
142
169
-
143
+
170
144
171
-
After a few seconds, you'll see a message indicating that you're connected to the log-streaming service. Refresh the page a few times to see more activity.
145
+
1. After a few seconds, the output window shows a message indicating that you're connected to the log-streaming service. You can generate more output activity by refreshing the page in the browser.
172
146
173
-
```bash
174
-
2019-09-20 20:37:39.574 INFO - Initiating warmup request to container msdocs-vscode-node_2_00ac292a for site msdocs-vscode-node
175
-
2019-09-20 20:37:55.011 INFO - Waiting for response to warmup request for container msdocs-vscode-node_2_00ac292a. Elapsed time = 15.4373071 sec
176
-
2019-09-20 20:38:08.233 INFO - Container msdocs-vscode-node_2_00ac292a for site msdocs-vscode-node initialized successfully and is ready to serve requests.
0 commit comments