Easily Deploy An Open Source Team Chat App to Heroku

lets-chat

Self-hosted chat app for small teams

Let’s Chat is a pretty cool piece of software (no, it’s actually fucking awesome). The ability to run the app on Heroku just makes it that much nicer.

Setting it up on Heroku is quite easy. You can see it running on Heroku at http://yell.longren.io. There’s no admin user, so anyone can register and create their own rooms.

Files can also be posted to rooms, but an Amazon S3 bucket is required for that feature to work. Although, other file storage options are being looked into. Another neat feature is automatic transcript creation. There’s a transcript screenshot in the gallery below.

Prepare Let’s Chat

Open up a terminal and clone the Let’s Chat Git repository:

That will make a local clone of Let’s Chat in the lets-chat folder. Go into that folder, with cd lets-chat.

1. Copy settings.js.sample to settings.js, like so:

2. Remove settings.js from the .gitignore file. Just open .gitignore in your favorite text editor and remove the line containing settings.js.

3. Make any changes to settings.js that you’d like. This is where you’d specify your Amazon S3 credentials to allow storing files in a bucket.

Deploy To Heroku

We’ll be using heroku-app-name as the name of our Heroku app. So you’ll obviously need to change instances of heroku-app-name in the commands that follow.

1. Add a Heroku remote to your newly cloned repository:

2. Add the MongoLab Heroku addon:

3. Get the Mongo URL. Executing the following will give you the Mongo URL, which you’ll need below.

You’ll see some output similar to this:

The Mongo URL is the part that starts with mongodb://.

4. Now, we need to set the Mongo URL:

You’ll want to change the DATABASE_URL variable to the Mongo URL specific to your app.

6. All that’s left is to commit and push to Heroku. You should still be in the lets-chat folder, so, make a git commit! You’ll have to anyway, before you can push to Heroku.

7. Now we can finally push this to Heroku!

Visit your Heroku app URL in your web browser and you should be greeted with a screen that looks similar to the featured image for this post. Some basic screenshots can be seen below!

If you run into any issues or find something I have incorrect, please let me know. You could also see if your problem has already been addressed on GitHub.

This is the steps I took to get Let’s Chat working on Heroku. It’s possible that the project developers will streamline this process in the future. But for now, this is a very easy solution to hosting on Heroku.

Sticky Alerts: A New, Tiny jQuery Plugin

jquery-sticky-alert

A super tiny sticky alerts plugin

Why?

Just because. Sticky Alerts can be downloaded here, and a demo can be seen here.

This pen from Thommy Browne caught my eye. The sticky alert bar was made with some very simple jquery and a bit of CSS.

I’ve been quickly increasing my JavaScript knowledge and figured I’d try creating a legit jQuery plugin, using the code from Thommy Browne. After a couple hours of tinkering, I had it! I was really surprised how easy it is to create a jQuery plugin, even adding options to plugins is crazy easy.

So, if nothing else, this was simply an exercise in creating a jQuery plugin.

Get It

You can see the plugin in action at http://sticky.longren.io/, which is hosted on GitHub Pages. The plugin itself can be downloaded from GitHub. The JavaScript is incredibly small, a total of 36 lines, which could easily be condensed into about 5 lines.

jQuery Sticky Alerts is available under the MIT license and is free for use on personal or even commercial projects.

Using the plugin is extremely easy. Just define the container you want the alert to sit in, make sure jQuery and jquery.stickyalerts.js (and jquery.stickyalerts.css) is loaded, define some options, and you’re set!

You can see usage instructions at the GitHub project page. Below are the options in use on the demo page:

Provide Feedback

I’m new to building jQuery plugins, so let me know if I’ve made any errors or if you see anything I could be doing better (I want to learn!!). You can leave a comment on this post or create an issue at GitHub. Pull requests are also welcome! :)

If you decide to use Sticky Alerts in a project, I’d love to know about it! Just drop a link in the comments.

Colors: A New Anchor CMS Theme

colors

A minimal theme for Anchor CMS with a splash of Color

The VPSstat.us blog has been running Anchor CMS since I launched it.

Since VPSstat.us is done and gone, I decided to release the theme for public use. It’s on GitHub. I’m no designer, so this theme looks like absolute junk compared to most other Anchor CMS themes. Anchor has some of the nicest looking themes around.

It’s not in a very usable state currently. I need to fix a lot of things, especially the logo/site name. VPSstat.us is currently hard-coded in there with no way to change it without editing the source.

The social icons in the footer also need to be removed and replaced with something dynamic that can be enabled or disabled.

There’s probably about five things I need to do before I’d feel comfortable submitting it to anchorthemes.com.

If you want to give it a try, I’d love to know what you think. If you come across problems, feel free to fix them and send a pull request. It’s really easy to do. Here’s the gist of it (pun intended):

I’m still planning to contribute more to Anchor core, specifically with importing WordPress content. The current methods for importing from WordPress are pretty unreliable. I’d love to move this site to Anchor, but waiting on a few features before I do that.

A full screenshot is below, or you can see it running on the VPSstat.us blog.
Continue reading