Build your own web IDE…for free

I have been spending a lot of time digging around in WordPress, building child themes and a better understanding of the Genesis 2 framework. Along the way, I have settled on some tools that combine to make a powerful web development environment. All of these tools are free and open-source. The installation process has a few twists and turns, some of which involve editing files in the command-line, so you need to be comfortable with that. For reference, I am doing all of this on my 2009 MacBook Pro running Yosemite and the performance is great.

Why would we want to build our own development environment instead of just using something like CodeKit? The first, but less important, reason is price. We can build a fast, powerful, flexible environment for free. All-in-one software is a good value, but free is free! The more important thing we gain from building our own environment is knowledge. When we build our own computer or car or house or IDE, the extra time and research is not wasted. It gives us a greater connection to the thing we built and a greater insight into how all the pieces fit together.

So, if you’re still with me after all that, let’s get started…

The Easy Part

1. Install MAMP

If you are not running a local web server environment for development, you should be. It’s faster and safer to work on files on your own computer. MAMP packages a web server (Apache or Nginx), MySQL server, and PHP, Python and Perl web components. There is a pro version of MAMP, but the free version has everything we need for development.

Go to http://www.mamp.info/ and download the installer. Run the installer package, then open MAMP.

The MAMP website has full documentation, but we can get started with a couple of settings. In the ‘Preferences’ window, under ‘Start/Stop’, check the box labeled ‘Start Servers when starting MAMP’.MAMP server settings

Under the ‘Web Server’ tab, the document root will be set to a folder inside the MAMP application. We can leave this setting as-is or change the folder location to serve up web documents from. (I have my document root pointed to a ‘Sites’ folder in my user directory.)

MAMP server settings

 

Once we have changed the settings, we can start the servers with the buttons in the top right of the MAMP main window.

Start MAMP servers

2. Install Brackets

Brackets is an open-source text editor backed by Adobe. It is fairly young, but already has good plugin support and is growing rapidly. Download and install Brackets from http://brackets.io/.

Brackets

3. Install node.js

node.js logonode.js is an increasingly popular application platform that the other pieces of our development environment depend on. Download and install node.js from http://nodejs.org/. The node.js install includes the Node Package Manager (‘npm’), which we will use later to install other components.

4. Install Grunt

Grunt logoI love Grunt! Grunt is a task runner that can be used to automate almost any development task. There is a non-trivial learning curve associated with Grunt, but taking the time is definitely worth it. Among other things, I use the grunt watch command to automatically compile Sass files and update my browser window with Live Reload. To install Grunt, open a terminal window and type npm install -g grunt-cli. Depending on your setup, you may have to run this as sudo.

5. Install Git

Git logoYou should be using Git. At the very least, Git will allow you to easily pull themes/projects/etc. from GitHub. After surviving the initial learning curve, however, Git will allow you to track and organize changes to your work. To learn Git, I suggest the book Pro Git, which is free (are you sensing a theme here?). If you are more the visual type, check out the Git path on Code School. Anyway, download and install Git from http://git-scm.com/.

The Hard(er) Part

With the steps we’ve already done, we have a great set of tools, but they are not tied together for easy use in Brackets. Grunt and Git are primarily command-line driven, so it would be nice to have command-line access from inside Brackets. The good news is that there is a really good Brackets extension called ‘Brackets Terminal’, which uses node.js to provide a tty terminal. The bad news is that, as of this writing, the tty.js install is broken in npm.

Normally, we would use npm install -g tty.js to install the tty terminal, but, because of a broken dependency, we can’t. The workaround I used for my own install is outlined in this discussion.

1. Patch and install pty.js

tty.js is not broken, but one of the files it depends on is. We must download, patch, and install a version of pty.js before we can install tty.js. Open a terminal window and enter these commands:.

npm uninstall -g tty.js
git clone https://github.com/chjj/pty.js.git /tmp/pty.js

The first command uninstalls any previous versions of tty.js. The second downloads a copy of pty.js to patch.

Now, open the file /tmp/pty.js/src/unix/pty.cc in your favorite command-line text editor (vi, vim, nano, etc.) and change #include <util.h> in line #39 to read

#include "/usr/include/util.h"

Save and exit the editor. To install this patched version of pty.js, run

npm install -g /tmp/pty.js

2. Patch and install tty.js

The process for patching and installing tty.js is nearly identical. To download a copy of tty.js to patch, run

git clone https://github.com/chjj/tty.js.git /tmp/tty.js

Once again, use a text editor to open the file /tmp/tty.js/package.json and remove the line that reads "pty": "0.2.4",. Save the file and exit, then run the following to install the patched tty.js

npm install -g /tmp/tty.js

You should now have a functioning tty.js installation. Typing tty.js in a terminal window should start it up.

 3. Install the Brackets Terminal extension

Open Brackets and choose ‘Extension Manager…’ from the ‘File’ menu. Search for and install ‘Brackets Terminal’ (the developer’s name is Alessandro Artoni). As long as tty.js is running in a terminal window, you should be able to open a command-line terminal at the bottom of the editor screen. You can issue Grunt and Git commands from this window and see their progress without leaving Brackets.

Brackets terminal extension

4. Automate Brackets startup

For Brackets Terminal to work, tty.js must be running in a terminal window. One way is to just leave an instance of tty.js running all the time. Another is to write an AppleScript that opens Terminal, starts a tty.js session, then opens Brackets, like this.

Summary

With any luck, the npm install version of tty.js will get fixed and we won’t have to do the hard part anymore. If you haven’t already, I highly recommend learning about Grunt and Git and incorporating them into your workflow. Grunt and node.js have a wealth of contributed modules that cover about any task you can think of. Brackets has been a solid editor and is just getting started. I hope this walkthrough will give you the push to explore some of the great work being done in the open-source community and add to your own knowledge along the way.

Leave a Reply