Deploying 2 different frameworks under the same domain/routes (same app)

Support
, , ,
1

Hey!

I am trying to find out if Netlify is ok for what I need. I have an app that was originally built into AngularJS and in the meantime, a part of it was migrated to Vue 2. Now, we are in a position in which a part of the app is built in Angular JS, a part of it in Vue 2, and there are features that have v1 (angular js) and v2 (vue 2). Each of these features has its own route, including v1 and v2 of the same features (just appending /new before any route of v2).

Also, the authentication module is being done on AngularJS and the token is being passed basically to the Vue 2 part of the app (when needed to access Vue 2 features).

This setup was done on GCP and everything works ok - but we want to migrate to another provider. So we are currently looking on Netlify for this.

Do you have any idea if it’s possible to have 2 applications deployed under the same main domain, that share routes and are interconnected between them (some kind of a symlink I think?), as described above? Can you help me please with some guides or use cases that would help me in trying to achieve this behavior on Netlify?

Thanks a lot in advance!

2

Hi @alexandru.avora,

I believe this is possible, but not easily - at least till the migration to Vue completes, but it still depends on your configuration.

I’d recommend deploying two sites, 1 for each framework. Then, you can use Netlify rewrites to rewrite each path for your app to the correct destination.

For example, you’ve 10 features, feature 1, 3, 5, 7, 9 are built in Angular and the rest are in Vue. Considering that your homepage is built in Vue, you’d create a site and connect your domain to the Vue site. In that site, you’d add the following redirects:

/feature/1 https://your-angular-site.netlify.app/feature/1 200!
/feature/3 https://your-angular-site.netlify.app/feature/3 200!
/feature/5 https://your-angular-site.netlify.app/feature/5 200!
/feature/7 https://your-angular-site.netlify.app/feature/7 200!
/feature/9 https://your-angular-site.netlify.app/feature/9 200!
/* /index.html 200

The last one is required by Vue to handle client-side navigation.

If you’ve a programmatic way of determining which route needs to go to which app, you can also take a look at Netlify Edge Functions.