Web Development Environments and Local Hosting

devenv

When developing websites and web maps, there are two main locations you are going to be working in. The first is your web server. Your web server is the computer that is broadcasting, or 'serving', your web page and it's content to the internet. This is also known as the 'production server', your web host, or your remote host. On your production server, you have your working website that is accessible to all on the internet.

The second is your local machine, such as your laptop or desktop computer. You will rarely want to actively edit files that are on your web server, so it is recommended that you do this on your own machine, without broadcasting all of your changes to the internet. This is commonly called your 'development server', or your localhost. However, there is a problem, your personal computer is not a server. If we want to develop and test run our sites, we have run a web server locally on our machine, visible only to us.

Set up a Development Server: Use localhost

The solution to this problem is to set up a server-like instance on your own computer that mimics the capabilities of your web server and allows for processing requests via HTTP. This 'development server' can be on your local machine, and visible to only you. One of the main reasons for doing this is it will allow the ability to load external data and resources, such as a file you want to load from another location on the web, or a dataset from another location on your server, into your application on demand. This is called AJAX, or asynchronous JavaScript and XML. A page that loads all at once is synchronous, meaning it reads through the your website documents and loads everything in order. Asynchronous loading is required when you don't want to load an external file immediately on opening the site, but rather wait until the user or another process on the site tells file to load.

Web Servers are complicated, and a full explanation of how they work is beyond the scope of this tutorial, but creating a localhost server on our computer that mimics the capabilities of a web server can be quite easy, and can be very important for testing and development.

There are a handful of good options for setting up servers on which you can develop and build sites locally before pushing them live to the web. This tutorial will look at two options, a very simple solution using Python that allows for static HTML sites, and using XAMPP, a nice local development environment software that supports Apache, MySQL, PHP, and Perl.
  • Use the Simple Python HTTP Server (for Static HTML sites, does not support any dependencies)
    • Python will mimic what your Athena WWW folder can serve.
  • Use XAMPP Server (development server software used for static HTML sites and sites that require local access to PHP and MySQL)
    • XAMPP will mimic what MIT Scripts or a commercial hosting provider can serve.

Option 1: Use the Python localhost Server

Python will mimic what your Athena WWW folder can serve.

If you need a quick web server that can process HTTP requests but don't want to install XAMPP or another software, then Python can help. Python comes with a simple built in HTTP server that can run static webpages. With the help of this little HTTP server you can turn any directory in your system into your web server directory. The only thing you need to have installed is Python.


1. Check and see if Python is installed on your machine

Open a command line to see if Python is installed.

  • On Windows, search Command Prompt, then when the window opens, type python –V. Hit enter.
  • On Mac, open the Terminal, then type python –V. Hit enter.

Command Prompt (Windows) and Terminal (Mac) are both commonly referred to synonymously, interchangeably, or simply as “the command line”. It is the way you can access your machine by typing commands to tell it what to do.

Your command line will either return a Python version, or say Python is not recognized. If it returns a version, you have Python installed, if it is not recognized, you need to install Python. In the following screenshot, you can see I have Python Version 2.7.5 installed on my machine.

cmd

To install Python, use the following guides.

Once installed, check the version again to make sure it is working.


2. Run a Python Command in your Web Folder to start your local server

With Python working and installed, running a simple local server is now the matter of navigating to the location of our web folder, then running a single line command that will start our local server in this folder. In the following instructions, assume that I would like to share the directory /documents/mywebsite and my IP address is 192.168.1.2.

Open up command line (Terminal on Mac, Command Prompt on Windows). The cd command changes our directory. Type cd followed by the path to our local web folder.

$ cd /documents/mywebsite

To see the listing of files your current location, once you have changed your directory, type dir on Windows, or ls on Mac.

Once in your website folder, type the following command

$ python -m SimpleHTTPServer

That's it! Now your http server will start in port 8000. You will get the message:

$ cd /document/mywebsite
$ python -m SimpleHTTPServer
Serving HTTP on 0.0.0.0 port 8000 ...

This can now run in the background, you don't need to do anything else.

3. Open your localhost web site in a browser

Now open a browser and type the following address:
http://localhost:8000

You can also access it via:
http://192.168.1.2:8000 or
http://127.0.0.1:8000

If the directory has a file named index.html, that file will be served as the initial file. If there is no index.html, then the files in the directory will be listed.

If you wish to change the port that's used, start your Python SimpleHTTPServer using the following command:
$ python -m SimpleHTTPServer 8080

Now open a browser and access your site at:
http://localhost:8080

Modify and change folders in web folder, save and then refresh your page. Your page will appear as it would if it were live on the internet.

4. Stopping your Python SimpleHTTPServer

When done working on your web site, stop your server using CTRL-C (Mac/Windows). This will end the local server instance.


Option 2: Use XAMPP Local Server Software

XAMPP will mimic what MIT Scripts or a commercial hosting provider can serve.

The Python SimpleHTTPServer is a quick and easy solution for getting a localhost server running that you can use locally develop your page before pushing it to production. It will work for basic static website purposes. If you need more advanced options, such as the ability to interface with MySQL or PHP, I suggest using XAMPP.

1. Download and Install XAMPP

XAMPP can be downloaded and installed on Mac/Windows/Linux. Download the version for your operating system from the XAMPP Homepage. XAMPP Homepage and Downloads Download to your machine, and install using the install wizards.

2. Test your Install

Once the wizard has run, you will have a local server instance you can use to develop your website on your local machine. On Windows:
  1. Once XAMPP is installed, open it and view the Control Panel.
  2. Start Apache by clicking on the Start option of the Apache service
  3. Click Explorer to see the file structure of your localhost server.
  4. Click on the htdocs folder. Our HTML and PHP documents will be located here.
  5. Create a new folder in htdocs, call it my-site
  6. Put your website content in the my-site folder.
  7. Navigate in your web browser to http://localhost/my-site to see your site.
On Mac:
  1. Once XAMPP is installed, open it and click on the "Manage Servers" tab.
  2. Click start on the Apache Server option.
  3. In Finder, go to the XAMPP folder in Applications and open the htdocs folder.
  4. In htdocs, create a new folder named my-site.
  5. Place your website documents and site materials into the my-site folder.
  6. Navigate in your web browser to http://localhost/my-site to see your site.
Wanting to use PostgreSQL instead of MySQL? The following tutorial describes how to do this on Windows. XAMPP with PostgreSQL on Windows

Other Options for localhost servers

Other options, more specific for Mac or Windows exist.

Happy Web Developing!


Go Back to DUSPviz Tutorials Page