For a developer at a beginner stage, it’s a good option to setup a local environment to learn development. Those who are ready to join the web based development stream, hear is a quick guide to setup a local server and running the codes on your local machine before you hit it to the world.
Based on the machine that you are working on, you need to choose the tools / variants of tools.
If you are using Windows OS or Ubuntu or Mac OS, you can opt from multiple Apache-MySQL distributions available in market. Few of them are – XAMPP, WAMP, AMPPS.
I’ll suggest to go for XAMPP when it comes to setting up a local development server. It’s available for use on Windows, Mac, and Linux distribution.
“Why I suggest XAMPP, well it’s not because of any functional difference, it’s because I have been using it since long and I am totally satisfied with its performance”.
Talking about XAMPP : XAMPP is an easy to install Apache distribution containing MariaDB, PHP, and Perl. Just download and start the installer. It’s that easy.
Once you are done with installing any of the above Apache-MySQL distributions, you need to launch it and start the Apache and MySQL services.
Once your Apache and MySQL services are up and running, you are ready to go with the next step.
Depending on the version of your OS, it may happen, that you get errors while launching services. In such cases, you need to either download the latest version of the XAMPP distribution or if you are using the latest one, you need to downgrade to a lower version.
There can be chances of clashes in port numbers with services running on your PC. For eg: Generally, Microsoft Skype port number clashes with Apache. You will need to troubleshoot it by either changing the port number or by removing the application that conflicts.
Once your servers are up and running, you can navigate to your preferred browser and hit the following URL
http://localhost/ – hostname set during the installation of xampp
http://127.0.0.1 – Loopback IP of same server
Once you hit the above URL, you will be taken to the default landing page of XAMPP. Now you can get into the folder structure to put your own code and check if your development server is working or not.
In Windows, if you have installed the XAMPP with default settings, then your public directory will be in C:\xampp\htdocs\
If you are on a Mac Machine, you need to go into Finder -> Applications -> XAMPP -> xamppfiles -> htdocs
In this folder, you can put your files and can access it from the browser using the above URL
Moving forward, to access the local server on other devices, you will need to connect the device to the same network. For example – If your local server is connected to your home WiFi network, you will need to connect another device, say your mobile phone, to the same WiFi network.
Once you are connected with same network on both the devices, go to the command prompt (in windows), terminal (in Linux and Mac), on your local server and hit the below command –
Mac and Linux -> ifconfig
Windows -> ipconfig
You will get the IP address of your local server. Now hit the IP address in you another device browser to access the htdocs folder of your local server.
When you hit the IP address of the local server in another PC’s browser, it searches for the server in your network, and reaches to the local server, and this request is received by the Apache server running in your XAMPP distribution.
Once the Apache server receives the request, it processes it and returns back the response.
This short and simple tutorial can help developers to setup a small local development environment and look forward for better responsive design and optimized coding, and move it to a global platform using either of the available hosting options like shared hosting, or a VPS, or Dedicated Server