If you intend to become a web developer, knowing how to set up local hosting is a key skill in making sure your website is production-ready.
In this tutorial, we’ll briefly go over how set up a local host as quickly as possible so you can work with your site’s server-side functionalities.
If you’re ready to learn some 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, MySQL, and PHP server application.
XAMPP
If you are a Windows or Linux user, you can download and install XAMPP from Apache Amigos. 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 it is absolutely fine). for our intents and purposes).
Once we’ve set up our installation, we can start setting up our localhost environment.
Overview
Today, I’ll run a default MAMP settings.
Windows and Linux users; You should be able to follow the MAMP tutorial, your ‘htdocs’ directory should be located in your XAMPP application directory. Depending on your system configuration, your localhost URL should be http://localhost. You would also be using the XAMPP control panel.
Logging into MAMP
We have our MAMP folder located in ‘/Applications/MAMP/’, this is where the kicker is. Navigate to the MAMP folder and start ‘MAMP.app’ (don’t worry about MAMP pro).
As you can see, it’s a pretty basic application and easy to navigate. On the left we have the status of our server: Apache and MySQL, currently they should be red as we have not “started our servers”.
If you are using XAMPP you should see Apache web server and Servers MySQL in the ‘Manage Servers’ application tab.
Starting our servers
So, let’s start those local servers!
We can do that by clicking under ‘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.
Note the URL; http://localhost:8888/MAMP/
Note: if you are using XAMPP, the localhost URL should be simply http://localhost.
Our local MAMP server, for by default it 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 through port 8888”. http://localhost:8888 ‘points’ to our ‘root web directory’. So now that we’ve seen our MAMP home page and can see that our servers are running, let’s locate our root web directory!
Let’s go back and open our MAMP folder ‘/applications/MAMP/’ and look a little deeper.
So, we have our MAMP applications and a little folder titled ‘htdocs’. This ‘htdocs’ folder is magic; this is the root web directory. Any file (.html, .php, .css, .txt, .xml) that is placed in our root web directory or ‘htdocs’ will be accessible via the localhost URL, i.e. http://localhost: 8888/script.php .
Add 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 http://localhost:8888 in your browser.
If you are using XAMPP, your htdocs folder will be located in the XAMPP directory. It would then use the URL http://localhost.
You should now see ‘home.html’ in your directory content. Click on “home.html” and your HTML page will load. You should now understand the root web directory and its relationship to our local host.
Information
Open your text editor, create a new php file and add the following to its content and save it as ‘info.php’. Place this file inside your ‘htdocs’ directory.