Setting Up Email in a Rails 4 app with Action Mailer in development and SendGrid in production using Heroku

Here is a demo of how I created an email w/ user-mailer in rails

First off, from the Rails Guide generate a UserMailer

Screen Shot 2013-12-21 at 7.34.47 PM

Then in the user_mailer.rb create a function that sends the email

Pretty simple right?  Now we need to create the view.  This is where you can design the email and whatever text you want to put in it. Create a file in the app/views/user_mailer folder.  The name of the file should match the name of the function you defined in the user_mailer.rb file.  Mine is welcome_email.html.erb

Screen Shot 2013-12-21 at 7.45.23 PM

Now that we have the function to send the email, and the text of the email itself,  we just need to add a line in the controller to have it send the email when we want it to.

You can call the mailer function wherever you want to send the email, in this case we can just send it when a new user signs up

Screen Shot 2013-12-21 at 8.50.09 PM

Now we need to set up the config files for the email address we will use to send emails. For development, in the config/environment/development.rb file:

Screen Shot 2014-02-23 at 8.00.13 PM

Set the config.action_mailer.default_url_options to ‘localhost:3000’ in development, or whatever port you are using to test.  In production, you would set it to the url of your production app.  Then set up the email smtp settings according to your email provider.  I’ve shown the settings for gmail here.

So great, now we have it set up so a new user will receive an email, at least in development.  Now getting this working in production can be slightly harder.  But I’m going to walk through one super easy solution of how to set this up using Heroku and SendGrid, but there are probably a million different ways to do this depending on your hosting, your email, etc.

So the first thing to do before moving to production is to protect the sensitive email sign in information that we just put in the config/environment/development.rb.  The easiest way to do this is to use environment variables, and a simple way to do that is to use the figaro gem.  I wrote a quick post on how to setup environment variables with the figaro gem here, so take a minute and set that up in your app first.  This will keep your email login info from getting pushed to github, in case you are using a public repository.  It should then look something like this:

So, assuming you have your app pushed to heroku for production, the next thing we need to do is setup an email add-on for your heroku app.  Of course you could fully create your own email solution, but if you know how to do that then you wouldn’t be reading this blog, would you? So, for a simpler solution, first you can choose one of the email related add-ons from the heroku add-ons page.  I happen to use SendGrid as I think its one of the simplest to set up and use, so that’s what I’ll go through here.

Add SendGrid to your heroku app by running

heroku addons:add sendgrid:starter

Now SendGrid will have automatically generated a username and password that you can see by running

heroku config:get SENDGRID_USERNAME
heroku config:get SENDGRID_PASSWORD

or simply running heroku config will show you all the heroku config variables.

Next, go to config/environment/production.rb and add our email settings there:

So you can see that SendGrid has set up environment variables on heroku for us, giving us the SENDGRID_USERNAME and SENDGRID_PASSWORD.  This is the same idea that we just did in development using the figaro gem.

Ok, so now push to heroku, migrate the database, and see if the mailer is working in production.  Not too difficult right?  Stay tuned for a follow up post where I’ll describe how to send email asynchronously with sidekiq and redis.


Form Horizontal with Bootstrap 3 and Simple Form 2 on Rails 4

I don’t know why this was so difficult, but I had lots of trouble getting the `form-horizontal` class to work in my rails app was quite a chore when I upgraded to bootstrap 3.  After lots of searching and hours of agony, this finally worked for me.  Credit goes to this blog post.

After you have bootstrap 3 (I use the bootstrap-sass gem) and simple_form 2, run the simple_form generator:

rails generate simple_form:install --bootstrap

So the way I understand it, this hack basically overrides the div classes in simple_form to match them up with bootstrap. So first edit the config/initializers/simple_form.rb

config.label_class = 'col-lg-2 control-label'
config.form_class = "simple_form form-horizontal"

In the config/initializers/simple_form_bootstrap.rb replace the classes “control-group” with “form-group” and replace “control” with “col-lg-10”

Now create a new initializer file, for example config/initializers/remove-this-sf_bs3_inputs.rb

inputs = %w[

inputs.each do |input_type|
superclass = “SimpleForm::Inputs::#{input_type}”.constantize

new_class = do
def input_html_classes

Object.const_set(input_type, new_class)

Hopefully there will be some official support in the near future that won’t require this workaround. Let me know if you know of an easier way to get form-horizontal to work.

Here’s the Stack Overflow question that I asked regarding this problem.

Making text and its parent item with different opacity using bootstrap

I’m using the ‘well’ class from bootstrap.  Since in this case I have a background image behind the well, I wanted to make it somewhat transparent.  But the text in the well becomes really hard to see:

Screen Shot 2014-02-14 at 5.46.50 AM

So I wanted to keep the text and buttons inside the well with opacity at 1.0.  How can I do this? Well first, instead of using the opacity value in the css file, us the background-color with its rgba values (a meaning the alpha value, or transparency), like this:

.well {
background-color: rgba(39, 174, 96, 0.6);

Then, I put everything inside the well in another class. I called it field

.field {
opacity: 1.0;

And now the well stays transparent, but everything else inside is not transparent.

Screen Shot 2014-02-14 at 5.54.37 AM

Also, if your changes to the css don’t seem to be showing up in your rails app, don’t forget to precompile your assets:

rake assets:precompile


rake assets:precompile RAILS_ENV=production for heroku or your production environment.

Some credit goes to this site.

How to reset the postgres database on heroku

So I’m sure your not like me and you never have to rename your models in your database, because you always plan enough ahead that you name everything perfectly on the first migration.  In case you don’t you may end up renaming tables, adding/removing database columns etc.

My issue came from a join model between Students and Courses that I called Registrations.  Which seemed to be one of the rare occasions where I actually found a word for the join model that made perfect sense in the context and perfect sense in English.  However the issue arose when I then started to use the Devise gem for user authentication.  Confusion and chaos ensued due to the fact that devise uses ‘registrations’ to describe users signing up for your site.  These two uses of ‘registration’ caused overlap in routes and other errors.  So in short, I unfortunately needed to rename the full Registrations scaffold, along with its views etc.  Basically I went through my whole app manually in Sublime Text and replaced all the instances of the registration (except the devise ones of course) with my new model name – attendance.  Of course you also have to rename all the files too.  This is tedious and error prone, and if anyone knows of a better way to do it, please let me know.  Maybe I’ll make one in my free time someday.  This Stack Overflow question goes into a bit more detail of exactly how to rename a full scaffold.

But my point here is heroku.  After going through all the work of renaming the full scaffold and all its files, I ran rake db:reset to reset the database, and then ran the migrations again.  Worked great.  However for some strange reason, this does not work on heroku.  I ran heroku run rake db:reset and kept getting this strange error:

FATAL: permission denied for database "postgres" DETAIL: User does not have CONNECT privilege.

which really confused me as of course I’ve been changing the heroku database all along, why would I suddenly not have privileges?  My first thought was to try running sudo, but after Googling, I came across this SO question with the answer:  On heroku you must run heroku pg:reset – notice the omission of run rake.

Hope this saves you some time!