Rerouting public stuff in Umbraco

howto.md

Allowing CSS and JS scripts to be stored somewhere else in an Umbraco website

You may want to cleanup the root of your website, but Umbraco assumes that CSS and JS are stored in the /css and /scripts folders respectively. Further more, you may want front end users to be able to access the files as if they were not stored somewhere else. Use this guide to find out how to move the CSS and JS into a /public folder without breaking anything.

Setting up

1 - Create a /public folder in the root of your website 2 - Move the /css and /scripts folder into the /public folder 3 - Add the following rewrite rule to the Web.config:

<configuration>
  <system.webServer>
    <rules>
      <rule name="asset-url-rewrite" stopProcessing="true">
        <match url="^(?!media)(?!umbraco)[0-9a-z\-\/\.]+[^\/](js|css|svg|jpg|png|pdf|ttf|woff|woff2)$" />
        <action type="Rewrite" url="public/{R:0}" />
      </rule>
    </rules>
  </system.webServer>
</configuration>

4 - Add a couple of keys to the settings to tell Umbraco where the CSS and JS has been moved to:

<configuration>
  <appSettings>
    <add key="umbracoCssDirectory" value="~/public/css" />
    <add key="umbracoScriptsPath" value="~/public/scripts" />
  </appSettings>
</configuration>

Read about this here: https://web.archive.org/web/20141112203552/http://our.umbraco.org/wiki/reference/webconfig/additional-umbraco-specific-appsettings

5 - All done!

Testing

Assuming there is a file at the server path ~/public/css/styles.css, you should still be able to go to http://localhost/css/styles.css to access the file.

Umbraco media should still be served from ~/media.

You should still be able to login to Umbraco.

You should also be able to edit the previously mentioned styles.css document by going into the Umbraco Settings section, opening the Stylesheets tree item and editing that file.

You should still be able to preview nodes in Umbraco.

Caveats

• right clicking on a CSS or JS node in the Settings section of Umbraco will cause an error instead of the overlay appearing
• page URLs which don't have a slash ('/') on the end will error (need to find a better regex)
• only tested on Umbraco 7.5.4