Unable to run the Angular2 app in IIS - iis

I followed the Angular2 Quick start example and used live-server to run it. It works fine.
I created then a web site in IIS and set the virtual directory to the directory where I have the index.html file. When I run the website I get the following error. The error happens when the IIS tries to server app.ts.
How can run the Angular2 app in IIS?
The page you are requesting cannot be served because of the extension configuration. If the page is a script, add a handler. If the file should be downloaded, add a MIME map.
UPDATE:
Solution: I created a new web.config file and added the following snippet of code to add the MIME type. This will be used by the IIS as the local web app settings.
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension=".ts" mimeType="application/x-typescript" />
</staticContent>
</system.webServer>
</configuration>

By convention, it is not advised to directly serve TypeScript (.ts) files. This is why IIS doesn't enable this by default. The quickstart tutorial also explicitely mentions this halfway the page, on section What's wrong with this?, where it states the following:
We were up and running in a hurry and we could explore Angular in this manner for quite some time. For a number of reasons this isn't a good approach for building an application:
Transpiling TypeScript in the browser becomes tediously slow when our app grows beyond a few files. We certainly won't do that in production. We should learn to compile locally and push the generated JavaScript to the server. We'll need some tools for that.
So if you take a couple of minutes more and finish the tutorial, it'll work out for you just fine without having to bother with IIS configuration.
That being said, if you truly want it, it is possible. Like mentioned in other comments, you can add a MIME type for .ts files in IIS. In the SO question What's the MIME-Type of TypeScript it is explained as well.

try to register a .ts mime type
Add a MIME Type (IIS 7)
Also, this SO seems like a good explanation

Related

ReastJS, Node, and IIS

I have been following a tutorial from Cory House on Pluralsight about React, Redux, webpack, babel, and a bunch of other support libraries. I am using Visual Studio Code on a windows OS. I have completed the tutorial, which includes a build process that outputs a bundled js file to a dist folder. The build process also runs the app to verify the build is correct (which it is). I then tried to copy the contents up to an IIS server and run it there. However, when I try to access the web site, the index page comes up blank. I verified the bundled js file is called (returns 200 status). That left me wondering if there is an extra step I need to do to transfer an app created using Node to one that can run on IIS.
I should clarify I added a web.config file to the site.
Any help is appreciated
Edit: Here are two errors I am getting on when rendering the page. One of the errors (#2) appears to be a web pack module:
Error 1
Error 2
In error 2, "Attributes" is undefined
I figured it out partially. It had to do with react-router and my routing. When developing and running it locally, it was running at the root of local host:
http://localhost
When I moved it to the IIS server, I had to create an app under the default web site, which changed the apps url to:
http://localhost/ReactJS
That caused my routing to fail and loaded a blank page. However, even though the home page loads now since fixing the routing, it is still not working as I can't navigate to the other views, but at least I have narrowed it down.

Hosting a Loopback API in IIS using IISNode

I have built an API using Loopback. Now that it's time to host it on my Windows machine, Googling turned up two distinct options: 1) using NSSM to create a Service, or 2) using IISNode, a IIS module, to host the API using an IIS process. Since the benefits of using IIS seemed too strong to ignore, I chose that option.
The loopback documentation states that iisnode can be used to host a loopback api, but then fails to provide any guidance on the topic.
Iisnode documentation also has a few very basic examples, some based around Express (which loopback is built upon), but doesn't make it clear how to adapt a loopback application for use with iisnode. In all of their simplistic examples, the main node file is located at the root level of the node project. Loopback, however, keeps its at "~/server/server.js". This makes it unclear about where to place and configure the web.config file necessary for iisnode to work.
Is anyone aware of a decent tutorial or walk-though for hosting a Loopback project in IIS using iisnode? All I found are vague articles stating to the effect of "well...it should work." Has anyone successfully hosted a loopback project using iisnode?
Make sure you follow this small check. Loopback hosting on web servers has a known issue(Not exactly an issue, but a protection feature, which can trip up first time deployer):
https://github.com/masonkmeyer/loopback-azure
The app.start() is called only when loopback's server.js is invoked directly. But webservers like IIS usually invoke the main script by requiring it. The solution suggested above is a little inelegant, in the sense that it does not guarantee that app.start will be called only after boot completes setting up rest endpoints.
Otherwise the web.config is pretty straight forward. The following helped me with the configuration a bit:
https://tomasz.janczuk.org/2011/08/using-url-rewriting-with-nodejs.html
I'm not sure that you need a Loopback specific tutorial to help you out here. You just need to modify your Web.config.
Inside your Web.config there needs to be an iisnode handler. This instructs IISNode which file is the main file in your project. To direct traffic to your server file path simply change the path attribute on the handler.
<handlers>
<add name="iisnode" path="/server/server.js" verb="*" modules="iisnode"/>
</handlers>
I've created a couple different walkthroughs for setting up an IISNode app with Express but they are applicable to really to anything being setup with IISNode.
This answer

Missing Documentation for web.config for a Node.js application on Azure Website

I'm running a Node.js server as API for my mobile app on a Windows Azure Website. And I'm having some trouble with it due to the needed web.config - but I couldn't find any really helpful documentation about it. Everything I can find is googling for specific problems on it and with a bit luck I can use the config snippets.
is there any general documentation about the contents the web.config can contain and their meaning?
in the start I had the problem that errors were modified by IIS to a general error. But since it's a REST API I want the HTTP status codes to be returned. I got around that with the <httpErrors existingResponse="PassThrough" /> element, but it doesn't seem to work for every error.
The only documentation I found so far are example configuration files of the iisnode module.
If you see the following error:
web.config not found in project, to create a project to deploy to
Windows Azure you must create a Windows Azure Node.js project.
....you may have created the wrong type of Visual Studio Project. You want a "Windows Azure Node.js Application" not a "Node.js Web Application". The former creates a few extra files that are needed for Azure (Web.cloud.config & Web.config).
You may be able to create a dummy VS project of the correct type and then copy these files into your existing project. Alternatively create a new project of the correct type and copy your source files into the new project.
Create Azure Basic Node.js Express Application

Running vline-node example on IIS

I have successfully tested the vline-node example locally, but would like to push it out to a server. I have tried to install the example as an application on an IIS8 website, placing the example code under wwwroot. I have done tried this both within the root and inside a virtual directory, pointing to the views folder. I am able to login to the application from a browser on the server, although, since javascript is turned off on the server browsers for security, so functionality is missing.
However, when I try to access the site from a remote browser I am not able to login. Actually, I can see that there is something wrong with my paths, as the include files are not found.
The more I've thought about this the more confused I've become. I'd like to run this under IIS, but wonder if that makes sense. Can someone offer a clean solution for hosting the vline-node example on a Windows Server, ideally under IIS?
Since you are using the node example, you'll need to make sure that node is actually running on your IIS server. Here's a SO response that may be helpful: How to run Node.JS server for a web application?
Note that in our node example the "main" file is vline-node.js, so use that in place of the app.js that is mentioned.

Is it possible to make a self-hosted project of a ServiceStack+MVC3 like SocialBootstrapApi?

I am learning how ServiceStack works with the help of self-hosting projects.
Self-hosting projects are much easier to debug and understand, since no magic happens inside IIS.
I followed these steps, read http://www.servicestack.net/mythz_blog/?p=785 and applied them backwards.
It worked fine for Docs, but not for the SocialBootstrapApi. The code in Application_Start() from Global.asax is the problem I think
Steps for ServiceStack Docs
Download the ServiceStack Docs sample project
Create a new console project (.Net 3.5 since Docs is still 3.5)
Copy all files from old web project except web.config. (I first used drag and drop, but that only moved the file, it didn't update the .csproj file, so I had to use an editor to copy some ItemGroup sections.)
Move AppHost into a separate class file, changed to inherit from AppHostHttpListenerBase
Copie the Programs.cs file from the RazorRockstars project
Change the baseUrl: var baseUrl = "http://localhost:2001/"; // ConfigUtils.GetAppSetting("WebHostUrl");
Copy the app.config file from RazorRockstars project (but this wasn't needed)
Change output path for console project to .\ because otherwise PageManager.Init got the wrong path and most files were not found
When you done this, download the complete ServiceStack source code and recompile in Debug mode, replace all ServiceStack references in the Docs project by the newly compiled things. Now, you can easily step through all ServiceStack-code, set breakpoints etc, and understand what is happening and when. Console projects also have some other advantages, they start faster, Edit-and-Continue works more often.
For SocialBootstrapApi I did the same except/and
Renamed web.config to app.config
Commented away // [assembly: WebActivator.PreApplicationStartMethod(typeof(SocialBootstrapApi.AppHost), "Start")]
Now, the normal ServiceStack part of the project works, although the url is without the initial /api/
Tried moving Application_Start() from Global.asax to AppHost.Configure ==>> Refuses to start
ASP.NET MVC can't be hosted in a self-hosted HttpListener (since it's coupled to ASP.NET), but ServiceStack does support hosting it's Razor and Markdown view engines inside a self-hosted HttpListener app.
The Razor Rockstars website is a show case website of ServiceStack's Razor and Markdown view engine support. razor-console.servicestack.net is the same website hosted in a HttpListener self-host. The source code of RazorRockstars is on GitHub with the RazorRockstars.SelfHost example contains the source code for razor-console. The one thing you have to remember with self-hosted websites is that the Razor view pages Build Action in VS.NET needs to be set to Copy if Newer so the views are copied in the /bin directory so they can be found by ServiceStack at runtime.

Resources