When it comes to web development, setting up a local web development environment is an absolute must. It allows you to develop your website or application in a safe environment for testing before your code is ever near a live server.
There are numerous ways to do this, but today we’re going to look at how to set up a very basic local web development environment using MAMP PRO.
Note: For the purposes of this tutorial we will be using a Mac.
Before you start: Download MAMP PRO
Download MAMP PRO from their downloads page. It’s a paid for piece of software but a 14 day trial is available for you to try it out before you decide to buy.
Note: There is a free version on MAMP PRO (named MAMP) however this has limited features and only allows you to create 1 server environment at a time.
1. Open MAMP PRO and create a new host
- Click the ‘+’ button on the bottom left hand side of the hosts window to create a new host.
2. Configure the new host details
- Enter your host name in the input field provided. This name will be the URL you access your website through on your local machine. It’s often a good idea to prepend your URL’s with .local for clarity, rather than standard suffixes such as .com.
- Click the folder icon and select the root folder for this new host. This will be the root folder for your website files.
- Click the Create button
3. Start the servers
- Click your new host name and ensure it’s highlighted and selected.
- Click the power icon on the top right hand side of the window to start up the local servers.
4. Check the servers are on and navigate to your new host
- Check that the server icon has turned green. This indicates that the servers are running with no errors.
- Click the arrow icon to open your new host in your default browser. This will open a webpage using the URL you supplied in step 2.
5. Confirm your host is working in your browser
If everything has gone successfully you should be able to see a success message from MAMP PRO indicating that the virtual host was set up successfully. You’ll also notice that it uses the URL you entered in step 2. Whilst the servers are running you will be able to access this URL from any browser on your machine.
6. Add your own website files
Add the following HTML code to a file name index.php within the root folder you created or selected in step 2.
<title>My local web development environment</title>
<h1>My local web development environment works!</h1>
Save this file and head back to the browser and hit refresh. You should now see something similar to the below.
And that’s it!
You now have MAMP PRO running a local development environment for you.
MAMP PRO has lots more features which we will be discussing in future posts.
Don’t miss out on future web development tutorials and make sure you subscribe with along with the rest of our community using the form below.