URL loses virtual path with routing and pushstate

Help Requests
1

I have web site that has a path like: www.mytestsite.com. There really is nothing hosted at the site itself, it simply acts as the root of multiple web applications.

Each web application has a virtual path: (e.g. /app1, /app2, etc.) So, to access app1, I would use: www.mytestsite.com/app1.

Each web application hosts an aurelia spa application – in fact, they all host the same application configured for different clients. So, when I build the app for production, I currently do the following:

  1. Update webpack.config.js to ensure that index.js gets built with the correct path to load all the modules.
const baseUrl = '/app1/'
  1. Update my app-config.ts to ensure my app knows where to find the associated api for data
this.apiURL = "/app1/api/v1/"  //api is hosted in same application
  1. Currently, in app.ts, I have my router configured like so:
config.options.pushState = true;
config.options.root = "/";
config.mapUnknownRoutes({ route: "unknown", redirect: "/"});

While this is a bit of a hassle, this all works – except, that once you hit the site, the browser url loses the virtual path of the application so a user can no longer tell which virtual app they are running.

IOW, you begin by accessing the app at: www.mytestsite.com/app1 and get the login page. Once you log in, the app sets the root to the ‘app’ module and the browser’s url changes to www.mytestsite.com/home. Notice the virtual path app1 is now missing. I was expecting to see www.mytestsite.com/app1/home.

I tried changing config.options.root="/app1/" but that caused errors trying to load other modules.

Question
Is there a way to keep my virtual path in the url and still have my routing work such that once I login and am redirected, I would still see a url like: www.mytestsite.com/app1/home?

P.S. A few more details about my app that might play into this.

main.ts

await aurelia.start();

let usvc = aurelia.container.get(UserService);
if(!await usvc.isUserLoggedIn())
   aurelia.setRoot(PLATFORM.moduleName('login/login'));
else
   aurelia.setRoot(PLATFORM.moduleName('app'));

login.ts

public async loginButtonClick(){
   ...

   //If successful login
  this.router.navigate('/',{replace: true, trigger : false});
  this.aurelia.setRoot(PLATFORM.moduleName("app");
}

routes.ts

export const routes = [
{
   route: '',
   redirect: 'home'
},
{
  route: '/home',
  nav: true,
  name: 'home',
  moduleId: PLATFORM.moduleName('./home/home','core'),
  title: 'Home',
},
...
]
2

Whats your Webserver and its configuration. The refresh issue sounds more like a Backend redirect/conf issue

3

Is there something I should be looking at specifically? It’s an IIS server that simply serves up an index.html page that loads, bootstraps and launches aurelia.

I’m not strong in the area of server setup and configurations. I’m only just learning a lot of this. In my past, the IT team always did that part.

Again, it a bit confusing because: www.mytestsite.com/app1 loads the index.html page in that virtual directory and appropriately loads the login page while keeping the url. It’s not until I login and hit the navigate and setRoot code listed in login.ts, that the url loses the virtual directory part and changes to: www.mytestsite.com/home. And from that point on, the virtual directory is lost. As a SPA application, there shouldn’t be anything happening server-side at this point.

4

ok my bad, misread that part. I was under the impression you’re doing a hard refresh (f5) and thus falling back to root