Aurelia CLI Built-In Bundler - recreating the dist folder for deployments

Best Practices
1

So I have been working on updating my project over to the new built-in bundler Alameda.

One of the annoyances for my project was that all the build files and any associated folders/resources were all intermixed with the other project files. The webpack version has a dist folder that was created which made it easy for me to copy the required artifacts over to stage and prod when needed. If you have a CI system setup then perhaps its not much of an issue for you as you can create the script to move stuff once and have it pull as needed.

So I set about trying to get the dist folder setup and working. I spent several hours reading the docs, and doing ‘au build’ to finally get the right combination of paths setup so that when doing ‘au run’ the browser is able to load find and load all the needed scripts and resources.

Two files need to be updated, aurelia.json, and launch.json.
Below are the required updates to each of those files.
(note: no changes were required to index.html)
(note: I use port 8080 versus 9000, you can change that for your needs)

launch.json - change webroot, adding /dist

        {
            "name": "Chrome Debugger",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceRoot}/dist",
            "userDataDir": "${workspaceRoot}/.chrome",
            "sourceMapPathOverrides": {
                "../src/*": "${webRoot}/*"
            }
        },

aurelia.json - need to update build.targets and platform

"targets": [
            {
                "id": "web",
                "displayName": "Web",
                "port": 8080,
                "index": "index.html",
                "baseDir": "dist",
                "output": "dist/scripts",
                "baseUrl": "scripts"
            }
        ],

"platform": {
        "id": "web",
        "displayName": "Web",
        "port": 8080,
        "index": "index.html",
        "baseDir": "dist",
        "output": "dist/scripts",
        "baseUrl": "dist/scripts"
    },

Just to make this complete, I have included below how I copy over any additional resources that are not bundled (aurelia.json). Update based on your project.

"copyFiles": {
            "node_modules/font-awesome/fonts/*": "dist/font-awesome/fonts",
            "img/*": "dist/img",
            "index.html": "dist",
            "sw.js": "dist",
            "sw.css": "dist",
            "rollbar.js": "dist"
        },

The only thing I have left to do is figure out how to clear the dist folder, or you could end up with stale resources being moved to other environments. I’ll do an update here when I get that setup.

Here is how to I cleanup the dist folder each time the project is built. (Thanks @huochunpeng)

Install the helper module to delete files
npm i -D del

Create a clean.ts file under the aurelia-project/tasks

import * as del from 'del';
export default function clean() {return del(['dist'])};

update the build.ts file, adding the import and the new clean step

import clean from './clean';
.
.
.
let build = gulp.series(
  readProjectConfiguration,
  clean,
  gulp.parallel(
    transpile,
    processMarkup,
    processJson,
    processCSS,
    copyFiles
  ),
  writeBundles
);
.
.
.
2

gulp can take care of that. create aurelia_project/tasks/clean.js (or ts).

npm i -D del

//ts changed to  import * as del from 'del'; 
import del from 'del'; 

export default function() { 
  return del(['dist']);
}

In your release script, do au clean before au build --env prod. That should be enough.

You can also update build task to automatically trigger a clean if env is prod.

3

@huochunpeng Thanks!
I will look at doing that.

4

Can someone explain why there are two parts $.build.targets.0 and $.platform that look almost the same but not?

5

@EisenbergEffect had a vision for cli to support multiple targets (web, electron app, 
). But we still haven’t implemented anything for the idea yet :slightly_frowning_face:

6

Note I had to make a change to the dist clean up.

I had clean inside the gulp.parallel and the it would get into a race condition on what completed first, the delete or the copy :astonished:

I moved it just above that so it will complete before the parallel tasks are started.

7

I stumbled upon another problem.

Since I now have index.html in copyFiles target, it gets watched (when running aurelia run).
Whenever I make changes. a rebuild is triggered which ends up “updating file name for vendor-bundle in index.html”. That is considered a change and triggers another rebuild, which ends up touching index.html again. It becomes an infinite loop.

I’m temporarily ignoring “index.html” in aurelia_project/tasks/watch.js#processChange, but the downside is when I intentionally change index.html (which is not very frequent, at least), I have to kill and restart aurelia run.

8

Odd, I’m not seeing that behavior in my project.

9

I take that back, I just saw it for the first time.
What is really odd is I used it all day yesterday with no issues, and now today any change is triggering it


edit:
I am wondering if that is an artifact from webpack that added a build number to the bundle name, where the cli bundler doesn’t actually add that.

10

I opened up an issue on the repo here: https://github.com/aurelia/cli/issues/1049

11

It doesn’t matter if the file CONTENT was changed. Even if it was written with the same content (no hashes in the script file name to change), that triggers a rebuild.

12

@khuongduybui can you share your copyFiles setup? I want to understand where is the source index.html, where is the target index.html.

1 Like
13 
    "copyFiles": {
      "index.html": "dist",
      "static/**/*": "dist/static",
      "node_modules/font-awesome/fonts/*": "dist/font-awesome/fonts"
    },

My source is $projectRoot/index.html and destination is $projectRoot/dist/index.html.
I put a log statement inside $projectRoot/aurelia_project/tasks/watch.js and confirmed that the file that was marked as changed and that triggers the rebuild is the source $projectRoot/index.html file, not the copied over one.

2 Likes
14

Thx. Definitely a bug.

1 Like
15

I see this was merged, is it available yet? I did a npn i aurelia-cli but no change to the looping.
(Does a local install of the cli override a global install?)

16

It is not released yet.