How to run emberJS application in IIS?

Question

I have an EmberJS application that is built using Ember CLI. To deploy my application I used the ember build --release command with Ember CLI, and copied the output from the /dist folder into the folder that is mapped with IIS. Everything seems to work fine. The url is updated when you navigate inside the SPA, data is fetched from Web Service etc. BUT if I try to access localhost/someurl directly, I get a 404 Not Found error. I'm guessing this is because of the routing in IIS 7, but how can I make this work with Ember routing?

Answer 1

I know this question is old but i found a very nice solution to the problem using the IIS URL Rewrite module (https://www.iis.net/downloads/microsoft/url-rewrite) which basically mimic's apache's mod_rewrite.

Basically you define the rewrite rules in a web.config you place along side the dist/* files you dropped into an IIS directory and then go to town.

Here is my rewrite rule block in my web.config.

<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="CatchAll For Ember" patternSyntax="Wildcard" stopProcessing="true">
                    <match url="*" />
                    <action type="Rewrite" url="index.html" />
                    <conditions>
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

If you remove the IsDirectory check then it will still use IIS's 404 for bad directories.

This allows you to host ember applications in IIS without using the /#/ technique.

Answer 2

The easiest way to get get this to work on IIS, and similar to the way other route frameworks work in IIS like Sammy.js, is to include a hash in the url like this http://0.0.0.0:4200/#/your-route/

In EmberJS, this is achieved by modifying the application router:

var Router = Ember.Router.extend({
  location: 'hash'
});

In your case, since you're using ember-cli, you modify the environment.config file:

var ENV = {
   ...
   locationType: 'hash'
   ... };

Answer 3

I'm using ASP.Net WebApi with Identity and I also wanted to avoid returning index.html for non-existent files so I did this:

<system.webServer>
    <rewrite>
        <rules>
            <rule name="to-ember" stopProcessing="true">
                <match url="^/?(.+\.[a-z0-9]+$|token$|api/)" ignoreCase="true" negate="true"/>
                <action type="Rewrite" url="index.html"/>
            </rule>
        </rules>
    </rewrite>
</system.webServer>