How to Set up a Localhost – Web Development Tutorial

If you’re at all intent on becoming a web developer, knowing how to set up a localhost is a key skill to making sure your website is prepared for production.

In this tutorial, we’re briefly going to go over how to set up a localhost as quickly as possible so you can work with your site’s server-side functionalities.

If you’re ready to learn new web development skills, let’s get started!

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.

FREE COURSES
Python Blog Image

FINAL DAYS: Unlock coding courses in Unity, Godot, Unreal, Python and more.

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.

<!--?php phpinfo(); ?-->

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 – especially as you might be diving into various other programming languages or even considering job prospects for your web developer career!