This article is not only to help those who are entering front-end development world but also organize what I have in my brain and advance to the next level. The process is obviously not optimal but personal and full of mistakes. However, I think there might be a couple of lessons even in mistakes.
It is essential to get familiar with terminal environment if you decide to become a front-end developer. Most of the configurations for development are under the hood and terminal is the gateway to reach them.
1.1 Update OS X and install Xcode
It is almost mandatory to update OS X and install the latest version of Xcode before moving forward. I cannot list up all the reasons why but it helps prevent potential headaches. I will write this article assuming you are working on OS X Yosemite, the latest version of OS X for now.
After installing Xcode, we need to install Xcode Command Line Tools. It can be installed by running the command below:
$ xcode-select --install
1.2 Install iTerm
Although OS X provides its native Terminal.app, I prefer to use iTerm 2. It has a bunch of convenient and addictive features. I haven't found any other strong alternatives yet.
1.3 Install Homebrew
Homebrew is a package manager for Mac in a nutshell. It installs packages at /usr/local/Cellar and creates alias at /usr/local/bin for easy access. This software is essential to establish a development environment on Mac.
1.4 Install wget (optional)
Before moving forward, I would say wget is not an essential software for development. It is for retrieving files through HTTP or FTP. If you think you don't need it, you can skip this part.
If you decide to install wget, following command will do it:
$ brew install wget
For your information, it is always recommended to run brew update and brew doctor before install or upgrade packages. When upgrading packages, below three commands are used in a row frequently:
$ brew update
$ brew doctor
$ brew upgrade
In addition, -v option can be added for verbose install mode. For instance, brew install -v wget works for verbose install for wget.
1.5 Install the latest version of nano via Homebrew (optional)
I prefer to install the latest version of nano via Homebrew, Mac already has an old version though. It is not my primary editor for coding, however, it is convenient when quick editing in terminal is necessary. To install the latest nano editor, use the following commands:
$ brew tap homebrew/dupes
$ brew install nano
brew tap [tap_name] command is to change the tap in Homebrew. As nano lives in 'homebrew/dupes' repository, it is required to change the tap.
After the installation, the path for nano should point the new one. By default nano command will execute the original nano provided by Mac. The best way to do it is add one line in the .bash_profile located on user root(~/.bash_profile). Editing .bash_profile will be the last job of the old nano editor. To edit the file, use the command below:
$ nano ~/.bash_profile
Now you will be in nano editor mode. Add one line in .bash_profile as below:
alias nano="/usr/local/bin/nano"
control+o to overwrite the file, and control+x to exit nano. To apply changes, restart the terminal or type the command below:
$ source ~/.bash_profile
Alternatively, you can prioritize /usr/local/bin (where the new version resides) over /usr/bin (where the old version resides) by changing the directory orders in /etc/paths. Personally, I prefer to modify .bash_profile.
In addition, it is handy to install the syntax highlighting plugin for nano. Unfortunately, the author stopped maintaining it, but it still works well. NEW LINK for the syntax highlighting plugin. To install it, download and use make install command. More detail information can be found on the plugin link.1
Now we are equipped with basic terminal utilities. So we are good to go for the real dev environment. I remember the first web development environment I established was APM (or AMP) stack—Apache, PHP, and MySQL. Probably it would be the first environment most entry level web developers set up. As we know, Wordpress works on it.
2.1 Set up Apache and PHP
First of all, it is required to create a web root directory. We are going to create a directory named Sites under the user root (expressed as ~) as this is a convention on OS X. You can change it, we will not cover it here though. Here is the command to create the directory:
$ mkdir ~/Sites
After creating ~/Sites directory, we will make a default file we can see when the set up is successfully done. Here is the command to create a default file:
$ echo "<html><body>Hello, world!</body></html>" > ~/Sites/index.html
To test PHP at the end of Apache setup, we need one more file to create as below:
$ echo "<?php echo phpinfo(); ?>" > ~/Sites/phpinfo.php
The next step is to create a user configuration file. To do this, you need to know your current username. Type whoami in terminal, and you will get the username. Replace [USERNAME] to your actual username in the commands below. After getting the username, create a configuration file with the following command:
$ nano /etc/apache2/users/[USERNAME].conf
It will open up the nano editor. Then, fill up inside with the following lines:
<Directory "/Users/[USERNAME]/Sites/">
AddLanguage en .en
LanguagePriority en fr de
ForceLanguagePriority Fallback
Options Indexes MultiViews FollowSymlinks
AllowOverride All
# AllowOverride None
# Order allow,deny
# Allow from localhost
Require all granted
</Directory>
Save and exit (you remember control+o to save/overwrite, and control+x to exit, right?). If you fail to create or save the file due to your access privilege, you might need to do this in a sudo mode as below:
$ sudo nano /etc/apache2/users/[USERNAME].conf
Or you might want to switch to sudo user and create the file with nano:
$ sudo su
$ nano /etc/apache2/users/[USERNAME].conf
Now we just created a user configuration file for Apache. The next step is to modify Apache configuration file to load necessary modules. Open Apache configuration file with the command below2:
$ nano /etc/apache2/httpd.conf
You will see a bunch of lines in the file. We need to uncomment following lines here. The way to uncomment them are to remove the hash (#) letters at the beginning of each line. For instance, below is a commented (inactivated) PHP Apache module:
#LoadModule php5_module libexec/apache2/libphp5.so
Uncommenting the line above will enable PHP on your Apache server. Now remove the hash at the beginning to activate it. It will look like as below:
LoadModule php5_module libexec/apache2/libphp5.so
That line is at line 169 by default on OS X Yosemite. Press control+- and enter the line number to go to that specific line. If the line is not found there, try control+w and type the words/phrases you want to find. It will find them for you. Uncomment two more lines as below to complete the setup (OS X Yosemite only):
Line 166:
LoadModule userdir_module libexec/apache2/mod_userdir.so
Line 493:
Include /private/etc/apache2/extra/httpd-userdir.conf
Save and exit and we are done for this file.
Lastly, we need to modify Apache's directory reference setup (OS X Yosemite only). It is very similar to what we did above. The only difference is we will work on a different file. Open the new setup file with the following command:
$ nano /etc/apache2/extra/httpd-userdir.conf
Uncomment the line 16:
Include /private/etc/apache2/users/*.conf
Save and exit. Again, if you have any privilege issue, use sudo mode.
The real final step is to test if Apache and PHP is working properly. To test Apache and PHP, restart Apache with apachectl -k restart command, and connect http://localhost/~[USERNAME] with your browser. If you see "Hello, world!" message, Apache is working fine. For PHP, connect http://localhost/~[USERNAME]/phpinfo.php. If you see a long table filled with a bunch of parameters, PHP is working fine as well. Now we are finally done with Apache settings!
2.2 Install MySQL via Homebrew
MySQL can be installed easily with Homebrew. Below is the command to install MySQL:
$ brew install mysql
$ mysql_secure_installation
$ mysql.server restart
[1]: I got the information about the syntax highlighting plugin from Jacob Söndergaard.
[2]: Use 'sudo nano /etc/apache2/httpd.conf' or 'sudo su' command if necessary. The way using 'sudo' command is as same as what we did while creating a user configuration file.