How to deploy a Node.js app to Azure
Tags: javascript, node, azure, tutorial
Published: 2022-09-08 11:07:03

So far, we haven't talked much about [Azure](https://jws.news/tag/azure/) or [Node.js](https://jws.news/tag/node-js/) on either of my blogs.  The only Azure-specific post that I could find was the [MS is EOLing Azure Functions which use .NET Core 3.1 on December 3](https://dev.to/steinbring/ms-is-eoling-azure-functions-which-use-net-core-31-on-december-3-b85) from July.  I figured that we would address that, today.  In today's tutorial, we are going to be covering how to deploy a node app to Azure using the command-line.

## Prerequisites:  Node, NPM, and Azure CLI

Before we go any further, you should make sure that you have [node and NPM](https://nodejs.org/en/) installed and that you have the [Azure CLI](https://docs.microsoft.com/en-us/cli/azure/install-azure-cli) installed.  You can see if you have node installed by running `node --version` from the terminal.

![node --version](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xppdxytfnrsx7wjnge29.png)

## Step 1: Create a Node.js app to deploy

For this example, we'll use the [Express Generator](https://expressjs.com/en/starter/generator.html).  You can create your new app by running `npx express-generator node-example --view ejs`.

![npx express-generator node-example --view ejs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v3qxf2fs8aa83x60d30j.png)

Next, if you `cd node-example && npm install`, you will navigate into the project folder and install the dependencies.

![cd node-example && npm install](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ibtypisxds7loorpbu79.png)

At this point, you can run the server by just running `npm start`.

![npm start](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mha0fbnbnhwj83o7yu7z.png)

If you want to get the debugging info also, you can alternately run `DEBUG=node-example:* npm start`.

![DEBUG=node-example:* npm start](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u4diljzpv8a61xnt0ouu.png)

With the server running, you can see the output at [http://localhost:3000/](http://localhost:3000/).

![http://localhost:3000/](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m4aj7u228zqu846owwl3.png)

## Step 2: Change the server port

As you can see above, the server is using port 3000 but if you open bin/www and look for `process.env.PORT`, you can change what port the startup script uses.


![process.env.PORT](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fc2991kk55fon4euzrrw.png)

If we are going to deploy this to Azure, we should probably change that to 80.

## Step 3: Deploy to Azure

From within the project folder, you can deploy the project by running `az webapp up --sku F1 --name <unique-project-name>`.  The `<unique-project-name>` bit must be a value that is unique across all of azure and contain only characters that are a-z, 0-9, and -.  The `F1` SKU is on their free-pricing tier.

![az webapp up --sku F1 --name JWS-Node-Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xneb15u9jxlexf0lvtm0.png)

At this point, your node app is live.  You can see the demo app at [http://jws-node-example.azurewebsites.net](http://jws-node-example.azurewebsites.net).

![https://jws-node-example.azurewebsites.net/](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a3mwuwanz8hr6t7n1u9o.png)

## Step 4: Redeploying to Azure

The next, natural question is how to redeploy the app after you make changes to it.  If we look at routes/index.js, the variable `title` is set to the value "Express" on line 6.

![routes/index.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vx7cpunuq5fjtd3haq7n.png)

If we change that value to "Flavortown", it should change the output on the site.  To save your changes to Azure, you can use the terminal command `az webapp up`.

![az webapp up](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vbzf1sbrd14ofajm31mv.png)

You will notice that the command that we used had no arguments.  If you look into .azure/config within the project folder, the details are defined there.  If you need to change something, you can do it there.

![.azure/config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zn5y2sene54az77bnym5.png)

Now, [our demo site](https://jws-node-example.azurewebsites.net/) says "Welcome to Flavortown".


![https://jws-node-example.azurewebsites.net/](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ga6o5oztdgkxvjjkru7f.png)

Have any questions, comments, or concerns?  See something that I am doing wrong here?  Please feel free to drop a comment, below.  I am by no means an expert in [Node](https://jws.news/tag/node-js/) or [Azure](https://jws.news/tag/azure/) but hopefully we can help each other.

[ Cover photo by [Arget](https://unsplash.com/@arget?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/hacking?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) ]