How to build asp.net webApI and aurelia in VS online together? - bash

I used aurelia-cli to setup my Aurelia application on top of the backend in asp.net WebAPI.
I run backend from visual studio on a port in localhost, which exposes the api endpoints. Then I open git bash from my project directory to do au run which runs my Aurelia frontend on localhost:9000
On Visual Studio online, it builds my backend project even if I made a change to one of the typescript files within Aurelia. But the artifact created by build process doesn’t have any .ts files. This is similar to if I were to publish from visual studio.
To publish Aurelia, I do au build -–env prod separately on git bash from project directory, that bundles files into app-bundle.js and vendor-bundle.js inside wwwroot/scripts directory.
So I have two different projects for Aurelia and webAPI. The question is can I build both together in visual studio online/TFS?
I tried adding a shell script with the au build –-env prod command as a task to my build process. It tried to run from the temp location where it drops the artifacts eg: d:\a\1\s\mycommand.sh . Aurelia isn’t installed there, so I got au command not found error.
If not together, can I run the aurelia project separately from vs online so I get the bundled js files that I can then use to deploy, without having to run the commands from git bash?
Update: after writing this post, I got this post in suggestion How to optimize workflow with single project using Aurelia CLI / ASP.NET Core
which mentions "the au build command is executed in the precompilation target, so when I build or run the ASP.NET Core project from Visual Studio using F5, Aurelia CLI will build and bundle the assets for the Aurelia app into wwwroot as well."
It doesn't say how to do it, that is what I'm trying to achieve. Perhaps asking question as an answer is not advised so I asked it here.

There are many ways that can call au command:
Install Aurelia cli in a folder:
Include aurelia-cli package dependence in package.json file (dependencies or devDependencies) or install it directly through Command line task (Put package.json file in the target folder that you want to call au command)
Add au build command to scripts of package.json
Sample:
{
"name": "autest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"aurelia-cli": "^0.32.0"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"aubuild": "au build --env stage"
},
"author": "",
"license": "ISC"
}
Install package through NPM build task (Command: install; Working folder with package.json: package.json folder path)
(Option 1) Call NPM command through NPM build task (Command: custom; Working folder with package.json: package.json folder path; Command and arguments: run aubuild)
(Option 2) Call au command through Command Line task (Working folder: Aurelia-cli package installed path; Tool: node_module\.bin\au; Arguments: build --env stage)
Install Aurelia cli in global:
Add command line task (Tool: npm; Arguments: install aurelia-cli -g)
Call au command in any folder
Regarding "the au build command is executed in the precompilation target”, you can try to build the project through Visual Studio task and check the result.

Related

Cypress CI vsts not finding binary

Could you please give me some advise on how to deal with this issue.
Build Pipeline
npm install
package.json
"dependencies": {
"cypress": "^3.4.1"
}
Release
Powershell command
npm ./node_modules/.bin/Cypress run
The cypress npm package is installed, but the Cypress binary is missing.
2019-10-07T18:04:59.5720120Z We expected the binary to be installed here:
There are some examples on how to cache ~/.npm but nothing seems to work so far. Examples on how to include cypress.io in your vsts are at the building stage and not after release.
According to the error log, it has provided a solution about this. You should run the cypress install command first and then the error will be fixed.
As my test, since I don't have a cypress.json file, so I need run the open command to
automatic generated get the json file and project sample.
Then the open command run as expected.
But because I run the open command in interactive mode and I don't have the cypress.json file in my artifacts, the taks finally failed.
So if you have cypress.json in your repo or artifacts, you just need to add
.\cypress install
in your powershell command.
And if not, you can add the related json file and folder to your repo or artifacts and then the run command will work as your expected.

NPM run build not working in Windows specific directory

I am working on a Front End project in Javascript (NPM, Webpack and Babel). I work on Mac all the time but I am having some issues when cloning the project in my PC Windows 10 machine.
It is building properly if I put the project in any directory but when I put the project in the directory where it should be located, Babel doesn't compile the project as expected.
The reason the project should be located there is because I am integrating it with some other tools (Bamboo - Continuous Integration).
npm run build
My builds script is:
"build": npm run clean && cross-env NODE_ENV=production webpack --env.prod=true
ERROR in ./index.js
Module parse failed: C:\opt\bamboo-home\xml-data\build-dir\STA-DEV-
JOB1\node_modules\babel-loader\lib\index.js!C:\opt\bamboo-home\xml-
data\build-dir\STA-DEV-JOB1\src\index.js Unexpected token (24:8)
You may need an appropriate loader to handle this file type.
| const render = (Component, target) => {
| ReactDOM.render(
| <Provider store={store}>
| <AppContainer>
| <Component/>
Does nodeJS or NPM or Webpack or Babel need specific permission over the directories they work on ?
Any help would be appreciated. I am lossing hair here.
Am glad you are using window 10. Use the bash shell on windows 10 to run the command npm run build.
follow this link to learn how you can cd to the directory from the bash shell
I had the same problem, then i found that i need shell bash, so follow the bellow steps:
install Git
go to project folder and right click to access context menu
from there run Git bash here
run the command: npm run build / yarn build
mine working perfectly with this solution.

Heroku move files after deploy

I use the Apt buildpack to install tesseract.
Now I need to copy a config file into a directory
that only exists after the tesseract installation.
Where can I put something like "mv configfile destination"
that gets executed after the tesseract installation?
This should happen automatically during a deploy and
not manually after the fact.
Thanks
Andre
We use the NPM postinstall hook to perform build tasks, load dev dependencies for those tasks, cleanup, etc.
From the scripts section of your package.json:
"scripts": {
"postinstall": "node ./ops/heroku-build.js"
}
In that file you can use fs to copy the file, and do any other tasks that need to be accomplished.
https://devcenter.heroku.com/articles/nodejs-support#customizing-the-build-process

ASP Core pre/post-publish actions to install tools for Angular2 then build

We have a .NET Core project which uses Angular2 as frontend client. This frontend is located in our solution in a Frontend directory.
This frontend contains the package.json and angular-cli.json to isolate all that fron the rest of the .NET project. On ng build, Angular2 compiled files are sent to ../wwwroot directory.
Our project structure:
We want, when someone checkout the project AND on publish (on Azure) to be able to call these actions:
npm install -g angular-cli
cd Frontend && npm install && ng build --prod
How to achieve this in the project.json .NET Core file?
I tried for example, targetting a deployement on Azure, to set this up:
"prepublish": [ "npm install -g angular-cli" ],
"postpublish": [ "cd Frontend && npm install && ng build --prod", "dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%" ]
But it breaks the deploy. Are both the prepublish and postbublish (with cd Frontend and subsequent commands) valid?
And how to make VisualStudio do the same thing when the people checking out the git repo and hit build?
In general, you may use any tasks runner (gulp, npm tasks, etc) and in postpublish step (or other step like prebuild) just execute appropriate tasks.
As alternative you could even do steps in opposite direction and call dotnet commands (build, deploy, ...) from your, lets say, npm task script. For example, you could look into this repo that is example of using ASP.NET Core and Angular2 with Webpack. They use those npm tasks as entry point of any actions like build, run or deploy:
The npm package.json configuration loads all the required packages for Angular 2 and Webpack. The Webpack packages are all added to the devDependencies. A “npm build” script and also a “npm buildProduction” are also configured, so that the client application can be built using Webpack from the cmd line using “npm build” or “npm buildProduction”.

Cannot get TeamCity Build Step to execute grunt-cli

I'm trying to automate building of my project on a TeamCity server. I'm using grunt to define and configure my tasks. This works fine locally. Yet, I am having problems getting TeamCity (running on Windows Server 2008) to recognize grunt as a executable, the build will fail when grunt is called as it is not available.
I do have grunt-cli installed on the server and can execute it when I login via ssh (The build script also succeeds when I trigger it that way).
I'm running npm install before I call grunt and also tried to force install grunt-cli using a preinstall instruction in my package.json like:
{
"name": "someName",
"version": "0.0.1",
"private": true,
"scripts" : {
"preinstall" : "npm install grunt-cli -g"
},
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.6.3",
"grunt-contrib-less": "~0.8.1",
"grunt-contrib-watch": "~0.5.3",
"grunt-contrib-requirejs": "~0.4.1",
"grunt-strip": "~0.2.1",
"grunt-bump": "0.0.11"
}
}
I can see npm installing grunt-cli, yet grunt is not available in the next step.
I also tried wrapping that into a bat file or using multiple build steps for dependency installing and running the grunt task.
Does anyone have any input on this?
I had the same problem when trying to get our TFS Build agents to run grunt-cli. In the end I just changed my build process to use the full path to the grunt-cli executable.
So I changed from using this:
grunt deploy
to using this:
"C:\Users\tfsservice\AppData\Roaming\npm\grunt.cmd" deploy
I know this is just a workaround and not a true fix, but it should be good enough to get you going. I hope this helps.
-- Update --
I was able to get it to work properly by simply adding "C:\Users\tfsservice\AppData\Roaming\npm" (where the grunt.cmd file is found) to my system path, and then rebooting my build server. The reboot was required since tfsservice is both a user and a running service; simply restarting the service may be enough, but I didn't test that.
After doing this grunt deploy worked in our builds as expected.
You are running Teamcity agent on Widnows Server?
There is plugin for Node.js/Grunt for Teamcity: https://github.com/jonnyzzz/TeamCity.Node
As far as I've used it had no issue running grunt with Teamcity.

Resources