Creating a Business Website Using the Sinatra and SendGrid Ruby Gems

5 min readApr 3, 2018

A website (in progress) I’m building using Ruby and Sinatra, and incorporating Bootstrap for the first time

One of our workshops this week was to create a business website using Sinatra. The site needed to have the option to contact the business using the SendGrid API to send an e-mail to the fictitious business owner.

This was a great learning experience because it tied in the front-end work we’ve been learning with a very simple back-end framework using the Sinatra gem.

Before starting this program I made a very basic website using Wordpress for my dad’s business (southphillywoodcraft.com).

I decided I wanted to create this website from scratch at some point in order to use it as part of my portfolio, and to learn as much as I can about the front and back-end of web development.

This Sinatra project was a perfect entry-point. This is definitely a work in progress, but I’m glad I had the opportunity to jump into this!

Sinatra Takes the Stage

I decided ahead of time that I wanted to incorporate Bootstrap into this project because it seems like a powerful styling took that we didn’t have much time to dig into yet.

In order to use Sinatra and SendGrid we set up our folder structure and initialized it to create our Gemfile:

bundle init

Inserted the two gems:

gem 'sinatra'
gem 'sendgrid-ruby'

Then installed them via the terminal:

bundle install

In our Ruby file we required these two gems, and set up a few different pages to work with, along with a ‘completed’ page to post the params to after inputing our name and email address:

require 'sinatra'
require 'sendgrid-ruby'
include SendGridget '/' do
    erb :home
endget '/about' do
  erb :about
endget '/contact' do
  erb :contact
endget '/gallery' do
  erb :gallery
endget '/sign-up' do
  erb :sign_up
endget '/completed' do
  erb :completed
endpost '/completed' do
  puts "PARAMS"
  puts params.inspect
  puts "PARAMS"@my_first_name = params[:first_name]
  @my_last_name = params[:last_name]
  @my_email = params[:email]
  @company = params[:company]
  puts @my_emailfrom = Email.new(email: "joseph@mysite.com")
  to = Email.new(email: @my_email)
  subject = "Welcome aboard, #{@my_first_name} #{@my_last_name}!"
  content = Content.new(type: "text/plain", value: "Welcome aboard #{@my_first_name} #{@my_last_name}. We're so excited to have you on board with us, along with all your co-workers at #{@company}!")mail = Mail.new(from, subject, to, content)sg = SendGrid::API.new(api_key: ENV['SENDGRID_API_KEY'])
  response = sg.client.mail._('send').post(request_body: mail.to_json)
  puts response.status_code
  puts response.body
  puts response.headers
  erb :completed
end

We also learned how to utilize our layout.erb template file by incorporating <%= yield %> to call the content for the other pages. This is a very powerful tool because it allows you to make any changes to the page layout template all in one place.

To test out Bootstrap I inserted their link and scripts, then incorporated their navbar, form and some image classes to get a feel for it.

These:

…went in my <head> tags of my layout.erb file to incorporate both Bootstrap’s CSS styling and JavaScript functions. (Perhaps if my site were more complex it would be better to put the JS script sources at the bottom of my layout.erb file so that it loads last. It worked either way with my simple site because the only thing using the JS script was the navbar dropdown.)

The Homepage

I decided to use Bootstrap’s navbar-brand class for the image in the upper left-hand corner, as it seems like a nice styling option, and something I’ll likely want to do on future websites.

(There is definitely more I’d like to do in terms of the flow of the page, like give more space between the image and the header, for example. All in due time.)

The Gallery

There is also more I’d like to do in terms of styling the gallery, but for now, it was great to learn some of the basics of incorporating Bootstrap’s classes to create a thumbnail gallery that floats so it’s responsive to page width:

The Sign-Up Page

With this page I wanted to incorporate some of Bootstrap’s form classes to style the input fields so they didn’t simply run across the page with no space between them:

The dropdown works!

Storing Environmental Variables

In this process we also learned how to store environmental variables to our machine so we don’t need to make our API keys public.

First we created our .bash_profile in our home directory, then used the nano (or text) editor to add our SendGrid API key as an environmental variable using:

export VAR_NAME=var_value

Then calling it to see if it stuck:

echo $VAR_NAME

This allowed us to call the SendGrid API key in our Ruby file and keep it private at the same time!

I’d love to hear from you! Let’s connect using the following function:

function letsConnect(yes) {
  if (yes === true) {
    console.log("linkedIn");
    console.log("Twitter");
  } else {
    console.log("thanks for reading!");
  }
}