Categories

Tag: Windows

There are plenty of tutorials for WAMP installations (Windows, Apache, MySQL, and PHP), but I don’t know of any that have quick, easy-to-follow directions for someone familiar with Web development, but not necessarily with getting a local installation started.

UPDATE: The following instructions are no longer up to date. To install a WAMP server, try using XAMPP.

Installing Apache

The latest version of Apache can be found at http://httpd.apache.org/download.cgi. Unfortunately, the Windows version is not always up to date with the Unix version, so you’ll have to scroll down the page until you find the most recent Win32 version. You should notice a few download options for Win32 (“source” or “binary” and “without crypto” or “including OpenSSL”). Unless you plan on using SSL, download the binary version without crypto (it’ll be an MSI file).

After the download completes, open the file and run it. Click “Next”, accept the terms and conditions, and continue through any other screens until you’re asked for some server information. Enter localhost for both the network domain and server name fields, and use whatever e-mail address you like for the administrator’s e-mail field.

If you want Apache to run, even when you’re not logged in, leave it set to run as a service. However, if you’ll only be using it with an occasional project, change it so that it has to be manually started. The “typical” installation should be fine, as well as the default destination folder. After installation completes, click “Finish.”

To start Apache (assuming it isn’t running as a service), you can navigate to the “bin” folder (found at “C:\Program Files\Apache Software Foundation\Apache2.2\bin” in most cases) and run the “httpd.exe” application. Personally, I run it from the command line. To do this, open a command prompt, and update your PATH environment variable (e.g. SETX PATH "%PATH%;C:\Program Files\Apache Software Foundation\Apache2.2\bin"). Close the command prompt, reopen it, and now you should be able to launch Apache by simply typing httpd.

To make sure everything is working, visit http://localhost/, and you should see a blank page with the words, “It works!” If not, try http://localhost:8080/ — 8080 is a common port used if the standard port 80 is unavailable. The Web page being displayed is found in the “htdocs” folder of your Apache install.

Installing PHP

Visit http://www.php.net/downloads.php and download the Windows binaries and source (Thread Safe, ZIP format) of the latest version. Extract the ZIP files to a “PHP” folder in your “Program Files” directory (e.g. “C:\Program Files\PHP” — you’ll need to create the “PHP” folder). After extracting the files, make a copy of the php.ini-development file and rename it to php.ini.

Now, we need to make some configuration changes for Apache to recognize PHP. Open the “httpd.conf” file in the “conf” folder of your Apache installation, and search for a list of lines starting with “LoadModule”. After those lines, add the following:

LoadModule php5_module "C:/Program Files/PHP/php5apache2_2.dll"

Next, look for the <IfModule mime_module> section of httpd.conf and add the following just before it’s closing </IfModule> tag:

AddType application/x-httpd-php .php

Finally, add the following to the very end of your httpd.conf file:

PHPIniDir "C:/Program Files/PHP"

To verify that PHP is working, create an index.php file in the htdocs folder, and add the following to it:

Installing MySQL

First, download the MySQL Community Server MSI file from http://dev.mysql.com/downloads/mysql/. The installer is fairly simple — choose “Typical” when prompted for the setup type, and it should complete shortly afterward. Check the box to run the configuration wizard after the install. The default settings should suffice for most of the screens, but you’ll need to choose a memorable root password before finishing.

As for MySQL, that’s it. No additional setup needed. Create a database and start programming — you’re local dev machine is ready to go!

Conclusion

Hopefully, you now have a working WAMP installation. I purposely left out a lot of configuration options, as the purpose of this guide was to get you up and running as fast as possible. If you notice any mistakes or have any issues, feel free to post them in the comments below.

If you’re reading this post, I will assume that you are already familiar with Sass. If not, it’s a CSS pre-processor, which adds support for variables, selector nesting, and other features to your CSS styles. See the Sass website for more information.

Here’s how I use Sass with my development process. There are many ways of integrating it into your workflow, so feel free to play around when you’re more comfortable. Your first step is to install Ruby.

Installing Ruby

Visit the Ruby Installer website to get the latest installer for Windows, and go ahead and complete the installation. When it asks about adding Ruby executables to your PATH, check the box. Otherwise, you will need to type the full directory path to execute the Ruby program. It’s also a good idea to associate .rb and .rbw files with Ruby. The installation should complete without the need for any other input.

Installing the Sass Ruby Gem

Now that Ruby is installed, it’s time to install Sass. Sass is packaged as a Ruby “gem,” and gems are basically programs that rely on Ruby to run. We’ll be using Sass from the command line, so open a command prompt (Windows key + R, then type cmd and press OK). Let’s make sure that Ruby was installed correctly by typing ruby -v and pressing Enter. If the version number that you installed appears, then you’re good to go.

To install Sass, type gem install sass and press Enter. Hopefully, everything went well, and now it’s time to start using it.

Sass Workflow

The two major workflows that I’m aware of are:

Using Sass locally for development and deploying CSS to the production server

Deploying Sass to the server and relying on server code to translate it into CSS before serving it up to website visitors

Obviously, the second process is a bit more complex, so we’ll focus on the first — but feel free to investigate further if the other workflow is more appealing to you.

I create two directories in my Web projects: one called “scss” for my .scss (Sass) files and one called “css” for my final, minified CSS files. To make the translation from Sass to CSS simple, we’ll use the --watch modifier in the Sass command line tool to automatically handle the translation any time we save our Sass files. Assuming you’ve created these directories and started your own .scss file in the “scss” folder, you’ll need to open your command prompt and change to your project directory (e.g. cd C:\Users\username\websites).

Next, enter the following command:

sass --watch scss:css

It should respond by saying, “Sass is watching for changes.” Go ahead and make some updates to your Sass file, save them, and check your “css” folder to see how Sass is automatically translating your Sass code into CSS. When you’re done, hit Ctrl+C in the command prompt and enter “y” when it asks to terminate the batch job to stop Sass from watching for changes.

One more thing: your CSS code should really be minified/compressed before deploying to the server. You can do this with the --style modifier. So instead of the earlier command you entered, use the following:

sass --watch scss:css --style compressed

There are many other things you can do with the Sass command line tool, but this is a good starting point, and should be just enough to start using Sass in your own workflow.