Windex

Make your localhost look nice with styled directory index pages. No more 1996 jank.

Features include:

• SVG icons, sized pixel-perfect for 24x24 & multiples thereof
• View HTML files without extensions: project/page.html at project/page
• Nice mobile view with big tap targets

View Windex demo on CodePen

Install

Windex uses Apache.

Let's say your root folder used for localhost is ~/dev.

1. Download or clone this project to the root folder: ~/dev/windex
2. Move .htaccess to the root folder: ~/dev/.htaccess

.htaccess is a hidden file. You can copy it to its location in Terminal via the command line:

cd ~/dev
cp windex/.htaccess .

Setting up a practical localhost on macOS

I like to use localhost so I can view my projects in ~/dev. This allows me to create static sites that I can easily view in the browser, without having to start up a server. For example, going to localhost/masonry/sandbox allows me to see ~/dev/masonry/sandbox.

Below are instructions to set that up on macOS. This will make a single user's folder viewable for all users. For separate users folders like localhost/~username, view these instructions.

Open /etc/apache2/httpd.conf in your text editor. Making changes to this file will require administrator access. Change the following lines (line numbers may vary in your file):

Line 186: Enable mod_rewrite. This enables .htaccess files to rewrite URLs.

LoadModule rewrite_module libexec/apache2/mod_rewrite.so

Lines 255-256: Change DocumentRoot and subsequent Directory to your desired directory. This sets localhost to point to the directory.

DocumentRoot "/Users/username/dev"
<Directory "/Users/username/dev">

Line 269: Within this <Directory> block, add Indexes to Options. This enables file index view.

    Options FollowSymLinks Multiviews Indexes

Line 277: Change AllowOverride value to All. This enables .htaccess files.

    AllowOverride All

That block should look like:

DocumentRoot "/Users/username/dev"
<Directory "/Users/username/dev">
    # Possible values for the Options directive...
    Options FollowSymLinks Multiviews Indexes
    MultiviewsMatch Any

    # AllowOverride controls what directives...
    AllowOverride All

    # Controls who can get stuff from this server.
    Require all granted
</Directory>

Save changes to httpd.conf. This may require macOS user approval.

In Terminal, start or restart apachectl.

sudo apachectl restart

View http://localhost in a browser. You'll should see the index page for ~/dev. Without Windex, it's ugly, but it works. With Windex, it's pretty.

If you messed up httpd.conf, you can replace it with its original at /etc/apache2/original/httpd.conf.

Viewing on other devices on macOS

You can view this localhost on another device like a phone.

1. Open System Preferences. Select Sharing.
2. Change Computer name to something rad, like thunderclaw, if you haven't already.
3. Enable File sharing.

Now, you can view http://thunderclaw.local on another device if you are on the same Wi-Fi.

Alternatives

• jessfraz/directory-theme, which was based off of
• Apaxy, which owes its existence to
• h5ai
• Indices, which Windex was originally based off of

License

Windex is released under the MIT license. Have at it.

Made by David DeSandro