Deploy Angular as UI and Asp.Net to the same AppService Azure - asp.net

I am trying to deploy Angular as UI and Asp.Net to the same app service in Azure. The issue is that the Angular project does not display on the website. I have already defined the Physical Path to the angular project but it displays this error on the website. If I am only deploying the Angular app it displays as it should on the website but as soon as I publish the Asp.Net application to it, it returns an error on the website.
Does anyone know how to solve this problem?

Before deploying the website, kindly configure the ISS (Internet Information Services) which is a dependency with angular applications.
To deploy the core .net application with Angular with some DB connect, follow the steps mentioned in the blog
Document Credit: Jason Watmore

Related

How to deploy ASP.NET project with Angular 13 frontend to IIS?

I am trying to setup the solution for a web application which uses ASP.NET with .NET Framework 4.8 for the backend and Angular 13 for the frontend (we cannot use .NET Core or any newer version because some of the libraries we need to use are only available for .NET Framework).
In the solution, the angular project is in the same folder as the backend project (where the sln file is also located). Now, I created a publish profile for the backend project but it is not yet linked to the angular project in any way, so the output folder only contains the files for the backend. In addition to that, I built the angular frontend via ng build which generated all of the files I need for the frontend in the dist folder.
How can I deploy this to an IIS webserver so users can see and work with the angular frontend and all http requests to the backend are routed to the appropriate controller and action in my ASP.NET application? Are there any tutorials or instructions for this? So far, I was not able to find what I am looking for and I am very confused how I am supposed to make this work in IIS.

ASP.NET Core MVC and ReactJS - Sharing Authentication session

I am already having a react SPA which works with backend WebAPI.
Currently, I am making an ASP.NET Core MVC Project which has its own view pages, but needs to integrate this app in one page (I will integrate all WebAPI functions to this MVC app as well).
Since I am using Cookie based authentication on my ASP.NET Core App, I want my react app to share the same authentication session so that users doesn't need to login again.
Theoretically, everything should work well when I copy the compiled react JS files to my ASP.NET Core scripts folder and run it.
But, The challenge is debugging. When both apps works on different ports, the Authentication cookie is not shared, and my react app will not work (Both CORS and Authentication problem)
How can I run both apps on same port while development?

Deploying Angular 9 .NET Core template in IIS

I'm trying to deploy .net core app with Angular, a project I created from the template available in Visual Studio.
The application I have in IIS is set to run from the angular app
Now within the same application, I added api application which is pointing to the api folder:
While I'm able to access the angular app, when I'm trying to login by calling the controller in the .net core application I'm getting this error:
System.InvalidOperationException: The SPA default page middleware
could not return the default page '/index.html' because it was not
found, and no other middleware handled the request. Your application
is running in Production mode, so make sure it has been published, or
that you have built your SPA manually. Alternatively you may wish to
switch to the Development environment.
Previously, when I was working with angular and .net core I had one project in VS for the .net core app and one project for the angular app and they were running from different subdomains, for example app.mywebsite.com for the angular app and api.mywebsite.com for the .net core app and I didn't have issues.
I was hoping with the .net core / Angular template I'll be able to run both the app and the api from one project but I'm currently experiencing the issues I mentioned above.

Integrate Angular JS project into Web Api project

I currently have a Play project where Angular Front-end is integrated into it with Gulp. Now I need to re-use the angular code into a .Net Web-Api project. Having APP and API as separate project will work. But to avoid dealing with different ports and CORS only option is to have one project that is deployed to one port where AngularJs project gets integrated along with Web Api project.
I have checked many question only this Stack-overflow answer seems relatable to my scenario but no luck with that solution too.
Does anyone know how to do that kind of integration. And is it possible to have integrated both into one project
Create ASP.NET MVC application.
Change default Index.cshtml with your index.html from Angular application. (You'll maybe need to correct paths to other files).
Now ASP.NET runs your application so you can add WebAPI Controllers instead of MVC Controllers inherit from ApiController.

how can we integrate meteor application to simple web application runs on application server?

Is there any integration meteor application with application server.
I want to create a chat client which should be integrated with my web application, i have seen meteor example and i want to explore the possibility for my requirement.
Please suggest.
You could either use meteor for your web application or you could put the meteor chat application in an iframe on your web application.
It would be difficult to actually integrate your current web application into a seperate meteor instance because meteor includes its own webserver and the meteor code can't run on what your application server's stack might be (IIS/Apache,Thin,etc). You would have to look at a way of having meteor run on its own and then integrating this into your webpage with html/javascript
If you don't have a chat application on meteor yet, there's a very good example at:
https://github.com/AVGP/meteor.js-chat-example

Resources