Front End Development with Apache

The Apache web server is the single most popular web server on the planet, serving more than half of all website across all domains. Think about that for a minute. Impressive.

Not only is Apache good for serving the world, it’s also good for serving your html files in your personal development environment. Let’s set up Apache!

Installation

This post only deals with Linux, sorry Mac/Windows folks! Many modern Linux distributions come bundled with Apache, but if it is not already installed already, it is easily installable with

sudo apt-get install apache2

When installed, it is also usually set up to run automatically. We can check to see if it’s running with

ps -ef | grep apache2

If we want to control this and actually start or stop it manually, we can cycle Apache with these commands:

/etc/init.d/apache2 start
/etc/init.d/apache2 stop
/etc/init.d/apache2 restart

Serving Content

OK, Apache is up and running. How can we edit html files and have them served locally by Apache?

On the local file system, files are usually served from /var/www/
HTML files and other static content in this location are immediately accessible on port 80 at http://localhost Apache only serves static content, but can forward requests for dynamic content to an application server or servlet container with a reverse proxy.

The big step here is to link our development folder (where all of our html/css/js files are stored and being edited) to the folder where apache can serve them. We can link apache to a development folder like so

sudo ln -s /home/username/path/to/project   /var/www

That’s it!

At this point, a file like /home/username/path/to/project/index.html will be accessible via local web server as http://localhost/index.html. Apache will immediately pick up any changes and immediately serve them with a page refresh.

Happy Front-End-Developing!

Advertisements

Leave a comment

Filed under Uncategorized

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s