Localhost tutorial

How to Setup a Localhost

Brief description

In Web Development, a localhost is a local server environment in which we can test and use server side scripts on our computer. We can set-up our localhost environment with an Apache server application, MySQL and PHP.

XAMPP

If you are a Windows or Linux user, you can download and install XAMPP from Apache Friends. You can also use XAMPP on Mac!

MAMP

If you are using a Mac, I recommend installing MAMP – Mac Apache MySQL and PHP (there is a free version available and is absolutely fine for our intents and purposes).

Once we have our installation set up we can start to set-up our localhost environment.

Overview

Today, I will be running through a default MAMP set-up.

Windows and Linux users; you should be able to follow along with the MAMP tutorial, your ‘htdocs’ directory should be located in the XAMPP Application directory. Depending on your System Configuration, your localhost URL should be http://localhost. You would also be using the XAMPP control panel.

Stepping into MAMP

We have our MAMP folder located in ‘/Applications/MAMP/’, this is where the good stuff is. Navigate to the MAMP folder and launch ‘MAMP.app’ (don’t worry about MAMP pro).

As you can see, its a fairly basic, easy to navigate application. On the left we have our server status- Apache and MySQL, these should currently be red, as we have not ‘started our servers’.

If you are using XAMPP, you should see the Apache web server and MySQL servers under the ‘Manage Servers’ Application tab.

Starting Our servers

So, let’s start up those local servers!

We can do this by clicking on ‘Start Servers’.

If you are using XAMPP, you can select ‘Apache Web Server’ and click the ‘Start’ button.

Once the servers have loaded (lights turn green), our MAMP home page should load.

Notice the URL; http://localhost:8888/MAMP/

Note: If you are using XAMPP, the localhost url should just be http://localhost.

Our MAMP local server, by default uses port 8888 for Apache and port 8889 for MySQL (for the purposes of this tutorial, we won’t be talking about MySQL server ports).

Root Web directory

So, basically http://localhost:8888 is saying, “http to localhost via port 8888”. http://localhost:8888 ‘points’ to our ‘root web directory’. So now that we have seen our MAMP homepage and we can see that our servers are running- let’s locate our root web directory!

Let’s go back and open up our MAMP folder ‘/applications/MAMP/’ and take a bit more of a look inside.

So, we have our MAMP applications and a little folder titled ‘htdocs’. This ‘htdocs’ folder is magic; this is the root web directory. Any files (.html, .PHP, .css, .txt, .xml) that are placed in our ‘htdocs’ or root web directory will then be accessible via the localhost URL i.e. http://localhost:8888/script.php.

Adding Content

Let’s create a new HTML file with the basic HTML5 structure, add some content and save the file as ‘home.html’.

Now, let’s place our ‘home.html’ file inside our root web directory of our localhost server ‘/Applications/MAMP/htdocs/’ and load up http://localhost:8888 in your browser.

If you are using XAMPP, your htdocs folder will be located in the XAMPP directory. You would then use the http://localhost URL.

You should now see ‘home.html’ listed in your directory contents. Click on “home.html” and your HTML page will load. You should now have an understanding of the root web directory and its relation to our localhost.

Info

Open up your text editor, create a new php file and add the following to its contents and save it as ‘info.php’. Place this file inside your ‘htdocs’ directory.

Now, let’s load up http://localhost:8888/info.php (or http://localhost/info.php – depending on the application you are using) in our browser and you will see everything you need to know about your PHP configuration.

When using an application such as MAMP or XAMPP, once installed they will install an Apache Web Server, a MySQL Server and a PHP installation on your system.

Documentation

Check out the official pages for MAMP and XAMPP, for additional instructions and download links.

I hope you found this resource useful!

Published by

Ashley Menhennett

Ashley is a web designer + developer, programmer and technical author from Australia.Ashley holds certification in IT + Web Based Technologies and specializes in modern mobile and responsive web design, working with bleeding-edge web based technologies—including HTML5 and CSS3.

Share this article

  • steve

    It seems that Brackets allows you to bypass this setup (though knowing this info is good). Brackets can load what you are working on in a sandboxed server. I have tested it with the demo’s that come with Quintus and they all seemed to work fine. You can get Brackets for free at brackets.io believe it or not, Adobe made this! Forgot to mention, Brackets is cross platform, mac, win, and linux!

  • Eliud Njuguna

    Thats An Amaizing Tutorial

  • Thanks!

  • Yes absolutely! Brackets is a great tool and if you just want the web server to run a Quintus or a Phaser game, Brackets will do.