└── readme.md /readme.md: -------------------------------------------------------------------------------- 1 | # Frontend Development Setup on a Mac 2 | 3 | 4 | TODO - 5 | - Update to Yosemite 6 | - homebrew cask 7 | - add developer tools experiment flags on chrome chrome://flags 8 | - look over rbenv https://github.com/sstephenson/rbenv 9 | - enable blackboxing [ manage framework blackboxing on chrome] 10 | - Allow apps downloaded from anywhere system preferences 11 | - brew install zsh 12 | - change NVM to wget https://github.com/creationix/nvm 13 | - 14 | 15 | This document assumes you're running a fresh copy of **OS X Mavericks**. 16 | 17 | If you have any comments or suggestions, feel free to give me a shout [on Twitter](https://twitter.com/ppskeet)! 18 | 19 | - [System update](#system-update) 20 | - [Reset Modifier Keys](#reset-modifier-keys) 21 | - [Homebrew](#homebrew) 22 | - [Homebrew Cask](#homebrew-cask) 23 | - [Maximum Awesome](#maximum-awesome) 24 | - [Google Chrome](#google-chrome) 25 | - [Google Chrome Canary](#google-chrome-canary) 26 | - [Firefox](#firefox) 27 | - [Slate](#https://github.com/jigish/slate) 28 | - [VirtualBox](#virtualbox) 29 | - [Sublime Text](#sublime-text) 30 | - [Ruby & Rbenv](#ruby) 31 | - [Git](#git) 32 | - [Sublime Text](#sublime-text) 33 | - [Vim](#vim) 34 | - [Node.js](#nodejs) 35 | - [Yeoman](#yeoman) 36 | - [Bower](#bower) 37 | - [Grunt](#grunt) 38 | - [Heroku](#heroku) 39 | - [MongoDB](#mongodb) 40 | - [Projects folder](#projects-folder) 41 | - [Apps](#apps) 42 | 43 | ## System update 44 | 45 | First thing you need to do, on any OS actually, is update the system! For that: **Apple Icon > Software Update** 46 | 47 | ## Reset Modifier Keys 48 | 49 | Replace your Control Key with the Caps lock key. Caps lock is useless. It's a huge icon, easy for your pinky to hit and it'll make life easier when working with vim. **System Preferences > Search for Reset Modifier Keys** 50 | 51 | * Caps Lock = Control 52 | * Control = No Action 53 | ![Reset Modifier Keys](http://i.imgur.com/qEfywWM.png) 54 | 55 | ## Projects Directory 56 | 57 | Create a project directory somewhere on your machine. I like to use ~/Sites and I'll split that into work/personal/temp. If you fire up terminal **(Command + Spacebar -> Type: Terminal -> Enter)** you will be able to run this command to automatically create those directories for you: 58 | 59 | $ mkdir -p ~/Sites/{personal,tmp,work} 60 | 61 | ## Homebrew 62 | 63 | Package managers make it so much easier to install and update applications (for Operating Systems) or libraries (for programming languages). The most popular one for OS X is [Homebrew](http://brew.sh/). 64 | 65 | ### Install 66 | 67 | An important dependency before Homebrew can work is the **Command Line Tools** for **Xcode**. These include compilers that will allow you to build things from source. 68 | 69 | Now, Xcode weights something like 2GB, and you don't need it unless you're developing iPhone or Mac apps. Good news is Apple provides a way to install only the Command Line Tools, without Xcode. To do this you need to go to [http://developer.apple.com/downloads](http://developer.apple.com/downloads), and sign in with your Apple ID (the same one you use for iTunes and app purchases). Unfortunately, you're greeted by a rather annoying questionnaire. All questions are required, so feel free to answer at random. 70 | 71 | Once you reach the downloads page, search for "command line tools", and download the latest **Command Line Tools (OS X Mountain Lion) for Xcode**. Open the **.dmg** file once it's done downloading, and double-click on the **.mpkg** installer to launch the installation. When it's done, you can unmount the disk in Finder. 72 | 73 | **Note**: If you are running **OS X 10.9 Mavericks**, then you can install the Xcode Command Line Tools directly from the command line with `$ xcode-select --install`, and you don't have to go through the download page and the questionnaire. 74 | 75 | Finally, we can install Hombrew! In the terminal paste the following line (without the `$`), hit **Enter**, and follow the steps on the screen: 76 | 77 | $ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 78 | 79 | One thing we need to do is tell the system to use programs installed by Hombrew (in `/usr/local/bin`) rather than the OS default if it exists. We do this by adding `/usr/local/bin` to your `$PATH` environment variable: 80 | 81 | $ echo 'export PATH="/usr/local/bin:$PATH"' >> ~/.bash_profile 82 | 83 | Open an new terminal tab with **Cmd+T** (you should also close the old one), then run the following command to make sure everything works: 84 | 85 | $ brew doctor 86 | 87 | ### Usage 88 | 89 | To install a package (or **Formula** in Homebrew vocabulary) simply type: 90 | 91 | $ brew install 92 | 93 | To update Homebrew's directory of formulae, run: 94 | 95 | $ brew update 96 | 97 | **Note**: I've seen that command fail sometimes because of a bug. If that ever happens, run the following (when you have Git installed): 98 | 99 | ```bash 100 | $ cd /usr/local 101 | $ git fetch origin 102 | $ git reset --hard origin/master 103 | ``` 104 | 105 | To see if any of your packages need to be updated: 106 | 107 | $ brew outdated 108 | 109 | To update a package: 110 | 111 | $ brew upgrade 112 | 113 | Homebrew keeps older versions of packages installed, in case you want to roll back. That rarely is necessary, so you can do some cleanup to get rid of those old versions: 114 | 115 | $ brew cleanup 116 | 117 | To see what you have installed (with their version numbers): 118 | 119 | $ brew list --versions 120 | 121 | ##NVM 122 | brew install nvm 123 | add this to .zshrc 124 | 125 | export NVM_DIR=~/.nvm 126 | source $(brew --prefix nvm)/nvm.sh 127 | 128 | ##Ruby and RBEnv 129 | 130 | Ruby does come pre-installed on Mac, but you probably shouldn't be tinkering around with that version. It's best to install a ruby version manager to take care of anything that one might screw up messing around with your system's version of Ruby. Now that we have Homebrew installed, it's as easy as: 131 | 132 | $ brew update 133 | $ brew install rbenv ruby-build 134 | $ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile 135 | 136 | 3. Add `rbenv init` to your shell to enable shims and autocompletion. 137 | 138 | ~~~ sh 139 | $ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile 140 | ~~~ 141 | 142 | _Same as in previous step, use `~/.bashrc` on Ubuntu, or `~/.zshrc` for Zsh._ 143 | 144 | 4. Restart your shell so that PATH changes take effect. (Opening a new 145 | terminal tab will usually do it.) Now check if rbenv was set up: 146 | 147 | ~~~ sh 148 | $ type rbenv 149 | #=> "rbenv is a function" 150 | ~~~ 151 | 152 | ## Homebrew Cask 153 | 154 | brew install caskroom/cask/brew-cask 155 | brew cask install google-chrome 156 | 157 | ## SoundCleod 158 | https://github.com/salomvary/soundcleod 159 | 160 | ##Maximum Awesome 161 | 162 | I originally intended to write my own build script for a lot of this, but Maximum Awesome already does a fantastic job installing iTerm2, Tmux, MacVim and a plethora of other great features! 163 | 164 | [https://github.com/square/maximum-awesome](https://github.com/square/maximum-awesome) 165 | 166 | $ cd ~/Sites/tmp 167 | $ git clone https://github.com/square/maximum-awesome && cd maximum-awesome 168 | $ rake 169 | 170 | ![Maximum Awesome](http://corner.squareup.com/images/maximum-awesome/vim.png) 171 | 172 | ## Google Chrome 173 | 174 | Download: [http://google.com/chrome](https://www.google.com/intl/en/chrome/browser/). 175 | 176 | $ brew cask install google-chrome 177 | 178 | ## Google Chrome Canary 179 | 180 | $ brew cask install google-chrome-canary 181 | 182 | 183 | ## Consolas 184 | 185 | I really like the Consolas font for coding. Being a Microsoft (!) font, it is not installed by default. Since we're going to be looking at a lot of terminal output and code, let's install it now. 186 | 187 | There are two ways we can install it. If you bought **Microsoft Office for Mac**, install that and Consolas will be installed as well. 188 | 189 | If you don't have Office, follow these steps: 190 | 191 | $ brew install cabextract 192 | $ cd ~/Downloads 193 | $ mkdir consolas 194 | $ cd consolas 195 | $ curl -O http://download.microsoft.com/download/f/5/a/f5a3df76-d856-4a61-a6bd-722f52a5be26/PowerPointViewer.exe 196 | $ cabextract PowerPointViewer.exe 197 | $ cabextract ppviewer.cab 198 | $ open CONSOLA*.TTF 199 | 200 | And click **Install Font**. Thanks to Alexander Zhuravlev for his [post](http://blog.ikato.com/post/15675823000/how-to-install-consolas-font-on-mac-os-x). 201 | 202 | ## Git 203 | 204 | What's a developer without [Git](http://git-scm.com/)? To install, simply run: 205 | 206 | $ brew install git 207 | 208 | When done, to test that it installed fine you can run: 209 | 210 | $ git --version 211 | 212 | And `$ which git` should output `/usr/local/bin/git`. 213 | 214 | Let's set up some basic configuration. Download the [.gitconfig](/nicolahery/mac-dev-setup/blob/master/.gitconfig) file to your home directory: 215 | 216 | $ cd ~ 217 | $ curl -O https://raw.github.com/nicolashery/mac-dev-setup/master/.gitconfig 218 | 219 | It will add some color to the `status`, `branch`, and `diff` Git commands, as well as a couple aliases. Feel free to take a look at the contents of the file, and add to it to your liking. 220 | 221 | Next, we'll define your Git user (should be the same name and email you use for [GitHub](https://github.com/) and [Heroku](http://www.heroku.com/)): 222 | 223 | $ git config --global user.name "Your Name Here" 224 | $ git config --global user.email "your_email@youremail.com" 225 | 226 | They will get added to your `.gitconfig` file. 227 | 228 | To push code to your GitHub repositories, we're going to use the recommended HTTPS method (versus SSH). So you don't have to type your username and password everytime, let's enable Git password caching as described [here](https://help.github.com/articles/set-up-git): 229 | 230 | $ git config --global credential.helper osxkeychain 231 | 232 | **Note**: On a Mac, it is important to remember to add `.DS_Store` (a hidden OS X system file that's put in folders) to your `.gitignore` files. You can take a look at this repository's [.gitignore](/nicolahery/mac-dev-setup/blob/master/.gitignore) file for inspiration. 233 | 234 | ## Sublime Text 235 | 236 | With the terminal, the text editor is a developer's most important tool. Everyone has their preferences, but unless you're a hardcore [Vim](http://en.wikipedia.org/wiki/Vim_(text_editor)) user, a lot of people are going to tell you that [Sublime Text](http://www.sublimetext.com/) is currently the best one out there. 237 | 238 | Go ahead and [download](http://www.sublimetext.com/) it. Open the **.dmg** file, drag-and-drop in the **Applications** folder, you know the drill now. Launch the application. 239 | 240 | **Note**: At this point I'm going to create a shorcut on the OS X Dock for both for Sublime Text and iTerm. To do so, right-click on the running application and select **Options > Keep in Dock**. 241 | 242 | Sublime Text is not free, but I think it has an unlimited "evaluation period". Anyhow, we're going to be using it so much that even the seemingly expensive $60 price tag is worth every penny. If you can afford it, I suggest you [support](http://www.sublimetext.com/buy) this awesome tool. :) 243 | 244 | Just like the terminal, let's configure our editor a little. Go to **Sublime Text 2 > Preferences > Settings - User** and paste the following in the file that just opened: 245 | 246 | ```json 247 | { 248 | "font_face": "Consolas", 249 | "font_size": 13, 250 | "rulers": 251 | [ 252 | 79 253 | ], 254 | "highlight_line": true, 255 | "bold_folder_labels": true, 256 | "highlight_modified_tabs": true, 257 | "tab_size": 2, 258 | "translate_tabs_to_spaces": true, 259 | "word_wrap": false, 260 | "indent_to_bracket": true 261 | } 262 | ``` 263 | 264 | Feel free to tweak these to your preference. When done, save the file and close it. 265 | 266 | I use tab size 2 for everything except Python and Markdown files, where I use tab size 4. If you have a Python and Markdown file handy (or create dummy ones with `$ touch dummy.py`), for each one, open it and go to **Sublime Text 2 > Preferences > Settings - More > Syntax Specific - User** to paste in: 267 | 268 | ```json 269 | { 270 | "tab_size": 4 271 | } 272 | ``` 273 | 274 | Now for the color. I'm going to change two things: the **Theme** (which is how the tabs, the file explorer on the left, etc. look) and the **Color Scheme** (the colors of the code). Again, feel free to pick different ones, or stick with the default. 275 | 276 | A popular Theme is the [Soda Theme](https://github.com/buymeasoda/soda-theme). To install it, run: 277 | 278 | $ cd ~/Library/Application\ Support/Sublime\ Text\ 2/Packages/ 279 | $ git clone https://github.com/buymeasoda/soda-theme/ "Theme - Soda" 280 | 281 | Then go to **Sublime Text 2 > Preferences > Settings - User** and add the following two lines: 282 | 283 | "theme": "Soda Dark.sublime-theme", 284 | "soda_classic_tabs": true 285 | 286 | Restart Sublime Text for all changes to take affect (Note: on the Mac, closing all windows doesn't close the application, you need to hit **Cmd+Q**). 287 | 288 | The Soda Theme page also offers some [extra color schemes](https://github.com/buymeasoda/soda-theme#syntax-highlighting-colour-schemes) you can download and try. But to be consistent with my terminal, I like to use the **Solarized** Color Scheme, which already ships with Sublime Text. To use it, just go to **Sublime Text 2 > Preferences > Color Scheme > Solarized (Dark)**. Again, this is really according to personal flavors, so pick what you want. 289 | 290 | Sublime Text 2 already supports syntax highlighting for a lot of languages. I'm going to install a couple that are missing: 291 | 292 | $ cd ~/Library/Application\ Support/Sublime\ Text\ 2/Packages/ 293 | $ git clone https://github.com/jashkenas/coffee-script-tmbundle CoffeeScript 294 | $ git clone https://github.com/miksago/jade-tmbundle Jade 295 | $ git clone https://github.com/danro/LESS-sublime.git LESS 296 | $ git clone -b SublimeText2 https://github.com/kuroir/SCSS.tmbundle.git SCSS 297 | $ git clone https://github.com/nrw/sublime-text-handlebars Handlebars 298 | 299 | Let's create a shortcut so we can launch Sublime Text from the command-line: 300 | 301 | $ cd ~ 302 | $ mkdir bin 303 | $ ln -s "/Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl" ~/bin/subl 304 | 305 | Now I can open a file with `$ subl myfile.py` or start a new project in the current directory with `$ subl .`. Pretty cool. 306 | 307 | Sublime Text is very extensible. For now we'll leave it like that, we already have a solid installation. To add more in the future, a good place to start would be to install the [Sublime Package Control](http://wbond.net/sublime_packages/package_control/installation). 308 | 309 | ## Vim 310 | 311 | Although Sublime Text will be our main editor, it is a good idea to learn some very basic usage of [Vim](http://www.vim.org/). It is a very popular text editor inside the terminal, and is usually pre-installed on any Unix system. 312 | 313 | For example, when you run a Git commit, it will open Vim to allow you to type the commit message. 314 | 315 | I suggest you read a tutorial on Vim. Grasping the concept of the two "modes" of the editor, **Insert** (by pressing `i`) and **Normal** (by pressing `Esc` to exit Insert mode), will be the part that feels most unatural. After that it's just remembering a few important keys. 316 | 317 | Vim's default settings aren't great, and you could spend a lot of time tweaking your configuration (the `.vimrc` file). But if you're like me and just use Vim occasionally, you'll be happy to know that [Tim Pope](https://github.com/tpope) has put together some sensible defaults to quickly get started. 318 | 319 | First, install [pathogen.vim](https://github.com/tpope/vim-pathogen) by running: 320 | 321 | $ mkdir -p ~/.vim/autoload ~/.vim/bundle 322 | $ curl -Sso ~/.vim/autoload/pathogen.vim \ 323 | https://raw.github.com/tpope/vim-pathogen/master/autoload/pathogen.vim 324 | 325 | Then create a file `~/.vimrc` (you can use `$ subl ~/.vimrc`), and paste in the following: 326 | 327 | execute pathogen#infect() 328 | syntax on 329 | filetype plugin indent on 330 | 331 | And finally, install the Vim "sensible defaults" by running: 332 | 333 | $ cd ~/.vim/bundle 334 | $ git clone git://github.com/tpope/vim-sensible.git 335 | 336 | With that, Vim will look a lot better next time you open it! 337 | 338 | ## Node.js 339 | 340 | Install [Node.js](http://nodejs.org/) with Homebrew: 341 | 342 | $ brew update 343 | $ brew install node 344 | 345 | The formula also installs the [npm](https://npmjs.org/) package manager. However, as suggested by the Homebrew output, we need to add `/usr/local/share/npm/bin` to our path so that npm-installed modules with executables will have them picked up. 346 | 347 | To do so, add this line to your `~/.path` file, before the `export PATH` line: 348 | 349 | ```bash 350 | PATH=/usr/local/share/npm/bin:$PATH 351 | ``` 352 | 353 | Open a new terminal for the `$PATH` changes to take effect. 354 | 355 | We also need to tell npm where to find the Xcode Command Line Tools, by running: 356 | 357 | $ sudo xcode-select -switch /usr/bin 358 | 359 | Node modules are installed locally in the `node_modules` folder of each project by default, but there are at least two that are worth installing globally. Those are [CoffeeScript](http://coffeescript.org/) and [Grunt](http://gruntjs.com/): 360 | 361 | $ npm install -g coffee-script 362 | $ npm install -g grunt-cli 363 | 364 | ### Npm usage 365 | 366 | To install a package: 367 | 368 | $ npm install # Install locally 369 | $ npm install -g # Install globally 370 | 371 | To install a package and save it in your project's `package.json` file: 372 | 373 | $ npm install --save 374 | 375 | To see what's installed: 376 | 377 | $ npm list # Local 378 | $ npm list -g # Global 379 | 380 | To find outdated packages (locally or globally): 381 | 382 | $ npm outdated [-g] 383 | 384 | To upgrade all or a particular package: 385 | 386 | $ npm update [] 387 | 388 | To uninstall a package: 389 | 390 | $ npm uninstall 391 | 392 | ## Heroku 393 | 394 | [Heroku](http://www.heroku.com/), if you're not already familiar with it, is a [Platform-as-a-Service](http://en.wikipedia.org/wiki/Platform_as_a_service) (PaaS) that makes it really easy to deploy your apps online. There are other similar solutions out there, but Heroku was among the first and is currently the most popular. Not only does it make a developer's life easier, but I find that having Heroku deployment in mind when building an app forces you to follow modern app development [best practices](http://www.12factor.net/). 395 | 396 | ### Install 397 | 398 | Assuming that you have an account (sign up if you don't), let's install the [Heroku Client](https://devcenter.heroku.com/articles/using-the-cli) for the command-line. Heroku offers a Mac OS X installer, the [Heroku Toolbelt](https://toolbelt.heroku.com/), that includes the client. But for these kind of tools, I prefer using Homebrew. It allows us to keep better track of what we have installed. Luckily for us, Homebrew includes a `heroku-toolbelt` formula: 399 | 400 | $ brew install heroku-toolbelt 401 | 402 | The formula might not have the latest version of the Heroku Client, which is updated pretty often. Let's update it now: 403 | 404 | $ heroku update 405 | 406 | Don't be afraid to run `heroku update` every now and then to always have the most recent version. 407 | 408 | ### Usage 409 | 410 | Login to your Heroku account using your email and password: 411 | 412 | $ heroku login 413 | 414 | If this is a new account, and since you don't already have a public **SSH key** in your `~/.ssh` directory, it will offer to create one for you. Say yes! It will also upload the key to your Heroku account, which will allow you to deploy apps from this computer. 415 | 416 | If it didn't offer create the SSH key for you (i.e. your Heroku account already has SSH keys associated with it), you can do so manually by running: 417 | 418 | $ mkdir ~/.ssh 419 | $ ssh-keygen -t rsa 420 | 421 | Keep the default file name and skip the passphrase by just hitting Enter both times. Then, add the key to your Heroku account: 422 | 423 | $ heroku keys:add 424 | 425 | Once the key business is done, you're ready to deploy apps! Heroku has a great [Getting Started](https://devcenter.heroku.com/articles/python) guide, so I'll let you refer to that (the one linked here is for Python, but there is one for every popular language). Heroku uses Git to push code for deployment, so make sure your app is under Git version control. A quick cheat sheet (if you've used Heroku before): 426 | 427 | $ cd myapp/ 428 | $ heroku create myapp 429 | $ git push heroku master 430 | $ heroku ps 431 | $ heroku logs -t 432 | 433 | The [Heroku Dev Center](https://devcenter.heroku.com/) is full of great resources, so be sure to check it out! 434 | 435 | ## MongoDB 436 | 437 | [MongoDB](http://www.mongodb.org/) is a popular [NoSQL](http://en.wikipedia.org/wiki/NoSQL) database. 438 | 439 | ### Install 440 | 441 | Installing it is very easy through Homebrew: 442 | 443 | $ brew update 444 | $ brew install mongo 445 | 446 | ### Usage 447 | 448 | In a terminal, start the MongoDB server: 449 | 450 | $ mongod 451 | 452 | In another terminal, connect to the database with the Mongo shell using: 453 | 454 | $ mongo 455 | 456 | I'll let you refer to MongoDB's [Getting Started](http://docs.mongodb.org/manual/tutorial/getting-started/) guide for more! 457 | 458 | ## Projects folder 459 | 460 | This really depends on how you want to organize your files, but I like to put all my version-controlled projects in `~/Sites/personal`. Other documents I may have, or things not yet under version control, I like to put in `~/Dropbox` (if you have Dropbox installed), or `~/Documents`. 461 | 462 | ## Apps 463 | 464 | Here is a quick list of some apps I use, and that you might find useful as well: 465 | 466 | - [Mou](http://markedapp.com/): As a developer, most of the stuff you write ends up being in [Markdown](http://daringfireball.net/projects/markdown/). In fact, this `README.md` file (possibly the most important file of a GitHub repo) is indeed in Markdown, written in Sublime Text, and I use Marked to preview the results everytime I save. **(FREE)** 467 | - [Alfred](#alfred) 468 | - [Evernote](https://evernote.com/): If I don't write something down, I'll forget it. As a developer, you learn so many new things every day, and technology keeps changing, it would be insane to want to keep it all in your head. So take notes, sync them to the cloud, and have them on all your devices. To be honest, I switched to [Simplenote](http://simplenote.com/) because I only take text notes, and I got tired of Evernote putting extra spaces between paragraphs when I copy & pasted into other applications. Simplenote is so much better for text notes (and it supports Markdown!). **(Both are free)** 469 | 470 | 471 | --------------------------------------------------------------------------------