How to install Visual Studio Code and MAMP on a Mac

In this lesson you will learn how to install Visual Studio Code and MAMP on a Mac.

WHY VISUAL STUDIO CODE?

Over the years, I have used most code editors across both Windows and Mac environments. Up until recently, I was using CodeAnywhere which is an online editor. However, often slow response times and outages led me to consider an alternative. Visual Studio Code is an extremely popular editor with an extensive array of optional extensions to enhance your coding experience.

Visual Studio Code is easy to use, it’s lightening fast, and supports hundreds of languages.

I mainly use Visual Studio Code for PHP, HTML and CSS. It has great customisation via the extensions although these are not necessary to be able to start coding within minutes of downloading.


WHERE CAN I DOWNLOAD VISUAL STUDIO CODE?

You can download Visual Studio Code from https://code.visualstudio.com/

Once on the main page you can select the correct version for your computer. There are versions for Mac, Windows, and Linux.

Versions of Visual Studio Code are available for Mac, Windows, and Linux

Versions of Visual Studio Code are available for Mac, Windows, and Linux

HOW TO INSTALL VISUAL STUDIO CODE

Installation of Visual Studio Code is simple and follows the standard install process for most Mac programs. Double click the downloaded package to begin the installation process.

The install process should only take less than a minute (depends on your computer’s speed).

It is worth noting that once installed, the program will be located in your Downloads folder (if that is where you downloaded the package). I always move the install to the Applications folder once the install process has completed.

Move Visual Studio Code to your Applications folder

Move Visual Studio Code to your Applications folder

WHAT IS MAMP?

If you are following one of my PHP courses then you will need to install a local server environment if you intend to work on your machine locally rather than connect to an online server environment.


WHAT DOES MAMP STAND FOR?

  • M - macOS (the operating system)

  • A - Apache (the web server)

  • M - MySQL (the database)

  • P - PHP (the coding language)


WHERE CAN I DOWNLOAD MAMP?

MAMP can be downloaded from https://www.mamp.info

Versions are available for both Mac and Windows.

Download and install as with any other Mac program.

Once installed it will appear in your Applications folder.


HOW TO SETUP MAMP ON A MAC

Once you have started MAMP you may find that the servers will not start. If this is the case then you may find it beneficial to restart your computer.

Once restarted, open MAMP and click on the Start icon to start the servers.

mamp-start-servers.png

WHAT IF THE MAMP SERVERS DO NOT START?

If the icon turns green then the servers have successfully started. If the servers do not start then you may need to change the port numbers. This is an easy task.

STEP 1: click on the Preferences icon.

STEP 2: click on the Ports tab. You should see that the default port numbers are 8888 and 8889 as shown below.

mamp-default-ports.png

STEP 3: change the default port numbers to 8000 and 8001 as shown below.

new-port-numbers-mamp.png

STEP 4: you can then try to start the servers again. If the servers start then you should see the green Stop icon as shown below:

green-stop-icon.png

SETTING MAMP PREFERENCES

You may also wish to consider setting some of the other MAMP preferences. In the Preferences popup click on the General tab and select whether you would like to have the servers starts and stop when you open MAMP. You can also select if you want the WebStart page to open.

mamp-preferences.png

WHERE IS MY WEBSITE LOCATED IN MAMP?

By default, your website files are stored in the htdocs folder: Applications > MAMP > htdocs

You can change this by opening the Preferences and selecting the Server tab. You can then choose your preferred location for storing your website files.

website-files-mamp.png

WHAT IS THE MAMP WEBSTART PAGE?

When you open MAMP a WebStart page may open in your browser. You can also click on the WebStart icon to open the WebStart page.

webstart-mamp.png

The WebStart page provides an overview of MAMP.

However, in the main menu of the WebStart page you will see a link to My Website as shown below:

mamp-menu.png

The My Website link will link directly to your htdocs directory (or your chosen default directory). This can be quite handy if you have forgotten where you stored your website files. However, I would suggest that a bookmark in your browser may be a better option.

CODING ACADEMY MEMBERSHIP

Coding Academy members have access to full videos demonstrating the install process for both Visual Studio Code and MAMP.