/windex

Pretty up your localhost. No more 1996 jank.

Primary LanguageJavaScript

Fork motivation

Added parse-torrent-title package to format file names. Made solely for personal consumption. There's a build step added to "browserify" the package for online consumption.

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

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 185: Enable mod_rewrite. This enables .htaccess files to rewrite URLs.

LoadModule rewrite_module libexec/apache2/mod_rewrite.so

Lines 254-255: 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 268: Within this <Directory> block, add Indexes to Options. This enables file index view.

    Options FollowSymLinks Multiviews Indexes

Line 276: 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>

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 ~/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