Pretty up your localhost. No more 1996 jank.
CSS HTML
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

Windex

Make your localhost look nice with stylized 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

Windex screenshot

Install

Windex uses Apache.

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

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

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

cd ~/projects
cp windex/.htaccess .

Setting up a practical localhost on macOS

I like to use localhost so I can view my projects in ~/projects. 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 ~/projects/masonry/sandbox.

Below are instructions to set that up on macOS. Sorry Windows users, you're on your own here. 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 169: Enable mod_rewrite. This enables .htaccess files to rewrite URLs.

LoadModule rewrite_module libexec/apache2/mod_rewrite.so

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

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

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

    Options FollowSymLinks Multiviews Indexes

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

    AllowOverride All

That block should look like:

DocumentRoot "/Users/username/projects"
<Directory "/Users/username/projects">
    # 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>

In Terminal, start or restart apachectl.

sudo apachectl restart

View http://localhost in a browser. You'll should see the index page for ~/projects. 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

License

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


Made by David DeSandro