Dokku, Mongo & Node.js

TL;DR: If you run into trouble using Mongo with Dokku for a Node.js app, re-image your server and start from scratch.

Today was my first adventure into setting up a full-fledged, database-driven application with Dokku. I built the app with Node.js so I chose Mongo as the database. Local setup was easy, I already had Mongo installed. Setting up the production server also seemed easy at first until it just didn’t work. Here’s I troubleshot it:

Nginx Error

The first problem I ran into was an Nginx error page. I forgot the status code, but it essentially meant there was no app running. Strange, since the app was running fine on my local system. Since my application was set to log to stdout I wasn’t able to see any information about what was causing the app to error out, so I decided to do a quick deploy to Heroku and see what was amiss.

Sidenote: I really like Heroku. If it wasn’t so much more expensive than a Digital Ocean droplet I would probably use them for every project.

Troubleshooting on Heroku

Heroku has a great heroku logs command that shows everything an application logged while it was running. As soon as I saw the output I had a face-palm moment: I hadn’t saved all my dependencies to package.js, so I was getting simple “module not found” errors. That was embarrassing, but at least it’s a quick fix.

After cleaning up my package.json file I deployed again and got a database error. Nothing unusual there, I hadn’t added a Mongo database to Heroku. This was to be expected, so I decided to deploy straight back to my own droplet.

Was Dokku Broken?

After redeploying I was still getting the same Nginx error telling me that there was no app running. When I ran docker ps I saw that was true: Only the MongoDB container was running. Lame.

At this point I didn’t know what to try. I’m still not super familiar with Docker/Dokku for deployment, so I used the good old fashioned method of just resetting everything.

I had saved a droplet image on DO right after installing Node but before setting up Dokku with my SSH key, so I just restored to that image. Then I:

  • Setup my SSH key as usual, not using virtual host naming b/c I still haven’t transfered the clients main site.
  • Installed the Dokku Mongo plugin and the domains plugin
  • Created a Mongo container using the plugin: dokku mongodb:create <app>
  • Created the actual Dokku app from my local server: git remote add dokku dokku@<ip>:<app>
  • Deployed: git push dokku master

Then everything worked fine. Running docker ps now shows two running containers: one for the app and one for Mongo.

So.. in conclusion

I don’t know what went wrong initially, but resetting everything worked like a charm. So when in doubt, just restore to a stable image and start from scratch. And make sure to make snapshots of your droplet whenever you feel it is in a reusable state. Boosh!

Useful Bash Commands For Web Developers

I recently found myself tutoring a friend in the ways of the command line and thought I’d write a quick post about it. Being comfortable with bash (or some other shell) isnt necessarily a prerequisite for web development, but it certainly makes the process smoother and more enjoyable. For anyone just starting to learn the command line, here are a few useful tips:

The Basics

  • cd: Short for ‘change directory’. This is probably the command you will use most often until you decide to do away with it altogether.
  • pwd: Think ‘print working directory’. This outputs the path to your current working directory.
  • ls -laG: Display the contents of the pwd. The common form of this command, ls, really isn’t very useful in my opinion, so skip it and go straight for this useful directory listing command. Alias it to something shorter like so: alias l='ls -lahG'.

Directory Shortcuts

You don’t always have to type a full path to get where you want to be.

  • ~: Home directory. Ex: cd ~.
  • .: A single period. Present directory, i.e. pwd. Ex: ls -la ..
  • ..: Two periods. Parent directory.
  • -: Hyphen. The previous directory. Ex: cd - is like saying ‘Go Back’ in bash.

This is all really basic stuff, but if you’re like me you likely put off learning it for a while because it’s not absolutely essential to building awesome apps. That being said, once you find yourself tweaking your won servers or deploying to someone elses you will be much happier if you are comfortable with the command line.

Using Dokku As A Personal Heroku

Dokku For The Win

I might just be in love with Dokku. Why? Here are some things I like as a developer:

  • Not having to configure servers
  • Not having to upload files
  • Deploying apps to production (or staging!) with a few key strokes
  • Portability of code
  • Extensibility

With a service like Heroku you get all of this, but with free, open source software like Dokku you not only get these great features but you don’t have to pay a premium. It’s completely free, which means if you’re like me and you enjoy using Digital Ocean’s $5/mo base package you get the most critical features of Heroku for five bucks a month. That’s a deal in my book.

After a session of coding, here’s what my new deployment process looks like:

git add .
git push dokku master

It’s that simple.

Setting Up

I’m not going to go in depth on this because there’s really not that much to say. Here are the steps you would take to get set up with Dokku if you’re using Digital Ocean:

  • Crete a new droplet from the standard Dokku image. Here’s a guide.
  • Install the Dokku Domains Plugin. It’s unofficial, but it works great.
  • Run dokku domains:set <app-name> www.myawesomeapp.com
  • Symlink the newly created nginx conf file to the /etc/nginx/sites-enabled/ directory.
  • Restart nginx: sudo service nginx restart

Step four is what tripped me up initially. I thought I could just run the domains command and everything would work fine, but apparently the script doesn’t link anything up to Nginx, so you must do it yourself.

The generated conf file will likely be located at /home/dokku/<app-name>/nginx-domains.conf. So all you need to do is symlink that into your Nginx configuration and your good to go:

ln -s /path/to/nginx-domains.conf /path/to/sites-enabled/<app-name>

After that, restart your server with the command mentioned above (or whatever works for your system) and you should be good to go. Reload your custom URL in the browser and see it live.

Note: This only works if you already have a domain name set up and DNS set up. Just Google this if you need help there, Digital Ocean has some great guides and a surprisingly nice DNS management interface.

That’s all. Dokku is awesome.

A Month In San Francisco

Four Weeks in the city for tech

I’m from California. I grew up in tiny town called Point Arena, about four hours north of the Bay Area. Despite this, I never actually spent any significant time in San Francisco, so I was very excited to have the chance to live here for a month, especially after spending two years abroad. Better yet, the day I landed was my birthday :+1:

Read More

Using Emoji in Excerpts on GitHub Pages

Here’s how to get GitHub emoji working in post excerpts

As I was redesigning my blog recently I decided I wanted all the emoji in all of the places. That’s not usually a problem on GitHub pages. Seriously, they even have an official page about it.. But if you want emoji in your post excerpts, you will have a problem.

GitHub pages only support emoji in post or page content. In theory, that should really apply to excerpts as well, but for some reason it does not. Here is what emoji looked like on my site before:


Broken GitHub Emoji

The problem was this line of code which uses Jekyll’s built-in excerpt feature:

{{ "{{ post.excerpt "}}}}

The solution? Generate your own excerpts directly from the content using Jekyll’s built-in helpers:

{{ "{{ post.content | truncatewords: 50 "}}}}

Thank goodness that worked, I thought I was going to have to move away from GitHub pages. If you want to be able to play around with the excerpt length easily without editing index.html you can also add it as a custom variable in _config.yml:

# In _config.yml...
excerpt_length: 100

Then in index.html:

{{ "{{ post.content | truncatewords: site.excerpt_length "}}}}

This is the approach I took because it feels cleaner to me, but use whatever works for you. That’s all, hope this helps 😎

Setting Up Hydra Config on A Mac

Update 2016-11-12: I no longer use either Hydra or Mjolnir. Currently my go to app for window management is Phoenix.

Update: The Hydra project referenced in this post no longer exists. It’s been succeeded by Mjolnir, a project by the initial creator of Hydra. So whenever you see me reference “Hydra” I’m now actually referencing Mjolnir.

I Set Up Hydra to Minimize my Dependence on a Mouse

This post is about moving one step closer to a mouse-less workflow, where any command can be accomplished trivially from the keyboard.

I discovered Hydra through Hacker News earlier today, and it’s almost everything I could wish for in a window management tool. My new setup allows me to manage windows somewhat like you see in the image bellow:

Keyboard Window Management

If you interested, here’s the source to make Hydra work like you see in that image. But if you’re like me, you will probably want to customize everything, so here’s a quick tutorial on how to do that.

Read More

Meteor is (Almost) Awesome

Almost Perfect, But With Room For Improvement

Have you ever built a real-time web app? Well I hadn’t, not before meteor anyway. This framework makes it insanely easy to build apps that update in real-time across an unlimited number of screens, so I love it. Meteor is so good in fact, that it was very easy to overlook what I would otherwise consider to be deal breakers like:

  • Full blown app rebuilds, including file compilation, concatenation and minification every time you save a file.
  • No official testing solution
  • No official package manager

One of the first things you will read or be told when starting a meteor project, is to install Meteorite as a package manager, so the last bullet point is probably pretty clear to anyone who’s used Meteor. However, the other two pain points might be less obvious when just starting with the framework.

That first one is a really big deal for anyone who likes to iterate on their design using CSS in a browser, and likes to see realtime changes to the web page. These days it’s fairly easy to accomplish this using [Grunt][grunt] or [Gulp][gulp] in combination with [Livereload][lr]. But if you have a large Meteor app, you might have to wait ten seconds (or more!) for your app to reload entirely, even if you just changed a margin or added a 1px border. This is ridiculous.

Testing has also been an issue with Meteor. There have been a few decent contenders:

Read More

Jekyll Management Like a Boss

Blogging Without Friction

Yesterday I wrote a script to help myself blog more often. This is what it looks like in the terminal:

  • Create a new post: post new [post title]
  • List all of my posts: post list
  • Search existing posts: post search [post title]
  • Edit a post: post edit [partial post title]
  • Publish to this blog: post publish

I really like Jekyll, but having to manually create files with the Jekyll filename format (YYYY-MM-DD-post-title) is a bit of a hassle. Clearly you could just do this by hand, but if you’re like me and want to automate all the minutia in your life, then that’s not going to cut it.

Read More

Jekyll Theming Like a Boss With Gulp

Building your own Jekyll theme quickly and efficiently

Basically I was fed up with how inefficient coding Jekyll themes was, especially with Octopress, so I decided there must be a better way. These are my findings.

We’re going to use Gulp.js to automate most of what’s lame about creating themes for Jekyll. Gulp is just a task runner, so if you have another your more familiar with (i.e. Grunt) that would work too.

First you need to go grab the boilerplate Poole code so that we are all on the same page.

Sass

Jekyll tempting is a pain compared to general web development and it shouldn’t be. Let’s get gulp set up to automate the usual crap for us. I’m using SCSS, but you could do the same thing with plain CSS, Less or Stylus just as easily. Here is the is a gulpfile to get get you set up:

Read More

Vim: It's Awesome

I’ve done a few posts on Vim before, but I realize how little I really knew about Vim as I wrote those posts. Lately I’ve taken the time to actually learn quite a bit of Vimscript, enough to finally start opening up the true power of Vim. I can customize anything I want and create all sorts of new behavior in the editor. But it’s really true what many people have said over and over again…

There’s a learning curve

I would say at the very least it’s taken six months to get proficient in Vim. It could certainly be done in less time, but if you’re actively working on client projects you will find it hard to open up an editor you don’t yet know and be really productive.

Read More