Month: June 2021

Redirect azurewebsites.net to your custom domain

This post assumes that you’ve already configured your custom domain, and here we are adding a step to ensure that the azurewebsites.net domain redirects there.

We achieve this by way of a URL rewrite, configured in the web.config:

<system.webServer>
    <rewrite>  
        <rules>  
            <rule name="Redirect azurewebsites.net to Custom Domain" stopProcessing="true">
                <match url=".*" />
                <conditions>
                    <add input="{HTTP_HOST}" pattern="^(.*?)\.azurewebsites\.net$" />
                </conditions>
                <action type="Redirect" url="mycustomdomain.com/{R:0}" appendQueryString="true" redirectType="Permanent" />
            </rule>
        </rules>
    </rewrite>  
</system.webServer>

This will intercept any azurewebsites.net URL (^(.*?).azurewebsites.net$) and redirect it to your custom domain.

Adding Octopus Deploy to the mix

You most likely have multiple environments, and may need to redirect more than one to it’s own custom domain. Perhaps something like test.myapp.com and production.myapp.com etc.

This means that we’d want to specify a different target domain for the rewrite depending on the environment. We can achieve this my making use of the variable substitution feature in Octopus Deploy.

First, we define the variable in the config file:

<action type="Redirect" url="#{azureRedirectTarget}/{R:0}" appendQueryString="true" redirectType="Permanent" />

The #{azureRedirectTarget} variable now needs to be replaced by Octopus Deploy during deployment, based on the target environment.

First we turn the feature on:

Then we specify values for the new variable, like we normally would:

And now Octopus will replace the variable during deployment and our rewrite will be correct for each environment.

CSS Font Size

The golden rule here is that anything that is not a relative size is a mistake. So you need to go with relative sizing, and the best for fonts is: em and rem

rem: relative to the font size of the root element
em: relative to the font size of it’s direct or nearest parent

So, by setting a baseline font size at the root html element, you can then use rem throughout your app to take control of font sizing. One more bit of magic is to use a root font size that will equate to something you can easily do the maths from. 62.5% equates to 10px in normal conditions:

html {
  font-size: 62.5%     <--- this is 10px
}

With your root element under your control, you can now use rem with confidence throughout: 

body (or whatever) {
  font-size: 2.1rem;   <--- this is 21px
}