Reference javascript file from node package in Azure Web App (MVC 4)

Question

I have a Web Application hosted in Azure.

It's configured to automatically build and deploy from the GitHub repository.

I was using a version of angular.min.js which I had installed from a nuget package, and then directly checked in. Now I want to change this, and incorporate javascript packages from npm instead of nuget.

I did the following:

Added an npm configuration file
Add the dependency "angular": "^1.6.5"

Here's the complete package.json file:

{
   "version": "1.0.0",
   "name: "asp.net",
   "private": true,
   "dependencies": {
      "angular": "^1.6.5"
   },
   "devDependencies": {}
}

Then, in my razor page, I referenced angular directly from the node_modules folder:

<script type="text/javascript" src="~/node_modules/angular/angular.min.js"></script>

This worked on my local machine. I checked this into Github, and the Azure framework built and deployed my code. However, the folder node_modules is not present under D:\home\site\wwwroot

I tried added a pre-build step:

npm install

but this did not solve the problem.

Using kudu, I bought up the debug console on the web server. I set the location to the folder D:\home\site\wwwroot, then typed npm install. This worked: it created and populated the node_modules folder, and my website could now access the angular file.

So, either the build is not restoring the packages, or it is restoring the packages but not deploying them to the wwwroot folder.

Is there a correct way to include javascript files from node packages in ASP.NET MVC apps on Azure?

Andrew Shepherd · Accepted Answer · 2017-08-02 22:43:40Z

1

I added a post-deploy step, following the instructions on this page.

In the browser, go to https://<mywebappname>.scm.azurewebsites.net
Activate the Debug Console \ Powershell tab
Drill to the folder "D:\home\site\deployments\tools"
Create a folder "PostDeploymentActions"
In this folder, add a powershell script post-deploy.ps1:

The contents of this powershell script:

pushd d:\home\site\wwwroot
npm install
popd

Now the node packages are installed on the web server with each deployment.

At this stage, I'm not sure whether this is the best long-term solution or not....

edited Aug 2, 2017 at 22:43

answered Aug 2, 2017 at 2:40

Andrew Shepherd

45.5k33 gold badges148 silver badges212 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aaron Chen · Accepted Answer · 2017-08-03 02:37:12Z

0

As a best practice when using GitHub for continuous deployment, we recommend using Custom Deployment Script for customizing the deployment process. Please check this doc out for details.

answered Aug 3, 2017 at 2:37

Aaron Chen

9,9701 gold badge20 silver badges30 bronze badges

Collectives™ on Stack Overflow

Reference javascript file from node package in Azure Web App (MVC 4)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related