Say Hi

Don’t be too formal, say hi - I’ll get back to you within 24h.







How to set up Dev Environment on a Mac

Published on: Modified on:

Why set up a development environment?

When doing any development related work, it is best to do it in a way that improves your workflow and productivity. I cannot stress enough how important is to get a new project up and running as fast as possible with minimal effort. Development environment can be local or remote. We’re going to focus on local environment, however, if you wish to use a remote environment you can check out Cloud9.

Configuring local environment is beneficial for several reasons:

  • You can build anything without relying on a remote server. This generally speeds up the process in terms of dependency injection, preview, navigation through project files, etc.
  • You can perform tests in a variety of configurations.
  • You don’t rely on any third-party software and its configuration.

What are we going to cover?

  • iTerm2: replacement for Terminal and the successor to iTerm. It works on Macs with macOS 10.8 or newer. iTerm2 brings the terminal into the modern age with features you never knew you always wanted.
  • Oh My Zsh: an open source, community-driven framework for managing your ZSH configuration. It comes bundled with a ton of helpful functions, helpers, plugins, themes, and a few things that make you shout Oh My ZSH!
  • Sublime Text 3: a sophisticated text editor for code, markup and prose. You’ll love the slick user interface, extraordinary features and amazing performance.
  • Node.js: – a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js’ package ecosystem, npm, is the largest ecosystem of open source libraries in the world.
  • PHP and MariaDB: PHP is a popular general-purpose scripting language that is especially suited to web development. MariaDB is one of the most popular database servers. Made by the original developers of MySQL.
  • Homebrew: The missing package manager for macOS.
  • Composer: Dependency Manager for PHP.
  • Git: a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
  • WP-CLI: a set of command-line tools for managing WordPress installations. You can update plugins, configure multisite installs and much more, without using a web browser.
  • Laravel Valet: Valet is a Laravel development environment for Mac minimalists. No Vagrant, no /etc/hosts file. You can even share your sites publicly using local tunnels.
  • Sequel Pro: a fast, easy-to-use Mac database management application for working with MySQL databases.

Getting started

I’m using a MacBook Pro Mid-2012 with macOS Sierra (10.12.2), make sure you update your mac before proceeding.

First order of business is installing the iTerm2. Download it and install it as you would any app, and then open it. From here, we’re going to install Oh My Zsh. Go to Oh My Zsh Github page and copy the curl command, paste it into iTerm2 and press enter. If you don’t have Xcode installed, you will get an error in iTerm saying git clone of oh-my-zsh repo failed. Also, you will get a window to install Xcode: click install, agree to the Command Line Tools License Agreement. In a few minutes Xcode will be installed, then run the same curl command inside iTerm again.

TIP: You can use UP arrow to bring it up or even enter !! and press enter and it will show up.

After you’re done, we need to set up iTerm. Go to iTerm Preferences:

  1. Inside General tab, you can disable (uncheck) Native full screen windows.
  2. Inside Keys tab, and under Hotkey you can check “Show/hide iTerm2 with a system-wide hotkey” if you wish to use a keyboard shortcut. Then simply press a key on your keyboard, I like to use tilde ( ` ).

One last thing, every time we open up the iTerm we will be seeing “Last Login: …” text at the top. In order to remove it, just run this command:

touch .hushlogin

– if you open up a new tab ( ⌘ + T ) you will no longer see that text at the top.

Now, download Sublime Text 3 and install it. When you’re done, let’s install Package Control for it. With ST3 open go to Tools and click on the Install package control. This is a nice plugin that will help us manage our ST3 plugins and themes. By pressing ( ⌘ + ⇧ + P ) and typing install and selecting Package Control: Install Package we can type to install new plugins/themes.

Install Material Theme by Mattia Astorino and then activate it by going to Preferences > Material Theme > Activate.

Now, hit ( ⌘ + , ) and it will show you default ST3 settings on the left as well as your own settings on the right. You can add these settings on the right:

"line_padding_top": 10 // Used for bigger top padding.
“line_padding_bottom”: 10 // Used for bigger bottom padding.
"word_wrap": true // Wrap all words, removes horizontal scroll.
"trim_trailing_white_space_on_save": true // Trim trailing white space on save.
"font_size": 12 // Increase font size.
"scroll_past_end": true // enable scrolling past end.

Ok, so we have a nice theme, a way to install plugins and themes easily and some default settings, let’s install some plugins:

Next up is Node.js, grab the latest recommended release and install it. If we open iTerm and type in node -v and npm -v it will show us the latest versions we have of Node and NPM.
Let’s install Homebrew by using the command found just under the Install Homebrew section over here.

Now we can use homebrew to install latest version of php. If you enter php -v inside the iTerm you will get the version your mac is using. In my case it’s 5.6.27 – which is pretty old.

Type in brew search php7 and look for the newest one, this is the one we need: homebrew/php/php71.

We can type in brew install homebrew/php/php71 to install PHP 7.1 – when it’s done if you type in php -v it will still show the old version. Make sure you open a new tab inside iTerm (or restart it) and then type php -v, it will show the latest version.

Using Homebrew we can also install MariaDB by typing brew install mariadb – and when we are done, we can type brew services start mariadb in order to start it on login.

Now, every PHP developer uses Composer, so let’s get it. Go to Composer website and copy all the lines found at the beginning into iTerm. After Composer is installed we need to do some work.

In order to use Composer we need to type php composer.phar – that’s too much work, why not type composer only. When we installed composer, before “Use it” part there was a line saying something like this:

Composer (version 1.3.1) successfully installed to: /Users/username/composer.phar

Let’s move that to our bin with this command:

mv /Users/username/composer.phar /usr/local/bin/composer

Make sure that “username” is your actual username.

Now, if we run composer it should work but if we were to pull any packages with composer and then try to use them it wouldn’t work.

Go ahead and type this command in iTerm: vim ~/.zshrc.

Now, press letter I on your keyboard and then at the top edit the second line to be like this:

export PATH=$HOME/bin:/usr/local/bin:~/.composer/vendor/bin:$PATH

That’s done, but while we’re in that file, scroll to the bottom and add this line: source ~/.aliases as well as uncomment our alias zshconfig and instead mate use vim.

It should look something like this:

alias zshconfig="vim ~/.zshrc"
# alias ohmyzsh="mate ~/.oh-my-zsh"
source ~/.aliases

Now, press ESC and type :wq and press Enter. If we ever need to open zshconfig we don’t need to use vim ~/.zshrc command but rather zshconfig.

We sourced that .aliases file, however we still need to create it. Just type in: vim ~/.aliases and press enter, after that type in :wq and press enter.

Wouldn’t it be good to open up those configuration files with Sublime Text 3 instead of vim? Let’s do just that by typing this into iTerm:

ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" /usr/local/bin/sublime

– now, whenever we need to open up any file we can just say sublime and name of the file. Like this: sublime ~/.aliases.

macOS comes preinstalled with Git, however, it’s using an older version, let’s update it with brew install git.

In order to install WP-CLI, there’s nothing special, just follow the commands found here.

Now we’ll be downloading Laravel Valet. You can use this command: composer global require laravel/valet – which is going to install Laravel Valet globally. After that’s done, you should enter this command: run valet install – which will install valet.

When it’s done, let’s ping any domain: ping foo.dev – and if you have settled it up properly you will see it return some bits from localhost.

Now, let’s make a directory in our home folder where we will store our projects. We can use this command mkdir ~/code, we can open that folder by typing cd ~/code.

Let’s also setup an alias for that in our aliases file. Type in sublime ~/.aliases. Add alias code="cd ~/code" and now when you save the file and open a new tab in iTerm and type code, it will go to code directory.

Open up the code directory and run valet park, which will specify that this code directory is our code root for any project.

Here are some aliases that I use often:


# Open our code folder.
alias code="cd ~/code"
# Open our BitBucket folder.
alias bb="cd ~/BitBucket"
# Open this file.
alias aliases="sublime ~/.aliases"

# Show/Hide Hidden Files
alias showFiles='defaults write com.apple.finder AppleShowAllFiles YES; killall Finder /System/Library/CoreServices/Finder.app'
alias hideFiles='defaults write com.apple.finder AppleShowAllFiles NO; killall Finder /System/Library/CoreServices/Finder.app'

# Git Commands
alias gs="git status"
alias ga="git add ."
alias gc="git commit -m "
alias gps="git push origin master"
alias gpsb="git push origin "
alias gp="git pull --all"
alias gb="git branch "
alias gck="git checkout "
alias gm="git merge "
alias gdb="git branch -d "
# Remove DS_Store from repo.
alias rdss="find . -name .DS_Store -print0 | xargs -0 git rm -f --ignore-unmatch"

# WP-CLI Commands
alias wpcd="wp core download --path="
alias wpcc="wp core config "
alias wpdbc="wp db create"
alias wpci="wp core install "

# MariaDB
alias mdb="mysql --user=root --password="

Now, let’s install Sequel Pro. When we open it, we can say Socket, in username add root and then click Connect. We can also then go to File > Add to favorites.

If we close SequelPro and open it, we’ll see our localhost is there so we can quickly connect.

Conclusion

That’s all folks, now you’re fully setup to do whatever you need. It’s easy, it doesn’t require any after market software such as MAMP, you have all the latest and greatest features and coding can begging.