Potentially the Best File on the Internet for Web Developers

Of course this is a big call, but having utilised various parts of this file on many occasions with large amounts of success, it sure does rank as an important resource, especially as server configuration is not my strong point.

So, what is this file I am talking about? 
HTML5 Boilerplate Apache Server Configs

A word of warning, all the goodness in this file is for people using an Apache Server. If you happen to have a different server setup be sure to checkout all the other server configs maintained by the HTML5 Boilerplate community.

With over 980 lines of code it would be a little impractical to look over all the configuration options in this post but I have picked out 5 which I feel are worthy contenders to be part of your .htaccess file.

So what does the .htaccess file do?

The .htaccess file is a configuration file that can modify the configuration of the Apache Web Server to enable and/or disable additional functionality on a per-domain and even a per-directory level basis.

Where does the .htaccess go?

You should upload your file to the exact directory you want it to modify. I generally add it to the root directory but you can add multiple .htaccess files throughout your directories if needed. Also remember your .htaccess file needs to be a plain text file.


5 Awesome .htaccess snippets

Custom error messages/pages

To provide more information to people experiencing errors on your site you can easily adjust your .htaccess file to point to a customised error page based on an error code rather than showing the default server error page.

Some Error codes that might be helpful:
400 – Bad Request
401 – Authorization Required
403 – Forbidden Page
404 – File not Found
500 – Internal Error


# ----------------------------------------------------------------------
# | Custom error messages/pages                                        |
# ----------------------------------------------------------------------

# Customize what Apache returns to the client in case of an error.
# https://httpd.apache.org/docs/current/mod/core.html#errordocument

ErrorDocument 404 /404.html


Forcing https://

This is quite self-explanatory. If you need to redirect from http:// to https:// this simple rewrite does the trick.


# ----------------------------------------------------------------------
# | Forcing `https://`                                                 |
# ----------------------------------------------------------------------

# Redirect from the `http://` to the `https://` version of the URL.
# https://wiki.apache.org/httpd/RewriteHTTPToHTTPS


    RewriteEngine On
    RewriteCond %{HTTPS} !=on
    RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L]
 


Suppressing / Forcing the `www.` at the beginning of URLs

This rewrite rules help make sure your files are only available under one URL.


# ----------------------------------------------------------------------
# | Suppressing / Forcing the `www.` at the beginning of URLs          |
# ----------------------------------------------------------------------

# The same content should never be available under two different
# URLs, especially not with and without `www.` at the beginning.
# This can cause SEO problems (duplicate content), and therefore,
# you should choose one of the alternatives and redirect the other
# one.
#
# By default `Option 1` (no `www.`) is activated.
# http://no-www.org/faq.php?q=class_b
#
# If you would prefer to use `Option 2`, just comment out all the
# lines from `Option 1` and uncomment the ones from `Option 2`.
#
# (!) NEVER USE BOTH RULES AT THE SAME TIME!

# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

# Option 1: rewrite www.example.com → example.com


    RewriteEngine On
    RewriteCond %{HTTPS} !=on
    RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
    RewriteRule ^ %{ENV:PROTO}://%1%{REQUEST_URI} [R=301,L]


# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

# Option 2: rewrite example.com → www.example.com
#
# Be aware that the following might not be a good idea if you use "real"
# subdomains for certain parts of your website.

# 
#     RewriteEngine On
#     RewriteCond %{HTTPS} !=on
#     RewriteCond %{HTTP_HOST} !^www\. [NC]
#     RewriteCond %{SERVER_ADDR} !=127.0.0.1
#     RewriteCond %{SERVER_ADDR} !=::1
#     RewriteRule ^ %{ENV:PROTO}://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
# 


File access

Make sure people can’t browse through every directory on your server which can include sensitive data.


# ----------------------------------------------------------------------
# | File access                                                        |
# ----------------------------------------------------------------------

# Block access to directories without a default document.


    Options -Indexes



Compression

All modern browsers support and automatically negotiate GZIP compression for all HTTP requests but it is our job to ensure that the server is properly configured. This snippet makes sure things are compressed when requested.


# ----------------------------------------------------------------------
# | Compression                                                        |
# ----------------------------------------------------------------------



    # Force compression for mangled `Accept-Encoding` request headers
    # https://developer.yahoo.com/blogs/ydn/pushing-beyond-gzipping-25601.html

    
        
            SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
            RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
        
    

    # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

    # Compress all output labeled with one of the following media types.
    #
    # (!) For Apache versions below version 2.3.7 you don't need to
    # enable `mod_filter` and can remove the ``
    # and `` lines as `AddOutputFilterByType` is still in
    # the core directives.
    #
    # https://httpd.apache.org/docs/current/mod/mod_filter.html#addoutputfilterbytype

    
        AddOutputFilterByType DEFLATE "application/atom+xml" \
                                      "application/javascript" \
                                      "application/json" \
                                      "application/ld+json" \
                                      "application/manifest+json" \
                                      "application/rdf+xml" \
                                      "application/rss+xml" \
                                      "application/schema+json" \
                                      "application/vnd.geo+json" \
                                      "application/vnd.ms-fontobject" \
                                      "application/x-font-ttf" \
                                      "application/x-javascript" \
                                      "application/x-web-app-manifest+json" \
                                      "application/xhtml+xml" \
                                      "application/xml" \
                                      "font/eot" \
                                      "font/opentype" \
                                      "image/bmp" \
                                      "image/svg+xml" \
                                      "image/vnd.microsoft.icon" \
                                      "image/x-icon" \
                                      "text/cache-manifest" \
                                      "text/css" \
                                      "text/html" \
                                      "text/javascript" \
                                      "text/plain" \
                                      "text/vcard" \
                                      "text/vnd.rim.location.xloc" \
                                      "text/vtt" \
                                      "text/x-component" \
                                      "text/x-cross-domain-policy" \
                                      "text/xml"

    

    # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

    # Map the following filename extensions to the specified
    # encoding type in order to make Apache serve the file types
    # with the appropriate `Content-Encoding` response header
    # (do note that this will NOT make Apache compress them!).
    #
    # If these files types would be served without an appropriate
    # `Content-Enable` response header, client applications (e.g.:
    # browsers) wouldn't know that they first need to uncompress
    # the response, and thus, wouldn't be able to understand the
    # content.
    #
    # https://httpd.apache.org/docs/current/mod/mod_mime.html#addencoding

    
        AddEncoding gzip              svgz
    




To wrap things up

As I noted above, the snippets I have showcased are just the icing on the cake. The file has so many more and should be read by any developer keen to level up on server configurations.

If you have never tinkered with your .htaccess file before I would highly recommend taking the time. With a few quick customisations you can potentially take your site to the next level.

Want to become a better web developer?

Join over 25,000 other developer & designers who get awesome links to the best news and articles each week delivered directly to their inbox.

5 Comments

  1. Nice!

  2. Great information for web developers….and thanks for the images too.

  3. good article, makes me realise how much I don’t know!

  4. thanks for the htaccess tips!

  5. So What is this HTML5 Boilerplate Apache Server Configs?

This post currently has 5 responses. What do you think?

You can use basic HTML when posting code, please turn all < characters into &lt; or > into &gt;
If the code is multi-line, use <pre><code></code></pre>

Leave a Reply to Robert C. Madigan Cancel reply

Your email address will not be published. Required fields are marked *