Deploy angular 4 App in IIS - node.js

I have a multi-tenant Angular 4 and .Net core 2.0 application.
I have hosted .Net core API in IIS with deployment time debugging and for that I have followed this link.
https://learn.microsoft.com/en-us/aspnet/core/publishing/development-time-iis-support
With this configuration in IIS, I can access my API any time and if I want to debugg it, I can run it in VS.
Now, Is it possible to run Angular app directly with IIS. I mean is there any way that npm start will directly open app in specific IIS url like app.myapp.local, and not at localhost:4200
what I have did so far?
I have added one folder in wwwroot/myapp, and I have pointed it to Default web site in IIS.
then, I am building my app with ng build, copying all content of dist folder to wwwroot/myapp.
Is there any proper way in Angular, to handle this kind of scenario?
this question is not same as this Deploy angular application on IIS
because as I specified, I want to start my app in debugging mode at specific URL without building it, So please don't add it in duplicate without understanding question.

Related

Publish Angular App Alongside Web API to Azure

The bounty expires in 4 days. Answers to this question are eligible for a +400 reputation bounty.
muttley91 wants to draw more attention to this question:
Kind of stuck with this one, looking to get more eyes on it
I created an ASP.NET Core app with Angular as instructed via this guide. I'm publishing it to Azure using the GitHub Action support, which was generated by Azure and then I modified to get it to work. I've got it working for my app but only the API seems to publish, and at the designated endpoint URLs. This makes sense since I had to modify the workflow to indicate the API project directly. How can I publish the Angular app (in the UI project) to Azure as well with this same workflow?
Here is the repo for reference: https://github.com/rarDevelopment/rardk-web-dotnet
The workflow: https://github.com/rarDevelopment/rardk-web-dotnet/blob/main/.github/workflows/main_rardkweb.yml
and the API sample endpoint can be seen running here: https://rardkweb.azurewebsites.net/WeatherForecast
the Angular app will get published via npm run build , it says so also in the guide you linked, here
The publish process takes more time than it does for just an ASP.NET Core project, since the npm run build command gets invoked when publishing.
In dotnet static files are stored within the project's web root directory.
Your angular project should be configured to publish the result of npm run build in the web root directory (www) of your dotnet project.
When the built Angular app is in the www directory, then you build/publish the dotnet project, which needs to be configured (see the guide examplecode) to serve static files.

Can you easily explain the process of deploying ionic (based on react) apps with a node backend?

I recently started using react with a node server as a backend. I'm having problems to understand how to deploy such an app. I'm a beginner with ionic and deploying websites (or rather web based mobile apps) so I apologize if this is an easy/stupid question.
I searched a lot about this but my brain is still struggling to understand the deployment process. As I understand, any website have generally two parts, the frontend built with HTML/CSS/JS and the backend built with nodejs (in my case). If I want to run the app, I need to type npm start in the terminal right? so I'm only running the node server actually, where it will serve the HTML pages (static pages) depending on which url endpoint I wrote, right?
So deploying this is "easy" by copying the static files into a remote server and just run the nodeJs server to serve pages depending on the request, right. Therefore, is the start command here npm start, which will start the whole app.
I'm now using the ionic framework with react syntax and nodejs in the backend. There is a special command to run the ionic app (frontend), which is ionic serve. So if I run this the frontend will show up in the browser. Furthermore, I need to run the node server with npm start to handle requests. Therefore, to start my app, I need the ionic serve and npm start commands. How can this be deployed?
After some research, I read that I need to deploy the ionic app (frontend) and the backend separately. For example the ionic app would be a webapp and the server also a separate webapp (since I'm using MS Azure). The communication between them can be over rest API or web sockets as I understand. Is this the right approach to do this or there is a better/more clear way?
deploying two apps would mean that I need to pay for two apps on azure. Is there a way to minimize costs and have a functional app?
PS: generally, I'm having problems to understand the deployment process. I understand basically how the web works and I can build website on my machine but I'm not confident about my skills when it comes to deployment. Surprisingly, there is not much on the internet about it. Can someone please recommend articles, books or ideally videos that explain this process. Thank you in advance.
here is how you deploy ionic apps as pwa - https://ionicframework.com/docs/react/pwa
if you are using a node backend, the you would start the server same as you would normally, If I am understanding the question
Though your question is not specific to a particular issue but highlights a wide variety of issues, i will still try to explain it.
Ionic is primarily used for creating HYBRID/WEB MOBILE APPLICATIONS. Although you can deploy the code as a website too, but you will not be able to get any benefit out of using ionic for a website only and not using react as a standalone framework.
Be clear on your requirement, your question talks about website and web based mobile apps. Deploying a website and a hybrid mobile application is not one and the same thing. Websites are hosted on servers, mobile apps are deployed in app stores.
If you are not going to deploy to any mobile platform, i suggest you drop ionic and build your website with react.
Now coming to Ionic mobile apps, this is the flow
Create Ionic Project -> Build project for iOS/Android platform -> Deploy these apps to respective app stores
You will not host your Ionic mobile code on any hosting provider.
Your node.js backend code gets hosted on a hosting service. The endpoint URL will change to your hosted servers IP address.
Read about following topics first
What are hybrid mobile applications
What is Ionic
How to build mobile apps using Ionic
Publishing Mobile Applications
Deploying node.js to a cloud host

Can we use angular project and that will use in my two different API backend projects (i.e. node and .net core)?

For an example, I have one angular ui project that fetches values and perform operations.
I have one backend API project in .Net Core and now I want to reuse angular ui project with node js.
Is it possible?
How to configure it and which are the main points to take care that angular project support both.
How can I deploy it?
Angular is a client side application that run's in clients browser, as long as the REST API or service you connect has Same API endpoints and same object models and authentication etc everything will work as intended.
REST is platform independent like the web services and also language independent. It doesn't matter if you use .Net Core or some nodejs framework.
Once the angular application is build ( ng build --prod) you get a bundled application files in dist folder you can host these files in any web sever just like you host normal html file.
The only change you have to make in the the Angular application will be to change the host URL (if there is any change) normally configured in environments folder
Take help of environment file and change the api as per your requirement.

Way to host node project on IIS

I have been working on an Angular application with node. I succeeded in hosting Angular application to IIS but still needs to run node application manually in localhost using npm run build.
Now all I want is to host Node application on IIS so that I can directly use it in the project. I tried IISNode but no success. Any way to do it without using IISNode?
And which is best practice, using a single project for Node and Angular application or create separate applications for both.

Can you host a ServiceStack Web App in IIS?

I have made a ServiceStack Web App that uses a custom AppHost from a plugin (similar to the example https://github.com/NetCoreWebApps/WebApp/tree/master/src/apps/chat). I can run it on macOS with the dotnet command as per the examples.
Can I host my Service Stack Web App on IIS? What approach should I take? Reverse-proxying Kestrel like this https://learn.microsoft.com/en-us/aspnet/core/publishing/iis?tabs=aspnetcore2x
or will I need to have different AppHost/Startup code for the two hosting situations?
Or maybe there's a fundamental reason why it will never work?
WebApp is a standard .NET Core 2.0 App so you'll be able to host it as you would any other .NET Core App. Normally reverse proxies don't require anything except the internal url where the request is proxied to, but it looks like IIS wants you to explicitly call .UseIISIntegration() which is an issue that may have prevented the existing WebApp binary as it didn't call .NET Core 2.0 WebHost.CreateDefaultBuilder(args) which among other things would turn on IISIntegration when the .NET Core App is hosted in IIS/Windows which is now being done from this commit.
You can find the updated Web App binaries with this change in the /web folder of the https://github.com/NetCoreWebApps/Chat project.

Resources