Search code examples
gulpaurelia

Multiple Aurelia Apps Side by Side

I'm currently tasked with building 2 UI's for a service I've constructed.

The output from both of these UI's will need to end up in the same root folder.

I found the section that names the basic bundles in the "aurelia.json" file, and renamed the bundles created for my project, when built, my project as expected created 2 new bundles in the scripts directory with the new names.

However, upon running my project, I then found that index.html was getting a 404 trying to load the "vendor-bundle" (Which I had renamed to 'service-vendor-bundle').

No problem there, I just edited index.html to reference the new file, and bingo, 404 resolved.

The problem is however, that "service-vendor-bundle" can now not load "service-app-bundle".

I assumed (Probably incorrectly) that, when I renamed the bundles in my aurelia.json file, that the build output would also be configured appropriately to load the files in.

I need to be able to customize this beacuse once the 2 aurelia apps are finished, they will need to share a scripts folder, so I'll need

uione.html to load "scripts\uione-vendor-bundle.js" and "scripts\uione-app-bundle.js"

and I'll need

uitwo.html to load "scripts\uitwo-vendor-bundle.js" and "scripts\uitwo-app-bundle.js"

The final file layout once on the server will look something like the following:

root
  uione.html
  uitwo.html
  scripts
    uione-vendor-bundle.js
    uione-app-bundle.js
    uitwo-vendor-bundle.js
    uitwo-app-bundle.js
  images
    *.png

Both client apps have to be developed separate from each other and be stand alone, so I can't combine them into one app, and I cant put them into seperate folders as the service that will be serving them is a custom in house built service, specifically configured to only serve from a single folder, with a single scripts and images folder.

My aurelia.json file currently looks like this:

.........
 "plugins": [
    {
      "name": "text",
      "extensions": [
        ".html",
        ".css"
      ],
      "stub": true
    }
  ]
},
"options": {
  "minify": "stage & prod",
  "sourcemaps": "dev & stage"
},
"bundles": [
  {
    "name": "uione-app-bundle.js",
    "source": [
      "[**/*.js]",
      "**/*.{css,html}"
    ]
  },
  {
    "name": "uione-vendor-bundle.js",
    "prepend": [
      "node_modules/bluebird/js/browser/bluebird.core.js",
      "node_modules/requirejs/require.js"
    ],
..........

and I'm using the Aurelia cli tool (au ...) for my Aurelia based tasks.

Any pointers on how to achieve this would be great.

Solution

  • I think you're on the right track by customizing the bundle names.

    What you can do is manually load both the vendor bundle and the app bundle. That way the app modules are already downloaded and ready to use, instead of letting the vendor bundle try to download it manually.

    index.html <body aurelia-app="main"> <script src="scripts/my-special-vendor-bundle.js" data-main="aurelia-bootstrapper"></script> <script src="scripts/my-special-app-bundle.js"></script> </body>

    I have tested this and it is working fine for me. I am using this manual loading technique in my own project to allow ASP.Net script versioning to provide cache-busting (see my answer here).