014 Local Web Servers

21 Sep 2012

We often want to test and develop our applications locally. Here we will learn how to setup local web servers with some simple configurations in 3 ways - (1) built-in MAC Apache (2) MAMP with Wordpress installation (3) Nginx.

Download video: mp4

##Tools used for Local Web Servers:

  1. Web Servers: Apache or Nginx
  2. MAMP, WAMP for XAMPP

##Steps to setup local web servers

####1. Setup the MAC OSX’s built-in Apache Web Server

  1. Check apache installation in MAC with the command line apachectl -V and locate apache program file path with which apachectl
  2. Edit the host file located at /private/etc/hosts with the line 127.0.0.1 dev.yourdomainname
  3. Edit the virtual hosts configuration file located at /private/etc/apache2/extra/httpd-vhosts.conf with the code [amend the file path accordingly]:
<VirtualHost *:80>
  ServerName dev.yourdomainname
  DocumentRoot "/Users/username/Sites/path/to/project"
  <Directory /Users/username/Sites/path/to/project>
    AllowOverride All
    Order allow,deny
    Allow from all
  </Directory>
</VirtualHost>
  1. Ensure line Include /private/etc/apache2/extra/httpd-vhosts.conf is uncommented in the file /private/etc/apache2/httpd.conf
  2. Start MAC’s built-in Apache web server in either of the 2 ways:
    1. In terminal, put in the command sudo apachectl start, OR
    2. System Preferences > Sharing > Web Sharing > Check
  3. Visit the local website on the browser
  4. Stop apache servers with sudo apachectl stop or restart with sudo apachectl restart

####2. Setup the MAMP and install Wordpress locally

  1. Download MAMP
  2. Edit the host file located at /private/etc/hosts with the line 127.0.0.1 dev.yourdomainname
  3. Edit the virtual hosts configuration file located at /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf with the code [amend the file path accordingly]:
<VirtualHost *:80>
  ServerName dev.yourdomainname
  DocumentRoot "/Users/username/Sites/path/to/project"
  <Directory /Users/username/Sites/path/to/project>
    AllowOverride All
    Order allow,deny
    Allow from all
  </Directory>
</VirtualHost>
  1. Ensure line to include httpd-vhosts.confis uncommented in the file /Applications/MAMP/conf/apache/httpd.conf
  2. Start MAMP Servers
  3. Download Wordpress in the project folder
  4. Go to localhost/phpMyAdmin/ and create a Database
  5. Edit wp-config.php file with the following lines:
define('DB_NAME', 'wordpress_yourDBname');
define('DB_USER', 'root');
define('DB_PASSWORD', 'root');
define('DB_HOST', 'localhost');
  1. Visit the local webpage on the browser and follow the instructions for the wordpress setup locally
  2. Stop MAMP servers form the MAMP Interface

####3. Setup the Nginx

  1. Check that nginx has been install with the command line in Terminal: nginx -v and locate apache program file path with which nginx
  2. Edit the host file located at /private/etc/hosts with the line 127.0.0.1 dev.yourdomainname
  3. Edit the nginx configuration file located at /opt/local/etc/nginx/nginx.conf (or another location depending on the installation) with the following code inside the http code block:
server {
        listen          80;
        server_name     dev.yourdomain;
        root            /Users/username/Sites/path/to/project;
        index           index.html;
        expires         epoch;
    }
  1. Start ngingx servers with the command line in Terminal: sudo nginx
  2. Stop nginx servers with sudo nginx -s stop

##More Resources on Web Servers

  1. What is a web server?
  2. Common web servers include: Apache, Nginx, IIS, Google Web Server, Lighttpd, simpleHTTPserver
  3. For Apache:
    1. Documentation
    2. Examples of vhost configuration files
    3. Setup MAC Mountain Lion’s built in Apache, PHP
  4. Show your localhost to the world: Localtunnel

##Build Link of this Episode

Cooper Press Email newsletters for software developers by Peter Cooper [@peterc]