[Question] Server side node_modules folder

[eriksteinebach]

I have used generator-aspnetcore-spa templates for Angular 2 to develop a website. Locally this works fine, F5 in VS debug in the website. But when I deploy this website to Azure through continuous deliver I get the following exception:
Exception: Call to Node module failed with error: To use prerendering, you must install the 'aspnet-prerendering' NPM package.
Error also happened in #144, but locally that works fine for me. My issue is a little different.

I am assuming the error is shown because node_modules is not copied into my package. I didn't include this in my source control (based on best practice advise) and I deploy through VSTS continuous delivery. So I could include node_modules in my source control and be done with it, but I am trying to understand what the correct approach is here.

On the client side webpack bundles all vendor.js which are used and sends those to the client. Is a similar approach possible for node on the server side? Or do I really need the full node_modules? If so, should I restore them during the build? With the command npm install? Or indeed add them to source control? Adding node_modules would make the package a lot bigger, but maybe there is no other solution? Maybe someone else has an idea about this?

[chris-herring]

I'm deploying to Azure as well and I don't include the node_modules folder. Make sure aspnet-prerendering is under "dependencies" and not "devDependencies". You can also ftp into the server, browse the file system and check exactly what was deployed.

[eriksteinebach]

I checked and aspnet-prerendering is under "dependencies", not "devDependencies". So that is not the problem. But your response made me curious so I decided to test my own theory and check-in the node_modules folder to see.

The error is now gone, but I run in another error:
ERROR in D:\home\site\wwwroot\node_modules@angular\core\private_export.d.ts
(13,24): error TS2307: Cannot find module './src/debug/debug_renderer'.
This error (and more debug.. specific errors) already occurs during dotnet publish, but locally a dotnet publish -c release works fine, so I have to figure out what goes wrong on the VSTS build agent. But I will look at that tomorrow.

I am not sure what this means, but it looks like this is another problem and the aspnet-prerendering problem was solved by adding node_modules, but now I am wondering why it is working in your website? Do you know where your server app loads the required javascript?

[chris-herring]

I'm using react and ES6 instead of typescript so won't comment on the new error but our projects will install in the same way. Look in your project.json and your will something like mine below. When azure publishes your project it will run these commands - these are what installs the node packages, builds the project using webpack, etc.

  "scripts": {
    "prepublish": [
        "npm install",
        "node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js",
        "node node_modules/webpack/bin/webpack.js"
    ],
    "postpublish": [ "dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%" ]
  },

[SteveSandersonMS]

I suspect the difference is that @chris-herring might be deploying from Git (a.k.a. via Azure's "Kudu" deployment mechanism), which automatically does run those scripts during the deployment, whereas @eriksteinebach is deploying via VSTS, which is more like just directly FTPing your local folder to the server without running any deployment scripts on the server.

Personally I've mostly used Kudu deployment, and everything just works cleanly without needing node_modules in source control. Also it's massively faster, because you don't have to ship literally tens of thousands of files from node_modules from your machine to the Azure server (the server will fetch its own copies of the NPM modules).

When I tried VSTS-based deployment, it did work fine (albeit very slow), but then I did allow it to include the node_modules. You certainly will have to do that, because otherwise the server will not have those files - VSTS deployment isn't going to run any deployment scripts on the server for you.

ERROR in D:\home\site\wwwroot\node_modules@angular\core\private_export.d.ts
(13,24): error TS2307: Cannot find module './src/debug/debug_renderer'.

I'm not sure why you're getting that. It didn't happen when I tried it, but then maybe I was using a different version of Angular 2 or TypeScript than you are doing. I can't investigate that today, but please let us know if you manage to track it down. If this becomes an ongoing problem for you please let me know and I'll try to schedule some time to see if I can investigate and repro that issue.

[chris-herring]

I can confirm I am using Kudu and deploying from gitlab. Was fairly easy to setup and works nicely. Thanks for the explanation on the VSTS/Kudu differences.

[eriksteinebach]

Thank you, that makes a lot of sense and explains it. I didn't realize there was a difference between those 2 ways. I am going to have a look into this Kudu deployment mechanism.

One question remains for me, those pre and post publish scripts are executed to populate the node_module folder? And those are run on the webserver? So npm is available on Azure App Service machines?

I also figured out the problem with the debug files. My .gitignore contained [Dd]ebug/ so ignored 2 folders in node_modules. I changed it to [Bb]in/[Dd]ebug/ because I figure that covers most and at the moment there are no other debug folders. An extra unrelated question: there is no way to unignore a folder after it has been ignored, even if the unignore is more specific right?

[SteveSandersonMS]

One question remains for me, those pre and post publish scripts are executed to populate the node_module folder? And those are run on the webserver? So npm is available on Azure App Service machines?

Yes, yes, and yes :)

I also figured out the problem with the debug files. My .gitignore contained [Dd]ebug/ so ignored 2 folders in node_modules. I changed it to [Bb]in/[Dd]ebug/

If you use a leading slash (e.g., /[Bb]in) then it will only match the top-level one, and you don't have to worry about clashes inside node_modules etc.

An extra unrelated question: there is no way to unignore a folder after it has been ignored, even if the unignore is more specific right?

Yes, there is, but I don't remember the syntax. Try searching for "gitignore exclude" or similar.

I'll close this because it sounds like you resolved everything.