I'm creating a vanilla Angular project and uploading it to Bitbucket. It runs locally and I can build it into dist with no errors nor warnings. Now, I'd like to expose it on my Azure account. There's quite a lot of material showing how to but most of it is a bit aged (the options in Azure has changed) and/or the authors make it easy and use another options for the source (I target specifically Bitbucket).
Optimally, I'd like the following to happen.
Trigger by a push, get the files from the BitBucket repo.
Execute the command ng build --prod (or npm run build).
Copy over the artifacts from dist to the root of the app.
Checking the logs, I see two sections of relevance. First one is Generating deployment script, while the second is Running deployment command. The end of those as well as the label in the portal imply that it's all good and dandy. Well, it's not.
Using the following command to generate deployment script: 'azure site deploymentscript -y --no-dot-deployment -r "D:\home\site\repository" -o "D:\home\site\deployments\tools" --node --sitePath "D:\home\site\repository"'.
Generating deployment script for node.js Web Site
Generated deployment script files
Command: "D:\home\site\deployments\tools\deploy.cmd"
Handling node.js deployment.
KuduSync.NET from: 'D:\home\site\repository' to: 'D:\home\site\wwwroot'
Deleting file: 'hostingstart.html'
Copying file: '.angular-cli.json'
Copying file: '.editorconfig'
...
Copying file: 'src\index.html'
Copying file: 'src\assets\logo.png'
Copying file: 'src\assets_favicon.ico'
Copying file: 'src\environments\environment.prod.ts'
Copying file: 'src\environments\environment.ts'
Invalid start-up command "ng serve" in package.json. Please use the format "node ".
Looking for app.js/server.js under site root.
Missing server.js/app.js files, web.config is not generated
The package.json file does not specify node.js engine version constraints.
The node.js application will run with the default node.js version 6.9.1.
Selected npm version 3.10.8
web#0.0.0 D:\home\site\wwwroot
+-- #angular/animations#5.2.9
...
`-- zone.js#0.8.26
Finished successfully.
However, when I access the page, only the default document provided by MS shows. I've tried accessing the image files but failed (not sure if I got the link wrong or if those aren't there). All in all, I feel that I'm barking up the wrong tree. Trying to repeat the steps (possibly with slight changes), produced a website that says You do not have permission to view this directory or page, which gets me to a confused position where I see no rational next step in troubleshooting.
Suggestions on what I might be missing?
Related
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
I've deployed sites on Netlify before so I know how to use the website. The only difference is that those sites were created via React.js. The website I'm trying to deploy is an old project of mine but I didn't use React at the time so it couldn't be opened using "npm start" "npm build" etc.
So how do you deploy a site that doesn't use React into Netlify? I tried looking for answers online but I couldn't find the specific answer that relates to mine.
Netlify has nothing to do with React, it can build and host many different types of site with various frameworks.
When configuring your Netlify site, you can set the following options:
Base directory: Optional field to set the directory that the buildbot changes to before starting a build. If not set, the base directory defaults to the root of the repository.
Build command: If you are using a static site generator or other build tool, this is where you should specify the command to run to build your site. For example, npm run build.
Publish directory: Directory that contains the deploy-ready HTML files and assets, either generated by the build step or pre-built.
I am having trouble figuring out how to use VSTS to deploy an arbitrary directory from my build to an azure web app.
The arbitrary directory is produced during the build step and contains the webpack bundled javascript for my app. Here are the details:
I have an MVC 5 app and I just started using webpack to bundle the output of my typescript files. webpack creates a set of bundles and writes them to $(project_dir)/Scripts/bundles.
All my typescript source are in various other directories under /Scripts as well (App, Api, Lib etc). But from a VS project point of view, bundles is empty, but added to the project.
Everything works great locally. I can do a debug build and webpack-dev-server serves up the bundles. I can do a release build and webpack happily creates the bundles on disk in /Scripts/bundles. And my code happily consumes the bundles.
I have edited the project file to include:
<Content Include="Scripts\Bundles\**" />
and if I do a publish from within visual studio it all works great. But VSTS doesn't seem to recognize this part of the project
We use VSTS to do our building and releasing to azure. I can't for the life of me figure out how to get VSTS to publish this /Scripts/bundles directory.
In my project properties, I created a pre-build step that runs webpack. I know that the files are in the Scripts/bundles directory at the end of the build because the closest I have come to getting this working is to have the VSTS build a second artifact that is the zip file of that bundles directory and the files are in there.
I could solve my problem if I knew one of the following (I think):
how to get an arbitrary directory to show up in the main artifact like the normal build output - I can then use my standard release definition to push it to azure
how to publish a second artifact in a release definition?
If you can solve #2, the issue is that in building the artifact for /Scripts/bundle, it put the contents of the bundle directory in the root of the zip file, rather than having bundle as the root of the zip file. So when I unzip the file, It will have to first create /Scripts/bundle and then unzip.
I must have been entering the wrong search terms when I was first trying to figure out how to do this. Once I hit on the right search terms I found a bunch of articles that talk about how to get "extra files" into the deployment package for Azure.
Here is a good article. I basically followed it and things just worked. I added these lines to my csproj file:
<PropertyGroup>
<CopyAllFilesToSingleFolderForPackageDependsOn>
WebpackBundles;
$(CopyAllFilesToSingleFolderForPackageDependsOn);
</CopyAllFilesToSingleFolderForPackageDependsOn>
<CopyAllFilesToSingleFolderForMsdeployDependsOn>
WebpackBundles;
$(CopyAllFilesToSingleFolderForMsdeployDependsOn);
</CopyAllFilesToSingleFolderForMsdeployDependsOn>
</PropertyGroup>
<Target Name="WebpackBundles">
<ItemGroup>
<_CustomWebPackFiles Include="Scripts\bundles\*" />
<_CustomWebPackFiles Include="Scripts\bundles\**\*" />
<FilesForPackagingFromProject Include="%(_CustomWebPackFiles.Identity)">
<DestinationRelativePath>Scripts\bundles\%(RecursiveDir)%(Filename)%(Extension)</DestinationRelativePath>
</FilesForPackagingFromProject>
</ItemGroup>
</Target>
The PropertyGroup was already there. I just inserted the WebpackBundles; call into those two elements and then defined the WebpackBundles target.
And I ended up removing the
<Content Include="Scripts\Bundles\**" />
line and replaced it with the new Target that the article suggests. I am running webpack as a pre-build step only on the release build. I am using webpack-dev-server for the debug build locally. The only change I had to make to our VSTS build was to add two npm steps:
npm install
npm install webpack -g
this allowed the pre-build step to find the webpack executable and run it.
there was no change to the VSTS release definition because the webpack bundles got put into the deployment zip file in the right location.
We are currently trying to setup an Angular 2 project that also contains a Cloud Service project in its solution. We have set up numerous Angular 1 projects containing Cloud Service projects and have had no errors. When trying to run the MSBuild step for the Angular 2 project, we get the following error on the TeamCity build server:
C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\Windows Azure Tools\2.7\Microsoft.WindowsAzure.targets(2787, 5): error MSB3021: Unable to copy file "C:\TeamCityBuildAgent\temp\buildTmp\.NETFramework,Version=v4.6.1.AssemblyAttributes.cs" to "C:\SourceControlFolder\Apps\MyApp\MyApp.CloudDeployment\obj\Debug\Website\C:\TeamCityBuildAgent\temp\buildTmp\.NETFramework,Version=v4.6.1.AssemblyAttributes.cs". The given path's format is not supported.
The main problem seems to be the build attempting to throw the full C:\TeamCityBuildAgent.. path into the obj\Debug\Website folder.
My current MSBuild parameters are:
/p:Configuration="Dev"
/p:platform="Any CPU"
/p:OctoPackEnforceAddingFiles=true
/p:OctoPackProjectName=MyApp_Dev
I've tried the following solutions:
Making sure the latest Visual Studio Update is installed (for MSBuild)
Running the install tool to repair Azure Tools 2.7 on the build server.
Changing the debug configuration in the build.
Ensuring TypeScript 1.7.6 is installed on the build server (even though it's an Azure.targets issue) [https://github.com/Microsoft/TypeScript/issues/6215]
Updated the project to Azure Tools 2.9. The same error remains except it's failing on the 2.9 folder instead now.
Curious if anyone else has experienced this error and knows a fix. I'll keep this post updated as I try other solutions.
Update
It appears that what is causing this issue is this line within the .csproj file:
<FilesToIncludeForPublish>AllFilesInProjectFolder</FilesToIncludeForPublish>
This is specified for our build configurations to copy all files generated by the ng build to the output directory of the publish. What I don't understand at the moment is how this works on all of the devs' local machines but does not work on our build server. Will keep this posted as I find more info or any kind of workaround.
This ended up being the fix:
Instead of targeting the .sln in MSBuild, we specifically targeted the .csproj file. This fixed the build errors and allowed us to keep the FilesToIncludeForPublish tag inside.
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.