'IIS not serving .css & .js files for Laravel site

I'm having an issue with a site I'm working on where .css throw a 404 error and it's been giving me problems for over a day now. I recently setup a Laravel 5 site hosted locally on my machine with IIS10. I have a master layout stored in /views/layouts (layout.blade.php) where I include the stylesheets like this:

<head>
    ...

    <link href="{{URL::asset('css/bootstrap.min.css')}}" rel="stylesheet" />
    <link href="{{URL::asset('css/font-awesome.min.css')}}" rel="stylesheet" />
    <link href="{{URL::asset('css/prettyPhoto.css')}}" rel="stylesheet" />
    <link href="{{URL::asset('css/price-range.css')}}" rel="stylesheet" />
    <link href="{{URL::asset('css/animate.css')}}" rel="stylesheet" />
    <link href="{{URL::asset('css/main.css')}}" rel="stylesheet" />
    <link href="{{URL::asset('css/responsive.css')}}" rel="stylesheet" />

     ...
</head>

Now, if I open the browser and navigate to http://localhost/test_site/public/ all of my views appear sans any styling. Opening up the developer tools there are seven errors stating:

HTTP404: NOT FOUND - The server has not found anything matching the requested URI. (XHR): GET - http://localhost/test_site/public/css/<filename>.css

I'm confused as to why if the path being shown to the css file is correct, then why wouldn't it render as you'd expect it to. My initial thought was that there was an issue with my web.config file, which I have as:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <remove fileExtension=".css" />
            <mimeMap fileExtension=".css" mimeType="text/css" />

            <remove fileExtension=".js" />
            <mimeMap fileExtension=".js" mimeType="application/javascript" />

            <remove fileExtension=".jpg" />
            <mimeMap fileExtension=".jpg" mimeType="image/jpeg" />

            <remove fileExtension=".png" />
            <mimeMap fileExtension=".png" mimeType="image/png" />
        </staticContent>
        <rewrite>
            <rules>
                <rule name="Rewrite rule1 for laravel_rewrite">
                <match url=".*" />
                <conditions>
                     <add input="{laravel_rewrite:{HTTP_HOST}}" pattern="(.+)" />
                </conditions>
                <action type="Rewrite" url="{C:1}{REQUEST_URI}" appendQueryString="false" />
            </rule>
            <rule name="Rule 2" stopProcessing="true">
                <match url="^" ignoreCase="false" />
                <conditions>
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="false" negate="true" />
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" ignoreCase="false" negate="true" />
                </conditions>
                <action type="Rewrite" url="/Tutorial/public/" />
            </rule>
            <rule name="Rewrite routed access to assets(img, css, files, js, favicon)" stopProcessing="true">
                <match url="^(img|css|files|js|favicon.ico)(.*)$" />
                <action type="Rewrite" url="/Tutorial/public/{R:1}{R:2}" appendQueryString="false" />
            </rule>
        </rules>
        <rewriteMaps>
            <rewriteMap name="laravel_rewrite">
                <add key="localhost" value="/Tutorial/public" />
            </rewriteMap>
        </rewriteMaps>
    </rewrite>
</system.webServer>
</configuration> 

I had originally generated the web.config file (which is stored in the public folder) using the URL Rewrite module in IIS, but the additions between <staticContent>...</staticContent> and the third rule I made as attempts to fix this issue.

I also thought the issue might be with the handler mappings, specifically the StaticFile one which uses the * wildcard as the RequestPath. I left that one in place but I also defined separate handlers with *.css and *.js which did not help.

Does anyone have any suggestions as to other things I could try? Just to clarify, here's some additional information about my setup:

  • The Windows feature Static Content has been enabled (I also disabled and re-enabled it as some other sites suggested).
  • The IUSR has the appropriate permissions to access all of the site's folders.

Thanks in advance to anyone who can help!



Solution 1:[1]

So after messing around with a few things, including creating new handler mappings for each individual file type and things like that, I deleted my web.config and created a new one that has done the trick for me:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
    <rewrite>
        <rules>
            <rule name="Imported Rule 1" stopProcessing="true">
                <match url="^(.*)/$" ignoreCase="false" />
                <conditions>
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="false" negate="true" />
                </conditions>
                <action type="Redirect" redirectType="Permanent" url="public/{R:1}" />
            </rule>
            <rule name="Imported Rule 2" stopProcessing="true">
                <match url="^" ignoreCase="false" />
                <conditions>
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="false" negate="true" />
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" ignoreCase="false" negate="true" />
                </conditions>
                <action type="Rewrite" url="index.php" />
            </rule>
        </rules>
    </rewrite> 
</system.webServer>
</configuration>

Now everything's working exactly how you'd expect it to.

Solution 2:[2]

Create a new file web.config in your root and just paste it after that you can access the public's folders by simply Before Path: http://domainName.com/public/image.jpeg
After Path: http://domainName.com/image.jpeg

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <defaultDocument>
            <files>
                <clear />
                <add value="index.php" />
            </files>
        </defaultDocument>
        <rewrite>
            <rules>
                <rule name="Laravel Force public">
                    <match url="(.*)" ignoreCase="false" />
                    <action type="Rewrite" url="public/{R:1}" />
                </rule>
                <rule name="Laravel Routes" stopProcessing="true">
                    <conditions>
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                    <match url="^" ignoreCase="false" />
                    <action type="Rewrite" url="public/index.php" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 wrigley06
Solution 2 Syed Arsalan Ahmed