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

Question

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.

score 1 · Accepted Answer · answered Jan 19 '18 at 07:04

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.

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

1 Answers1