How to release an Aurelia app for use with multiple clients

Help Requests
1

I’ve always hosted my Aurelia app as a web site – never a web app as part of a site.

The web admin I’m working with sets things up with a single web site (AppName) with multiple web applications (Client1, Client2, etc.).

When I build an Aurelia app with webpack, there are 3 things that need to be configured:

  • webpack.config - baseUrl = '/';
  • app.ts - config.options.root = "/"; //router configuration
  • settings.js - Need to configure a reference to backend API. In dealing with web sites, I would use this._apiUrl = "${location.protocol}/${location.host}/api/v1. However, this doesn’t work when using web applications because it ignores the application path.

I’ve been able to get a single web app working by hardcoding values like:

  • webpack.config - baseUrl = '/client1/';
  • app.ts - config.options.root = '/client1/';
  • settings.js - this.apiUrl = '${location.protocol}/${location.host}/client1/api/v1'

Is there a way to configure these settings in such a way that I don’t have to do a new build for each new client/web app?

1 Like
2

I also have this problem in lot of projects.

try setting the webpack.config baseUrl to an empty string. (explanation: this makes the base url to be the place where index.html actually is. - so if you have multiple apps… I assume each have it’s own index.html etc…)

don’t set config.options.root at all. (explanation: same as above)

1 Like
3

So I tried what you suggested, but it seems to only partially work. The site loads initially, but views and viewmodels that are part of a different chunk cannot be found.

{
   route: '/sessions/:sid/jurors', 
   name: 'sessionjurors', 
   PLATFORM.moduleName("./sessions/session-jurors","sessions")
},
{
   route: '/jurors', 
   name: 'jurors', 
   PLATFORM.moduleName("./jurors/jurors", "jurors")
}
1 Like
4

When you configure routes into the router, remove the leading slash.

So change “/jurors” into “jurors”, etc.

Basicly, you want all of your url’s to be relative to the current index.html
When you lead with a slash - they become absolute (based on the site’s root)

2 Likes
5

We’re getting super close – thanks for your help, btw.

So I have one scenario that isn’t working. My source is laid out like this:

+  src
|- + jurors
    |-- jurors.html
    |-- jurors.ts
|- + pools
    |- pools.html
    |- pools.ts
|- + sessions

My route is configured like so:

{
   route: "pools",
   nav: true,
   name: "pools",
   moduleId: PLATFORM.moduleName("./pools/pools","pools"),
   title: "Juror Pools"
},
{
   route: "pools/:pid/jurors",
   nav: false,
   name: "pooljurors",
   moduleId: PLATFORM.moduleName("./jurors/jurors",'jurors"),
   title: "Jurors"
},
{
   route: "jurors",
   nav: true,
   name: "jurors",
   moduleId: PLATFORM.moduleName("./jurors/jurors","jurors"),
   title: "Jurors"
}

Notice the pooljurors route. The pathing starts with “pool” but I’m including the jurors code in the jurors chunk instead of the pools chunk. My thought was to keep from duplicating code by having it also in the jurors chunk for the route below it.

Of course, if I change the chunk to pools it works fine. Am I going about this the wrong way? Is the jurors code going to be included in both chunks?

Thanks

1 Like
6

Sounds logical to me.

I’ve notice a typo in your code.
is this also in the actual code? or just here?

image

if the typo is not in the code… it must be something else…
what error are you reciving?
try to run with analyze - can you see your chunks as you expect?

1 Like
7

The type was just in the thread – not in code.

The error appears in the browser when I try to load that section:

Uncaught (in promise) ChunkLoadError: Loading chunk jurors~c1872 failed.

And yes, those chunks are being created.

1 Like
8

The other problem I have is after removing all the leading /, the site runs locally using IIS Express. When I copy the code over to a test server, I get the same type of errors:

Uncaught (in promise) ChunkLoadError: Loading chunk 1 failed.
(error: http://domain.com/commons.async~c...chunk.js)

I also get a 404 on:

GET https://domain.com/core~63....chunk.js

The problem with both of these is that they lose the web app part of the URL. IOW, if the web site under which the app runs is MyWebApp and is configured for www.mywebapp.com and the web app is called MyJuror – the app is supposed to be called with a URL like: https://www.mywebapp.com/myjuror – that should be the root of my app. But, if you notice how the files are trying to load, it is simply including the domain without the app (i.e. https://www.mywebapp.com/core~63...chunk.js .

1 Like
9

looks like the base url of the webpack config is still pointing to the root of the server.
removing the / from baseUrl should have fixed that.
weird… this works for me in my projects…

1 Like
10

So I’m curious, do you set up each application as a new web site or do you have one web site with multiple copies of your apps running as web applications within the site?

Like I said in my original post, I’m trying to get things to run as web applications under a web site. So each web app has to be referenced like so: https://site.com/appname.

The problem I’m having is that doing what you suggest with removing / seems to point everything to the root of the site not the app (e.g. https://site.com instead of https://site.com/appname).

Am I missing something?

1 Like
11

both are valid options.
removing the leading “/” doesn’t point to the root of the site - but rather to where the “index.html” is.
(this should be the default in any scenario - in my point of view).

if you have multiple sites, or multiple apps in the same site is irrelevent.

do you have a client app with his own entry point (index.html) for every client?
if so - everything should work as expected.

if not - can you please share the directory tree of your server? because it’s seems I don’t talk about the same thing as you…

1 Like