Writing good code starts with building a rich development environment using the best tools. When I began building websites I preferred an IDE (Adobe Dreamweaver, specifically) for the out-the-box functionality. My needs soon outgrew the Dreamweaver GUI and a friend of mine convinced me that to become a better programmer I should use the command line. So, I started along the path to learning linux. Today, I'm convinced that to maximize any dev environment intermediate knowledge of Linux is a sine qua non.
This is not to say that the best development environment doesn't use any GUIs. Many services provide excellent GUIs which provide additional benefits and advanced features. Many developers (myself included) prefer to use non-CLI text editors (textmate, webstorm, textwrangler and coda seem to be most popular). Other developers use the Github GUI, which is capable of executing most of the available git commands. To each it's own, but when making the decision between using a GUI or CLI, consider carefully how much control you will need.
Lets just dive in! Get started by cloning the repo https://github.com/camwes/dock
git clone git@github.com:camwes/dock.git ~
cd ~/dock
./dock
# will echo: Usage: dock {deploy|prod|dev|version}
./dock locTo make lives easier, the above command will do everything that you need to get your development environment from zero to supercharged in ~20-30 mins. Here's what the script does:
- Customize your shell
- Install packages via Homebrew
- Install apps via Cask
- Install additional dependencies
Dock gives you some dotfiles to really get you going, including the screenshot above (my shell is based off of this repo). The files are rsynced in the install process and is an emacs/zsh/tmux shell. Customize it as much as you want, but I like my setup.
Most linux machines use bash as the default shell, and if you've been using linux long enough it's likely that you have amassed an impressively large .bashrc (or .zshrc if you like me prefer the zsh shell) filled with aliases and enhancements to your shell environment. If you don't know what a .bashrc is then you should take the time to research how these files work and how they can make your life a lot easier. I would suggest perusing this:
If you are configuring a development environment for a mac then you must install Homebrew, and it will do a lot of heavy lifting for you. If you use a window's machine then go out and buy a Mac (but seriously). Homebrew is a package managers for Mac OSX; it can install command line packages and applications and manage these installations. Homebrew has tons of packages available and this repo installs a select view. They are listed in the BrewFile. Here are a few of my favorite formulas are:
- git (duh)
- emacs (or your favorite command line text editor)
- autojump
- tree
- tig
- wget
- htop
- mosh
- zsh
Even better, brew can also install your GUI apps using brew cask. Many apps are added everyday so check out what's available here or check out the casks installed with this repo.
Mac comes with Ruby installed. Nothing to do here... Yay! We do need to install RubyGems via bundler to take full advantage of our machine. But you will need to install some important rubygems are listed below, but the Gemfile can be found here
- Sass is a css preprocessor
- Compass is a utility for sass
- Cheat is a collection of cheat sheets for popular tools
- Ceaser is a collection of easing transistions
Node has a great deal of modules that are easily downloaded using npm. While each web project should have it's own packages.json for installing dependencies there are a few modules that you will need to install globally:
- coffee-script: Javascript pre-processor
- forever: A simple CLI tool for ensuring that a given script runs continuously (i.e. forever)
- grunt-cli: A node.js automation tool
- bower: a package manger for the web
- node-inspector: An amazing plugin that allows you to use chrome devtools on server code.
npm install # install all modules in package.json
npm install -g node-inspector bower forever grunt-cli coffee-scriptYou may also want to consider yeomon, an application generator. This service installs works with bower and grunt but adds the benefit of basically doing what I've done in this repo and providing you with biased app structures (generators) to choose from. In due, time I will create my own Yeoman generator for this boilerplate.
If you've developed for a while you probably hate the process of constantly refreshing your browser once pages have been updated. This is a thing of the past with LiveReload. Install their app or browser extensions. The gruntfile.coffee can be updated to enable livereload when changes are made to the static directory when you "grunt watch".
As a developer I began making websites with zero server administration experience. I used commercial web hosting services that were both terribly interfaced and extremely limited (GoDaddy, Yahoo, etc.) As the sophistication of the things that I decided to build began to outgrow these services I decided that it was worth my time to learn to deploy a site using Amazon Web Services. Many of the webs most successful companies (Netflix, Tumblr, etc.) and most startups heavily rely on AWS, as it is very competitively priced. Unfortunately, for most front-end developers, learning to use these services is a daunting task.
# provision production server
./dock prodSimilar to the development script above, this script is designed to build a production environment for you. This script does many things, including but not limited to:
- Create Users
- Set Time Zone & Clock
- Install Dependencies
- Provision Server (Firewall, Nginx, Varnish, Fail2Ban)
But getting the server set up isn't the end of server deployment. Since you are already clearly an expert at Git by now why not use git to improve your server deployment process? Git is actually an excellent tool for this, but requires a slightly more advanced usage of git and understanding of shell scripts. Chances are you need a little more information than that about how github deployment works, which is also in my devops post. The script does a few things:
- Setting up Deploy Keys
- Create Git Repository for Deployment
- Creates a working tree
# build git deploy (name, repo, user, branch)
./dock -n drake -u ohmlabs -r ohmlabs -b drake
When you have completed installation you should have the following architecture in /home/git:
├── staging.git
│ ├── hooks
│ │ ├── post-receive
│ │ └── pre-receive
├── production.git
│ ├── hooks
│ │ ├── post-receive
│ │ └── pre-receive
└── public
├── production
└── staging
For the nitty gritty details on exactly what these scripts do, please refer to my blog post.
- environment: Ubuntu 12.04 Server:
- Adding Deploy Keys to github requires copying ssh key