How can I deploy Aurelia bundles to another directory during build?

Question

I am working on the Aurelia Sample app and would like to deploy the build output(vendor-bundle.js and app-bundle.js) to www-root\scripts instead of the default scripts directory. So I tried modifying the aurelia.json to look like:

...
"testFramework": {
    "id": "jasmine",
    "displayName": "Jasmine"
  },
  "build": {
    "targets": [
      {
        "id": "web",
        "displayName": "Web",
        "output": "www-root\\scripts"
      }
    ],
    "loader": {
...

Which indeed results in the bundle files to be output to www-root\scripts however since I have defined an HTTP.SYS alias for my apllication e.g. the landing URL is: http://localhost/MyAlias/ when I try to browse the app it tries to load the app-bundle.js from: http://localhost/MyAlias/www-root/scripts/app-bundle.js instead of http://localhost/MyAlias/scripts/app-bundle.js.

The vendor-bundle.js however is correctly downloaded from: http://localhost/MyAlias/scripts/vendor-bundle.js

I cannot figure out what to modify to make this get the app-bundle.js from the correct path.

Any help is very much appreciated.

Utas

Answer 1

You can create a custom gulp task to copy the bundled app into www-root folder at the end of the building process. By choosing this approach, there is no need to change build.targets in aurelia.json.

1. Generate a new task using aurelia-cli generators [documentation].

Something like this below:

aurelia_project/tasks/dist.js|ts

import * as gulp from 'gulp';
import * as project from '../aurelia.json';

export default function dist() {
    return gulp.src(project.dist.sources, { "base" : "." })
        .pipe(gulp.dest(project.dist.output));
}

2. I think it's better to have a separate config section for publishing, so you'll be able to add other files and folders as well.

aurelia_project/aurelia.json

...

"dist": {
    "output": "www-root",
    "sources": [
        "./scripts/**/*",
        "./index.html",
        "<other_resource_to_copy>",
        ...
    ]
},

....

3. Insert this new task at the end of the building process.

aurelia_project/tasks/build.js|ts

export default gulp.series(
    readProjectConfiguration,
    ...
    writeBundles,   
    dist // here goes our custom task
);

4. Oh, and it works with au run --watch as well! :)

If you'd like to try it out, I have a working example here.

Amylo

This is great! works like a charm. Just a quick question, any way to exclude require.js and text.js or anything else that I may want from being copied? Sorry a complete gulp virgin here! – Utas

I haven't tried it yet, but I believe you can. Check out "gulp glob options": github.com/gulpjs/gulp/blob/master/docs/…. e.g. ["./scripts/**/*", "!./scripts/require.js"] – Amylo

It says invalid glob argument but I will have a go at it later. thanks. – Utas

Answer 2

If anyone comes here looking for a way to clean up the root directory of an aurelia-cli project, here's a method that builds directly to the location of your choice using the RequireJS or SystemJS loaders:

1. Make a directory for output, let's call it OUTPUT
2. Move index.html and favicon.ico to OUTPUT

3. Open aurelia_project/aurelia.json and edit the following:

   "build": {
       "targets": [
           {
               "index": "OUTPUT/index.html",
               "baseDir": "OUTPUT",
               "baseUrl": "scripts",
               "output": "OUTPUT/scripts"
           }
       ],
       ...
   }
   ...
   "platform": {
       "index": "OUTPUT/index.html",
       "baseDir": "OUTPUT",
       "baseUrl": "scripts",
       "output": "OUTPUT/scripts"
   },
   

4. Test with au run and you should be good to go!

Dola

Thanks for this answer was going around in a circle for a bit. Works great! – Primarily