Deploying Angular app to NodeJS using Azure Devops - node.js

Is there a way to automate deployment of Angular application to NodeJS or onPrem WebServer using Azure Devops PipeLines.

For Angular apps, you can include Angular-specific commands such as ng test, ng build, and ng e2e. To use Angular CLI commands in your pipeline, you need to install the angular/cli npm package on the build agent.
- script: |
npm install -g #angular/cli
npm install
ng build --prod
Note:
On Microsoft-hosted Linux agents, preface the command with sudo,
like sudo npm install -g.
https://learn.microsoft.com/en-us/azure/devops/pipelines/ecosystems/javascript?view=azure-devops&tabs=example#angular

Related

Npx fails on Azure App Service deployment

I'm trying to deploy a Node.js (Remix) application to an Azure App Service instance. After installing the npm packages, the post-install script must run for the Remix app to eventually work. The post-install script is npx remix setup node.
Unfortunately, the deployment fails because of the following reason:
npm ERR! could not determine executable to run
I get the same error when trying to use other npx commands, as npx prisma generate. I tried npm exec as well instead of npx.
Thank you in advance!
In startup command try using npx serve -s build/
Also, under your app service Settings blade check all the general settings.
Make sure that your web.config was published along with your app.

Define custom npm install procedure for azure/webapps-deploy#v2

My project currently contains 2 apps. The first is the application Backend (NestJS) and the second is the client (VueJS).
The current folder structure follows:
Root (NestJS)
./client/ (VueJS)
When I am deploying my app to Azure App Service I am using the azure/webapps-deploy#v2 action. It's procedure is to run npm install in the root of the project but I need it to also run in the sub project containing the client packages. How can this be done? Are there any arguments to provide the webapps deploy action to include that addition npm install command?
You could try add the commands directly in your workflow:
- name: npm install, build, and test
run: |
npm install
npm run build --if-present
npm run test --if-present
cd ./client/mern_azure_example # go to your client package
npm install # run npm install under your client package
But it takes very long time.

ng is not recognised as an internal or external command. Jenkins + Angular CLI

I am trying to setup Jenkins for an Angular CLI project. I have installed node and Angular Cli on the Jenkins server under a specific user account.
if I open a command prompt on the server an execute the following commands to verify they are installed properly, this is the result:
I have configured the project with Jenkins, and i created two build steps two execute two bat files.
One runs: npm install
and the second one runs: ng build --prod
Then I build Jenkins, it runs the npm install but it fails running ng build --prod because it says " 'ng' is not recognised as an internal or external command".
Am I doing something wrong? Is there another way to probably use the angular cli on the node_modules folder, So it does not need to use the angular cli installed on the server. It seems like Angular CLI is installed only for my user on the server but not for the user Jenkins use to build.
PS: I installed Angular CLI globally using:
npm i -g #angular/cli
No need to install angular cli on server, just run
npm run ng -- build
That will run the local version from your project devDependencies
This way you can pass any flag to your local cli npm run ng -- test, npm run ng -- lint, etc
You can pass additional flags to ng just like that
run ng -- build --prod
More details at https://docs.npmjs.com/cli/run-script
Just for further clarification when someone searches for the same problem and finds this question (as I did):
If you want to use the --prod flag while running the build command, as asked in this question, you can use:
npm run ng -- build --prod
Important are the "--" between "ng" and "build" with spacing. This is due to the syntax of "npm run", more information can be found here: https://docs.npmjs.com/cli/run-script
This also solves the problem described in a comment below the accepted answer: "This is working but its excluding the additional parameters like --test when running the build"
npm run ng -- build
we can use as this without installing angular cli
If it is working on the Local command prompt, Restart the Jenkin server.
Restart Jenkins --> http://host-name:port/base-url/restart
ex:- http://localhost:8080/jenkins/restart
If it is not working on local command as well install angular CLI globally and set the environment settings and do the previous step.
try as below.
BUILD_ID=dontKillMe nohup ng serve
The only issue with npm run ng build is it omits any other parameter like --prod or --test after build.
Following are the commands what i am using to run my angular build successfully from Jenkins.The last command is executed the dirty way by setting up the path variables. Don't know if there is a cleaner way to do this. This does execute the commands properly without omitting anything.
#echo on
cmd /c npm install -g #angular/cli#latest
echo yarn Install
cmd /c yarn
echo Build
set PATH=%PATH%;C:\Users\Administrator\AppData\Roaming\npm;C:\Users\Administrator\AppData\Roaming\npm\node_modules\#angular\cli\bin;
ng build --prod --aot=true

How to deploy Angular universal

I looking into Angular universal and trying to get my head around deployment.
Github https://github.com/angular/universal-starter
It has Angular 2 Universal + TypeScript 2 + Webpack 2
When I run the command
npm run build
I get the following structure
**Client**
0.bundle
0.bundle.js.map
main.bundle
main.bundle.js.map
**Server**
0.index
0.index.js.map
index
index.js.map
How do I deploy this to a server?
Install dependencies
Run npm install in your terminal at the root of universal-starter
Run the NodeJS backend
Run npm run build:ssr && npm run serve:ssr after npm install has finished, this will host a local nodejs server here: http://localhost:4000 (you can put that in your browser)
Before either of these steps ensure you have NodeJS and NPM installed (NPM comes with the newer builds of NodeJS)

Bower Install Error In Azure App Services

I was running my bower package manager in Azure App Services. When I ran the following command:
bower install
or even
bower install --force
Any ideas how to overcome this?
Thanks.
You can custom the deployment task to achieve your requirements.
Generally speaking, you can try the following steps,
install azure x-platform command via npm install azure-cli -g
run custom deployment script generator via azure site deploymentscript --node
This command will create 2 files named .deployment and deploy.cmd
In deploy.cmd file include below lines of code after installing npm packages. Change bower install folder based on your requirement.
IF EXIST "%DEPLOYMENT_TARGET%\public\bower.json" (
pushd "%DEPLOYMENT_TARGET%\public"
call ..\node_modules\.bin\bower install
IF !ERRORLEVEL! NEQ 0 goto error
popd
)
Then next you deploy your application to Azure via Git, it will run the deployment script which will run bower install script in your application.
You can refer to https://blogs.msdn.microsoft.com/azureossds/2016/01/25/using-bower-in-node-js-azure-webapps/ for more detailed info. And here is a sample on Github about bower sample on Azure.

Resources