Using WebDeploy with an Azure node website doesn't trigger npm install - node.js

I am using WebDeploy to deploy a node website to azure.
I've seen in samples and demos that it should trigger a npm install on deploy.
But it is not. I've also seen almost every demo uses git deployment.
Is automatic npm install not supported for WebDeploy or am I missing something?

when you use WebDeploy, it will just copy over all the file from your machine to cloud, it will not trigger any build process. You will have to responsible to make sure your app is ready to run.
if you want CI function, please setup continues deployment, here is tutorial for setting up local git
https://azure.microsoft.com/en-us/documentation/articles/web-sites-publish-source-control/
and there are other options if you have repository in github/bitbucket/Visual studio Team Service etc ... (go to https://portal.azure.com, select your site --> all settings --> continuous deployment to see all supported optinos)

According to the doc Publish to Microsoft Azure Website using Web Deploy, it said
Deployment will include all the files in your project. Files in the node_modules folder are included automatically, even if they are not part of the project.
So all files under your project folder in VS, including the node_modules folder, will be deployed.

Related

Deploying a Vue app to Azure App Services with Azure Pipelines/releases

I'm trying to set up CI/CD with Azure pipelines to automatically deploy a frontend vue application, but am having trouble with deploying my frontend application from it.
When deploying manually from the VS Code IDE it works fine, with the /home/site/wwwroot looking as expected in the kudu file explorer:
However when it's deploying from Azure Pipelines, it seems that the zip file remains zipped and is stored in another directory within /home/site/wwwroot/Package (e.g /home/site/wwwroot/Client/.zip), resulting in the application being unable to
This is what it looks like in the kudu powershell debugger:
My pipeline and release is pretty standard. The steps are:
Uses Node 16.x
Downloads a .env file
Copies the .env file to the directory (/client) the application is in.
runs npm install
runs npm run build
archives the dist directory that is generated from the run build command
Publishes the archived dist folder as an artifact
An Azure release is then created and deploys the artifact to the correct Azure App Service. Currently the deployment method is set to default, although I have tried each of the different deployment methods (Web deploy, Zip deploy, and Run from package) but none have worked so far.
I've downloaded the resulting zip file from the pipeline deployment, unzipped and manually deployed (using VS Code) the dist folder within which was successful, so I'm quite sure that the pipeline part of the process which installs, builds, and packages the application is working as expected, but something is going wrong during deployment.
If anyone has any ideas of what the error may be, or is able to offer any help/sugestions, it would be greatly appreciated.
Thank you.
Ensure that the archive job option for "prepend root folder name to archive paths" is disabled in the pipeline.
Also ensure the Package or folder route in the release's deploy job is correct. It should be something like:
$(System.DefaultWorkingDirectory)/______ClientPipeline/ArtifactName/*zip

How can I combining Webpack project output with Asp.Net project output in VSTS build?

My repository contains an Asp.Net app, and a React app in seperate folder. I need to do a deployment to an Azure App service from a VSTS release.
Repository Root
MyAspNetApp
MyReactApp
The Asp.Net application is an MVC application. If it detects you on mobile it servers up the react app.
The react app is built using WebPack. When you do a production build, it copies the output into a folder called 'app' in the MyAspNetApp project. The production build can be run via 'npm run build-prod'.
When I was doing git deployments (kudu), I just added a command to the deploy.cmd to call 'npm install' and 'npm run build-prod'. Then another command to copy those files to the root of the deployment directory ('wwwroot').
Now that I am using VSTS to build and deploy (separate steps), I can't figure out how to get that 'app folder into wwwroot. In a build step I tried taking the stuff from the 'app' folder and putting it in an artifact called 'mobile'. Then in a deployment step, using a 'Copy Files' step to copy the 'mobile' artifact to $(build.artifactstagingdirectory)/app, but they don't show up in wwwroot on azure.
What am I missing here?
edit: cross posted here in MS VS Community site in hopes of getting a response. I will update this post if I get an answer there.
With Azure App Service Deploy task, if you check Publish using Web Deploy option, you need to put all necessary files in a zip file and specify this file in Package or folder input box.
You also can uncheck Publish using Web Deploy option and specify the root folder path of app.
Refer to these steps to do it:
Publish MVC application with File System publish method through Visual Studio build task
Run NPM commands to build React app through NPM task
Copy react app’s built files to necessary folder of MVC app deployed folder
(optional) Zip folder through Archive Files if you want to publish using web deploy
Add Azure App Service Deploy task (can be in release) and specify package or folder.

GitHub project deployment failed on azure

I want to deploy my .Net project from GitHub repository to the azure server.
In Deployment options I am getting Building failed error.
Here are screen shots of my Deployment details and Logs
1- Deployment Details:
2- Activity Log:
According to your description and logs, I found you have error in MSbuild step.
The error shows some files not found in your project. I suggest you could exclude the related files in the csproj file or make sure the related files is in your project.
Besides, I suggest you could firstly clone the project to your local and test it , make sure the project could build well without any error then publish to the GitHub and deploy to the azure.
Update:
I also write a test demo on my computer and I reproduce your error.
Error image:
I think in your project you have inclued the bin and obj folder into your project and then you push the project to the github.
Like below:
After you push the project to the github, the csporj file will include all the bin and obj references.
Like below:
This is the reason about your MSBuild fail.
So I suggest you uninclude all the bin and obj folder in the local and push to the github again. Then it will work well.
Azure looks in your site/repository/packages folder for all the packages your app uses. By looking through it you will find that visual studio doesn't deploy all of the files from your local packages folder to the azure one. MSBuild needs these files when you push to git and trigger a build. Ftp into your azure site and look for the packages folder. Upload every missing file (dll) from your local folder to the azure one. This worked for me and now I can trigger a build and deployment from bitbucket to azure app service upon a push.
Additionally, if you have other projects in your VS solution and you are using VS to build those projects and then put the dll into your main projects bin folder, that will cause a missing file error also. I create a folder in my packages folder and link the dll to my main folder from there. That way when you perform the fix above, the file needed by your main project is in the packages folder also.
I hope this helps!

NPM errors and control in Azure Websites

I want to build my Node.JS application in a Azure Website.
There will be an usage of different NPM packages via my packages.json file.
My problem is that I often receive error messages which are related to missing NPM files.
Normally I put my files via FTP or edit them per VS Studio 15 Azure plugin directly on the server. This may be the reason why NPM isn't triggering as Microsoft intended it.
I would prefer a way in which I can just run commands with elevated privileges to have full control over NPM by myself.
Which ways are possible to avaid these problems?
If you're publishing your nodeJS application 'manually' via FTP there are little concerns about that.
First of All, 'manually' means manually.
Git
If you use continuous deployment via Git the final deployment step is to call npm install in your current application folder, this will install all the packages listed in package.json file.
The node_modules folder is excluded by default in .gitignore file, so all packages are downloaded by the server
Web deployment
If you're using web deployment from visual studio or command line, all the files contained by your solution are copied to Hosting environment including node_modules folder , because of this the deployment would take a long time to finish due the huge amount of dependencies and files that the folder contains.
Even worst: this scenario could take you to the same scenario you're facing right now.
FTP deployment
You're copying everything yourself. So the same thing occurs in Web Deployment is happen in FTP deployment method.
--
The thing is that when you copy all those node_modules folder contents you're assuming that those dependencies remains the same in the target enviroment, most of the cases that's true, but not always.
Some dependencies are platform dependent so maybe in you're dev environment a dependency works ok in x86 architectures but what if your target machine or website (or some mix between them) is x64 (real case I already suffer it).
Other related issues could happen. May be your direct dependencies doesn't have the problem but the linked dependencies to them could have it.
So always is strongly recommended to run npm install in your target environment and avoid to copy the dependencies directly from your dev environment.
In that way you need to copy on your target environment the folder structure excluding node_modules folder. And then when files are copied you need to run npm install on the server.
To achieve that you could go to
yoursitename.scm.azurewebsites.net
There you can goto "Debug Console" Tab, then goto this directory D:\home\site\wwwroot> and run
npm install
After that the packages and dependencies are downloaded for the server/website architecture.
Hope this helps.
Azure tweak the Kudu output settings, in local Kudu implementations looks the output is normalized.
A workaround -non perfect- could be this
npm install --dd
Or even more detailed
npm install --ddd
The most related answer from Microsoft itself is this
Using Node.js Modules with Azure applications
Regarding control via a console with elevated privileges there is the way of using the Kudu console. But the error output is quite weird. It's kind of putting blindly commands in the console without much feedback.
Maybe this is a way to go. But I didn't tried this yet.
Regarding deployment it looks like that Azure wants you to prefer Continuous Deployment.
The suggested way is this here.

How to use NPM to package a deployment?

I've developed an Angular website that lives in a Node-based project. Gulp is used to build sources into development and production versions of the site. The project includes an ExpressJS server that can serve either the dev or prod versions of the files. Now I want to build and deploy the site in CI fashion.
I have a private NPM registry that I'm able to publish the entire project module to. The easy route would be:
In the build environment, check out the project repository
npm install
pass tests
npm publish
In the production environment..
npm install project
build for production
Run the server over the newly built prod files
But this doesn't seem right. Shouldn't I output the production files as part of the build process, and publish these as a versioned artifact with NPM? Are there acceptable, different ways to publish an NPM module for development and deployment?
Or am I stuck building my sources in the production environment? Doesn't this defeat the purpose of NODE_ENV=production?
It depends where you are hosting your server.
If you want to deploy to heroku, you can follow https://devcenter.heroku.com/articles/getting-started-with-nodejs#introduction and install the gulp build task https://github.com/appstack/heroku-buildpack-nodejs-gulp. Basically, you will push the version you want to deploy to heroku's git server and it will automatically trigger the build process for dev or prod and start the express server. Assuming you are already using git for your project, it is only a matter of adding a new remote.
If you want to deploy to Amazon's elastic beanstalk, it's a little bit more complicated but it all boils down to pushing your application code to the service and this will trigger the build process in the host instance.
If you want to deploy it on your environment you could still use git push and git hook to trigger the deployment. Check out How can I automatically deploy my app after a git push ( GitHub and node.js)? for various implementations.
As for your question "Shouldn't I output the production files as part of the build process, and publish these as a versioned artifact with NPM": you could, but this is not what most people do. As long as your build process is repeatable, there is no reason to package and publish the built version of your app. I am assuming here that your are building an application and not a reusable library in which case it would be a different story.

Resources