Skip to content

desandro/windex

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

License

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


Made by David DeSandro

About

Pretty up your localhost. No more 1996 jank.

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •