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.

Download or clone this project to the root folder: ~/dev/windex
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.

Open System Preferences. Select Sharing.
Change Computer name to something rad, like thunderclaw, if you haven't already.
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

dwichers/windex

ErrorLooks like something went wrong!

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages