# URL loses virtual path with routing and pushstate

**URL:** <https://discourse.aurelia.io/t/url-loses-virtual-path-with-routing-and-pushstate/4389>\
**Category:** Help Requests\
**Created:** [August 27, 2021, 6:08pm UTC](https://discourse.aurelia.io/t/url-loses-virtual-path-with-routing-and-pushstate/4389 "2021-08-27T18:08:42Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![roddharris](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/roddharris/32/1340_2.png) [@roddharris](https://discourse.aurelia.io/u/roddharris)\
**Post date:** [August 27, 2021, 6:08pm UTC](https://discourse.aurelia.io/t/url-loses-virtual-path-with-routing-and-pushstate/4389/1 "2021-08-27T18:08:42Z")

</div>

I have **web site** that has a path like: [www.mytestsite.com](http://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](http://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.

```auto
const baseUrl = '/app1/'

```

1. Update my `app-config.ts` to ensure my app knows where to find the associated api for data

```auto
this.apiURL = "/app1/api/v1/" //api is hosted in same application

```

1. Currently, in `app.ts`, I have my router configured like so:

```auto
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](http://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](http://www.mytestsite.com/home). Notice the virtual path `app1` is now missing. I was expecting to see [www.mytestsite.com/app1/home](http://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](http://www.mytestsite.com/app1/home)?

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

**main.ts**

```auto
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**

```auto
public async loginButtonClick(){
   ...

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

```

**routes.ts**

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

```

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [August 27, 2021, 8:41pm UTC](https://discourse.aurelia.io/t/url-loses-virtual-path-with-routing-and-pushstate/4389/2 "2021-08-27T20:41:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![roddharris](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/roddharris/32/1340_2.png) [@roddharris](https://discourse.aurelia.io/u/roddharris)\
**Post date:** [August 30, 2021, 12:07pm UTC](https://discourse.aurelia.io/t/url-loses-virtual-path-with-routing-and-pushstate/4389/3 "2021-08-30T12:07:17Z")

</div>

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](http://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](http://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.

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [August 31, 2021, 4:31am UTC](https://discourse.aurelia.io/t/url-loses-virtual-path-with-routing-and-pushstate/4389/4 "2021-08-31T04:31:27Z")

</div>

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