Nettuts+ Mac Apps: Structurer Pro and Builder

When I’m not writing Appstorm reviews or doing schoolwork, I’m a freelance web developer. A lot of what I know about web development I owe to the in-depth tutorials and screencasts over at Nettuts+, which is, in my opinion, one of the most reliable and richest resources for all levels of learning. You may or may not know that Nettuts+ is owned by Envato, who also happens to run AppStorm. We’re an ever growing family of sites aimed at providing you with all your digital needs, from education and app reviews to online marketplaces for designers and developers.

In addition to providing quality educational materials, Nettuts+ has recently entered into the world of Mac app development with a duo of helpful web development tools: Nettuts Builder and Structurer Pro.

Read on to find out how to use these great utilities to speed up your web development workflow!

Structurer Pro

Structurer Pro was the original Nettuts+ app, built to help web developers quickly create project templates without having to manually create each file and folder.

In this demo, I’m going to be creating a very simple one-page site directory containing HTML, CSS, and Javascript files, as well as an images directory. In the Finder, our directory structure will look like this:

Nothing fancy, but I create projects like this all the time

Nothing fancy, but I create projects like this all the time

Using Structurer Pro

When you open up Structurer Pro, you’re greeted with a fairly spartan interface with a couple of text boxes. The first step is to choose a base path for your project’s folder. Next, you start defining the files and directories you want to create using a very straightforward set of rules.

To create a file, just type in the name of the file you want to create with the appropriate extension. To create a folder, type in the name you want to use, then a forward-slash. If you’d like to populate the folder, you can either add a file name on the same line as the folder name after the slash, or start a new line and precede the file name with a forwad-slash. To create our project, the Structurer text box would look like this:

Creating a project directory in Structurer Pro

Creating a project directory in Structurer Pro

You can create nested directories as well, just make sure you always put a forward-slash after the name of each folder.

Creating Tempates

To those of you familiar with using the command line to create files and directories, Structurer Pro may look like little more than a glorified Terminal shell. After all, the same result could be achieved with a few mkdir and touch commands. That being said, the real benefit of using Structurer Pro is the ability to save templates of commonly used project structures.

To create a template, simply select “Save Template…” from the Structurer Pro dropdown menu and give your template a memorable name. Now when you access the dropdown menu, your template is just a click away. You can add and manage as many templates as you like through the “Manage Templates” option.

Structurer Menu

Once we’ve created some reusable templates, we’re still a few clicks away from being able to create a project from scratch. To speed up your project creation even further, Structurer Pro comes bundled with Structurer Menu, a small menu bar application that gives you one-click access to your project templates. Simply pick a template and choose a location for it, and you’re ready to go.

Menu bar access to frequently used templates

Menu bar access to frequently used templates

Though our example demonstrated the creation of a very simple HTML site, Structurer Pro would be even more of a time-saver for the creation of large scale projects and web applications involving many classes and directories. I find that using Structurer Pro not only speeds up my workflow, but also encourages me to plan ahead and think about what resources I’m going to need for a project, which saves me even more time later on.

Nettuts+ Builder

If Structurer Pro helps you to get started on a project, then Nettuts+ Builder helps you to finish it. Nettuts+ Builder’s main feature is drag-and-drop FTP uploading, but it also features an easy file compressor for minifying your Javascript and CSS files.

Using Nettuts+ Builder

Nettuts+ Builder is a menu bar application with some very simple and easily configurable features. When you first open it up, you’ll just see a little construction hat in your menu bar with just a “preferences” menu item. From Preferences, you can select your compression engine (YUI, JSMin, Closure Compiler) and add an FTP server to upload your project to.

Once you’re ready to publish a project, simply drag it to the menu bar item, and it will be automatically compressed and uploaded to your server. Nettuts+ builder also creates a new “publish” directory for your project within the original folder containing the compressed files.

When you make changes to your project, you can simply drag the folder back to the menu bar, and the changes will be uploaded.

When you’re specifying an FTP server to upload to, make sure you add a new URL path for your project, as the “Project finished folder name” refers to the local copy of your project, and you probably don’t want all your files to upload to your root directory.

Configuring FTP server information in Nettuts+ Builder

Configuring FTP server information in Nettuts+ Builder

Nettuts+ Builder is a great utility and time saver, but probably wouldn’t appeal to web developers that use advanced IDEs or editors with these features built in. Personally, I do a lot of my devleopment in Coda, which has a built in FTP client, but coders using more single-function text editors like TextMate and BBEdit would likely appreciate the simplicity of drag-and-drop uploading without having to open an FTP client.

It’s also useful to have an easy way to compress javascript files, which though not essential for smaller projects, can really save space when you’re dealing with larger websites that use multiple libraries or plugins. I also like the way Nettuts+ Builder allows you to keep your publish and working directories seperate, so that you can still work with the uncompressed versions of your code as you make changes.


The Nettuts+ duo of apps can definitely streamline the web development workflow, and enforce good practices like planning and script compression.

I’m sure some readers will prefer to accomplish tasks like uploading, compression, and directory creation through the command line, but Terminal isn’t an environment everyone is comfortable in, and user interfaces were invented for a reason.

These apps don’t introduce any breakthrough new features, but they fit the needs felt by many web developers for easy ways to speed up what is often a repetitive and tedious process. The way I see it, most web developers either accomplish the mundane tasks of web development by opening up the Terminal, or by taking advantage of more fully-featured development environments. The Nettuts+ apps offer a middle ground, an inexpensive, easy option to expedite repetitive tasks.