Base solution for your next web application
Open Closed

Creating an Angular Public Site #11592


User avatar
0
4Matrix created

I am using the Asp.Net Core with Angular v12 template but I don't want to use the MVC public site template. I have added a "Landing" folder at the same level as the Account and App folders in the Angular project. I have then created a module and component in this folder and have created folders/components under this folder for the landing site pages, e.g. about, contact etc. This is all working fine and I have adjusted the routing etc so I can now see localhost:4200/landing/home without needing to be logged in, which is great. My issue now is how I can tweak the routing for once the site is published. I have pushed the dist folder to a static web app in azure and setup two custom domains, app.mywebsite.com and www.mywebsite.com. app.mywebsite.com works perfectly, showing the main app or the login page if not logged in. What I cant figure out how to do is point www.mywebsite.com to the landing/home component. I can create redirects but I would need to do this for every component and it feels like it will be quite messy. I also want people to be able to go to www.mywebsite.com/about, not www.mywebsite.com/landing/about. Is there a way to achieve this or am i stuck having to create redirects?


5 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @4Matrix

    I'm not sure how to do this. But, this seems like a tricky way to create a public website. Maybe it would be better to create a separate Angular app for your public website. This way, you can totally separate admin app and public app.

  • User Avatar
    0
    4Matrix created

    Yes I did think about doing this but I want to share the user session with the main app. If they are logged in on app.mywebsite.com, www.mywebsite.com should show the logged in user menu, not the login button. I want to do this because if they are logged in, the landing site will show different menu items etc

  • User Avatar
    0
    ismcagdas created
    Support Team

    In that case, you can consider implementing SSO but it might be harder than your initial implementation.

  • User Avatar
    0
    4Matrix created

    For now we have gone with creating the public site in the same angular app and just putting the routing in the root-routing module e.g.

        {
            path: 'about',
            component: LandingComponent,
            loadChildren: () => import('./landing/about/about.module').then((m) => m.AboutModule),
        },
    

    This is working for now but it is not ideal. I would like to explore the option of having a second angular app for the public site, so that the main angular app included with AspNetZero would be served on my.company.com and a new "Landing" site would be served on www.company.com, just like the MVC Public Project Included with AspNetZero.

    I started off by cloning the current angular folder to angular-Landing and adding the landing components there ( e.g. About, Contact etc ) but it became apparent that this was going to create some major issues as I didn't want to use the authentication from this project. I want the landing site to share a session with the main angular app. I sort of got this working because I was hosting them on the same domain and could wildcard the CORS but when it needed to login etc, it was trying to use the pages from the folder and not the main one. Another worry is that if we ever updated the AspNetZero template to a new version, this might mean the angular-landing site broke.

    I think what I need to do it make a completely separate angular site from scratch but I want to be able to access the proxies from the main app and share the login/session. Any advice anyone has for me on this would be much appreciated!

    I don't suppose AspNetZero have any plans to migrate the MVC Public site to Angular do they?!

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    We are using NSWAG for generating service proxies. I think you can generate same proxies for your public website and use it. ASP.NET Zero's Angular app uses token based authentication, and this token is sent to server with an Angular interceptor, see https://github.com/aspnetzero/aspnet-zero-core/blob/dev/angular/src/shared/service-proxies/service-proxy.module.ts#L58.

    So, you can create a new login page or you can redirect to admin site's login page with a returnUrl and it will set token to cookies, so when user is redrected back to public website token should be sent with all requests to server via AbpHttpInterceptor.