How to run emberJS application in IIS?

8
votes

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?

3
ember.jsiis-7ember-cli
You need to route everything to the index.html file and have ember handle the url. Modify your webconfig, not sure how you do it with IIS but on apache we use .htaccess – Patsy Issa
Alternatively location: hash will solve that problem – Patsy Issa
After some research add Request=* page=index.html to your web.config and it should work, might break your assets link – Patsy Issa
I'm doing ember with a .net api backend and I'm having a similar issue, but not sure what I'll do to fix it yet. In development I'm changing the MVC routes to {*url} and mapping everything to ~/home/index which is where I render the ember app, so it doesn't try to find a server controller for anything other than ~/home/index, but I'm not sure how bad this is. Sure doesn't sound like the way to go. – MilkyWayJoe
No, I do not like that solution either. For now I have just ignored this issue, becuse this website is going to be wrapped inside a phone gap solution. – Karoline Brynildsen

3 Answers

10
votes

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.

5
votes

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'
   ... };
1
votes

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>