Developer Notes - Part I

  • About five years ago, I decided to teach myself how to build software, this decision led me into the challenging, fun, creative and ever-chaninging world of software and web development. For the longest time I struggled with organizing my notes. Several tools that I have tried and continue to use, depending on what I’m working on, are Google Docs, Google Keep, BitBucket Snippets, GitHUb Gists, and the list goes.

  • Google Keep and Google Docs are both great tools for taking notes via voice and/or hand. After using these for a while I realized that there where times when I needed to see my code in a formatted way. This is when I learned about Markdown. So “what is Morkdown?”, you might ask. According to Wikipedia, it is a syntaxt used for plain text formatting. Markdown is used in forums, for creating README files, blogging etc. In fact, I’m using Markdown to write this blog. This lighweight markup language is used extensively by developers, and writers. To learn more about Markdown see the
    cheatsheet on GitHub.

  • It’s important to get into the habit of writing as one begins his/her journey into the software/web development world. Many tools are available and searching and trying out what works for you is part of the process.

  • After learning about Markdown, I moved to using Snippets on BitBucket and Gists on GitHub. If you’re not familiar with any of these, GitHub or BitBucket, they are two of the most popular repository management services for software development. You can visit their websites to learn more about them. Moving on …

Google Keep

Google Keep

Google Docs

Google Docs

Bitbucket Snippets

Bitbucket Snippets

GitHub Gists

GitHub Gists

  • The advantage I found in using BitBucket and GitHub tools is that my notes were already formated for me to use in my blogs. It was much easier to read my notes using these tools as opposed to using Google Docs or Google Keep. I still do using the other tools because there are times when they can do a better job especially when it comes to taking down quick notes for example, while listening to a podcast, a things I find Google Keep great for. When it comes to presentations, essays, spreadsheets, Google Docs wins the day for me. Back to writing for developers …

Here is an example of some JavaScript code without using Markdown: Hard to read, right?

function User(firstName, lastName, age, gender) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.gender = gender;
};

var farai = new User(‘Farai’, ‘Zozo’, 29, ‘female’);
var hoza = new User(‘Hoza’, ‘Moyo’, 35, ‘male’);
farai;

Here is an example of some JavaScript code using Markdown: Much better?

1
2
3
4
5
6
7
8
9
10
function User(firstName, lastName, age, gender) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.gender = gender;
};

var farai = new User('Farai', 'Zozo', 29, 'female');
var hoza = new User('Hoza', 'Moyo', 35, 'male');
farai;
  • Big difference, right? While writing is important for a developer, it can be a challenge to write and learn at the same time. Finding the right tool is not easy, but it is very rewarding when you find your tools, learn, write and share with the community. I will continue to write a few more blogs on writing tools and the importance of writing for software/web developers. My next blogs are going to cover Markdown, Vim, VimWiki, and Hexo as well as how to combine these tools to effectively learn, write, and share your developer notes with the community.

Adding a Custom Domain with Heroku and Google Domains

This is an update to the blog I wrote on March 31 2017. Every once in a while I deploy a web application to Heroku using Google Domains and I often end up spending a good amount of time looking up documentation on how to add a custom domain to Heroku. To save time for next time, I’ve compiled this blog for me and other Rails developers who might find themselves in a similar situation. This blog assumes you have a Ruby on Rails application already deployed to Heroku and a domain name hosted at Google Domains. If you need help deploying your app to Heroku, I would recommend the fantastic Ruby on Rails Tutorial by Michael Hartl. Otherwise, let’s get started.

  • Add your domain using the command below in your terminal
1
2
$ heroku domains:add www.your_domain.com
$ heroku domains:add your_domain.com
  • Retrieve your DNS Target which you’ll need for Google Domains by running the code below in your terminal.
1
$ heroku domains
  • You should see somethings like the code below.
1
2
3
4
5
6
7
8
=== your_heroku_appname Heroku Domain
appname.herokuapp.com

=== your_heroku_appname Custom Domains
Domain Name DNS Target
────────────── ────────────────────────────
www.yourdomain.com www.yourdomain.herokudns.com
yourdomain.com yourdomain.herokudns.com
  • Next log into your Google Domains account
  • Click on Configure DNS
  • Find the Custom resource records section and do the following
  1. Type www in the first box
  2. Select CNAME from the dropdown menu
  3. Type in the @ into the last box that says Domain Name. and click on Add
  4. Next, in a new raw, type in @ in the first box that has an @ sign in it.
  5. Select A from the drop down.
  6. Type 1h in the box that says 1h
  7. Next we want to get the IP address of our domain name so lets do the following:
  8. Visit This Website
  9. Type your url yourdomain.herokudns.com into the IP-Address, Domain or URL: window
  10. Copy the IP address you receive
  11. Go back to your Google Domains Dashboard
  12. Paste the IP address into the last box that says IPv4 address in DNS configure, under the Custom resource records in your google domains dashboard.
  13. Next click on Add
  14. Check after 30 or so minutes, by visiting your url e.g mycustomdoamin.com to see if it worked.
  15. To see how your website appears to the rest of the world while you wait for the settings to take full effect visit GeoPeeker and enter your domain name in the search box.

Seed Rails Database with Faker Gem

Introduction

In this tutorial, we are going to create a tiny rails application and explore several ways in which we can populate our database.
We will explore what Rails gives us out of the box as well as the Faker gem. If you would like to follow along and you do not Ruby on Rails installed please visit the InstallRails website, install Ruby on Rails and return to this page to follow along.

Lets say we want to build a writing application which we will name journal. Our journal app is going to allow us to create a title and enter some text in the body of the journal. After creating the journal’s model we want to be able to add data to our database so that our client can play around and experiment with the app. We also want to give other developers who might be working on our app, the ability to quickly add data to our database when they clone our app.

Creating the Journal Application
  • Please note I’m using Rails 5.1.4 and Ruby 2.4.2. If your are using Rails 4x or less, replcase rails with rake when running the rails commands.
  • Lets hope into our terminal and create our journal application by running the line provided below
1
$ rails new journal-1
  • Next we are going to use the Rails scaffold generator to add a feature that will give our client the ability to add a journal entry with a title and a body. Lets run the line provided below.
1
$ rails generate scaffold Post title:string body:text
  • If you look at your terminal you should notice that rails created a bunch files. With this scaffold generator we now have a Posts controller, Post Model, Post index and show pages etc, as shown below.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
invoke  active_record
create db/migrate/20171126150013_create_posts.rb
create app/models/post.rb
invoke resource_route
route resources :posts
invoke scaffold_controller
create app/controllers/posts_controller.rb
invoke erb
create app/views/posts
create app/views/posts/index.html.erb
create app/views/posts/edit.html.erb
create app/views/posts/show.html.erb
create app/views/posts/new.html.erb
create app/views/posts/_form.html.erb
invoke helper
create app/helpers/posts_helper.rb
invoke jbuilder
create app/views/posts/index.json.jbuilder
create app/views/posts/show.json.jbuilder
create app/views/posts/_post.json.jbuilder
invoke assets
invoke coffee
create app/assets/javascripts/posts.coffee
invoke scss
create app/assets/stylesheets/posts.scss
invoke scss
create app/assets/stylesheets/scaffolds.scss
  • Next we need to run a migration so that Rails can create our Posts table using the following line.
1
$ rails db:migrate
  • Now let us open up the config/routes file and add the root route as shown below.
1
2
3
4
5
#config/routes.rb
Rails.application.routes.draw do
root 'posts#index'
resources :posts
end
  • If you go to your browser and visit localhost:3000 you will notice that you do not have any data to view, however, you could click on the ‘New Post’ link and add the data one at a time. You can also enter into your Rails console and add the data like so …
1
2
3
4
5
$ rails console

> Post.connection

> Post.create(title: "First Journal", body: "Today I had fabulous day!")
  • However, Rails provides a ‘seeds’ feature that comes baked into it, and it makes our lives much easier when it comes to adding new data to your application. Use your favorite text editor to open up the ‘seeds.rb’ file located in db/seeds.rb and add the following line
1
2
#db/seeds.rb
Post.create(title: "First Journal", body: "Today I had a fabulous day!")
  • Notice this is the same line of code we ran in our Rails console, only this time we have it saved in our seeds.rb file. This means we do not have to type it in again if we ever reset our database.

  • If you wanted to create several journal entries at once you could replace the above code with the following in your db/seeds.rb file.

1
2
3
4
#db/seeds.rb
10.times do |post|
Post.create(title: "First Journal", body: "Today I had a fabulous day!")
end
Using Faker Gem
  • You could, instead, use Faker gem to seed your database, first, you need to install the Faker gem. Open up your Gemfile and add the following gem.
1
gem 'faker', '~> 1.8', '>= 1.8.4'
  • Run the following line to install the gem
1
$ bundle install
  • Our next step is to open up our ‘seeds.rb’ file located in ‘db/seeds.rb’, and replace the code with the one provided below.
1
2
3
4
5
6
7
8
#db/seeds.rb
10.times do
title = Faker::Lorem.sentences(1)
body = Faker::Lorem.paragraph(10)
Post.create!(title: title, body: body)
end

puts "***************** Your seeds have been planted! ********************"
  • The code above is going to use Faker gem to create 10 posts (our journal entries) as soon as we seed our database as shown below.

  • First let us make sure that all our migrations are up by running the following line.

1
$ rails db:migrate:status
  • Now look at your terminal and make sure that your migration says ‘up’ as shown below.
1
2
3
 Status   Migration ID    Migration Name
--------------------------------------------------
up 20171126150013 Create posts
  • If your migration status says ‘down’ run the following line
1
$ rails db:migrate
  • Now let seed our database
1
$ rails db:seed
  • If you fire up your browser and visit ‘localhost:3000’ you should see 10 new entries were created on your landing page.

  • To learn more about seeding visit the Rails Guides , to learn more about the Faker gem visit Faker gem on Github.

  • To clone this repository visit my Github page here

Introduction to Node and Express

Node.js

  • Node.js is an open source cross platform runtime environment for developing applications on the server side, in other words, it is a way for us to write JavaScript code on the server side. Node is build on the Google Chrome V8 JavaScript engine and this makes it super fast. Before Node was introduced a few years back developers had to use a different language for the backend such as Python, Ruby, Java etc. With Node, JavaScript can be written on both the frontend and backend of our applications. For more on Node you can read more here ….

  • Besides its popularity within the developer community, Node is a very useful to learn for a number of reasons. For example, Node has extensive libraries, it is open source, it has a great community, great API’s, it is asynchronous, perfect for real-time applications, Node has very high performance, you only use one language ‘JavaScript’ to write code on both the front and back ends of your application and this, without having to learn an additional backend language. The list goes on. Having said that, it remains important to learn more than just one language once, as a beginner, you have a better understanding of the complex end ever-changing world of web or software development. I started with Ruby and Ruby on Rails, if I had to do it again, I would start with JavaScript and Express or another JavaScript FrameWork. As you might already know, there’s no shortage of JavaScript frameworks.

Install Node.js

  • To install Node visit the following link, select your operating system and follow the installation guidelines here

Express.js

  • Express is a web application framework for Node.js that has features for both mobile and web applications. Express is very light and has many features that come as plugins. For more on Express, you can read more here …

  • create a directory for your application

1
$ mkdir myapp
  • Enter into your new application directory
1
$ cd myapp

Install Express

  • Run the following to install Express, this will install Express in your current folder.
1
$ npm install express --save
  • Alternatively you can install Express globally by running the following line below.
1
$ npm install -g express

Install Package.json

  • The package.json file contains metadata about an application or a package. Read more about package.json here ….

  • Make sure you are in your application folder, in this blog we are in the ‘myapp’ folder and run the following code to create a package.json file

1
$ npm init
  • You will be asked several questions during this process. and your responses will be used to create your package.json file.

  • Hit the Enter or Return key and when you get to ‘entry point’ write the line below and hit enter. This is the entry point of your application. You can call it whatever you like, however, most times you’ll see it being called app.js or index.js.

1
app.js
  • Keep hitting the Enter or Return key until you get to ‘author’ and enter your name at this point.
1
$ Your Name
  • Keep hitting enter or return untill you get to the end of the prompts

Set up your home and about pages

  • First, install the Embedded JavaScript templates (ejs) templates by running the code below. You can read more about ejs here.
1
$ npm install express ejs --save
  • Create your views directory
1
$ mkdir views
  • Create your home page
1
$ touch views/home.ejs
  • Open your newly created home.ejs file and add some text to it, see the example below.
1
2
3
<h1>My Home Page<h1>

<p>Welcome to my home page!</p>
  • Create your about page
1
$ touch views/about.ejs
  • Open your newly created home.ejs file and add some text to it, see the example below.
1
2
3
<h1>My About Page<h1>

<p>This is my about page!</p>

The application file

  • Now let’s create the app.js file where our application will reside.
1
$ touch app.js

Routes

  • Open your app.js file and add the code below
1
2
3
4
5
6
7
8
9
10
11
12
var express = require("express");
var app = express();

app.set("view engine", "ejs");

app.get("/", function(req, res){
res.render("home");
});

app.get("/about", function(req, res){
res.render("about");
});

Finally, Server Setup

  • In the same app.js file you have open, let’s set up our server (I’m on a Mac), please see the alternative set up for Cloud9 below.
1
2
3
app.listen(3000, function () {
console.log('Your server is running port 3000 .. visit 'localhost:3000' in your browser.");
})
  • Alternatively f you happen to use Cloud9 instead, this is how you can set up your Express server on Cloud9
1
2
3
app.listen(process.env.PORT, process.env.IP, function(){
console.log("Your server is up and running!");
});
  • Run the following code to make sure that your set up is correct
1
$ node app.js
  • Open your web browser and type in the ‘ur’l below to view your app.
1
localhost:3000

Install The Full Version of Vim on Ubuntu

Ubuntu’s default vim package is vim-tiny, I recently found this out when I was showing someone how to use vim tutorial on his Ubuntu machine. When he ran $ vim tutor the tutorial did not show up as expected. To add the full version of vim to his Ubuntu 16.04 machine, I took the following steps.

  • Uninstall vim-tiny
1
$ sudo apt remove vim-tiny
  • Run the update command
1
$ sudo apt update
  • Install the full version of Vim.
1
$ sudo apt install vim
  • If you’re just getting started with Vim you can try the tutorial that comes with this full version installing by running the line below.
1
$ vim tutor
  • To get out of vim run the line below.
1
:q

Add Devise to Your Rails Application

  • This blog picks from the end of (section 8.1 Deleting Associated
    Object)[guides.rubyonrails.org/getting_started.html] We are going to be
    replacing the following section, section 9 “Security with” by implmenting
    Devise. Devise provides thorough decoumentation so for more detail please
    visit (Devise)[https://github.com/plataformatec/devise] We are going to be
    replacing the following section, section 9 “Security with” by implmenting
    Devise. Devise provides thorough decoumentation so for more detail please
    visit (Devise)[https://github.com/plataformatec/devise].

  • First we want to get the lastest version of Devise and we can do this by
    visiting (RubyGems)[https://rubygems.org/]. Type in “devise” in the search
    windown. The latest version at the time of this writing was as show below

  • Add devise gem

    1
    gem 'devise', '~> 4.3'
  • Run the following command to install the Devise Gem

1
$ bundle
  • Next install Devise by running the following command
1
$ rails g devise:install
  • Next create the User model
1
$ rails g devise user
  • Run the migration to create the User table
1
$ rails db:migrate
  • If you’re using Rails 4x or less use $ rake instead of $ rails,
    leave out the $ sign.

_ Next we want to create the views and for this please see my previous blog and
take it from there. In this blog (Implementing Devise Bootstrap
Views)[https://www.zambezi.io/articles/devise-bootstrap-views], I go through how
we can use the devise-bootstrap-views to generate clean, beautiful views.

Replace ERB with HAML

  • As an alterntive to ERB, developers can choose to use HAML which is described on
    it’s website as “[…] a markup language that’s used for inline templating
    systems sush as PHP, ASP, and ERB […].”.
    Also in their book “The Rails 4 Way”,
    Obie Fernandez and Kevin Faustino write about HAML as “[…] a “whitespace-sensitive” HTML
    templating engine that uses indentation to determine the hierarchy of an HTML
    document. Haml was created because its creater, Hampton Catlin, was tired of
    having to type markup and wanted all his output code to be beautifully
    formatted.”

  • If you’re new to Rails and ERB, I’d suggest sticking with Rails’ ERB convention for now until you get comfortable it.

  • It took me a while to warm up to HAML, but once I did, there was no turning
    back. Many thanks to Hampton Catlin and everyone working on HAML., this is a very useful and time saving tool. There
    is also a tutorial on the Haml website website, good place to get your feet wet. You can also find out more about Halm from “Rails 4 Way” book mentioned above, and also from Shane Howe’s Learn to Code HTML & CSS

  • Below is a quick example of how much typing you can save by using Haml

  • To set up HAML as your templating engine in Rails, visit the rubygems.org website. Search for the

    gem, to get the latest gem version and add it to your rails Gemfile as shown below. At the time of this writing, the latest version was version 1.0.
    1
    2
    3
    4
    5
    6



    ```ruby
    #Gemfile
    gem 'haml-rails', '~> 1.0'

  • Run the following command

1
$ bundle install
  • As a next step, you might choose to convert all your current ERB files to HAML using the command below
1
$ rails haml:erb2haml
  • You will then be asked if you want to delete your current ERB files, at this point I delete mine. However for learning purposes you might want to save them so that you can compare the difference between the two and learn.

  • Another option is to start a haml branch before converting all your files

1
$ git checkout -b haml
1
$ rails haml:erb2haml
Below is an example of an ERB file
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<div class="form-group">
<%= f.label :title, :class => 'control-label col-lg-2' %>
<div class="col-lg-10">
<%= f.text_field :title, :class => 'form-control' %>
</div>
</div>
<div class="form-group">
<%= f.label :details, :class => 'control-label col-lg-2' %>
<div class="col-lg-10">
<%= f.text_field :details, :class => 'form-control' %>
</div>
</div>
<div class="form-group">
<%= f.label :expected_completion_date, :class => 'control-label col-lg-2' %>
<div class="col-lg-10">
<%= f.text_field :expected_completion_date, :class => 'form-control datepicker' %>
</div>
</div>
<br>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<%= f.hidden_field :tenant_id, value: params[:tenant_id], :class => 'form-control' %>
<%= f.submit nil, :class => 'btn btn-primary' %>
<%= link_to t('.cancel', :default => t("helpers.links.cancel")),
root_path, :class => 'btn btn-default' %>
</div>
</div>
Compare the above with the HAML version below.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.form-group
= f.label :title, :class => 'control-label col-lg-2'
.col-lg-10
= f.text_field :title, :class => 'form-control'
.form-group
= f.label :details, :class => 'control-label col-lg-2'
.col-lg-10
= f.text_field :details, :class => 'form-control'
.form-group
= f.label :expected_completion_date, :class => 'control-label col-lg-2'
.col-lg-10
= f.text_field :expected_completion_date, :class => 'form-control datepicker'
%br/
.form-group
.col-lg-offset-2.col-lg-10
= f.hidden_field :tenant_id, value: params[:tenant_id], :class => 'form-control'
= f.submit nil, :class => 'btn btn-primary'
= link_to t('.cancel', :default => t("helpers.links.cancel")), |
root_path, :class => 'btn btn-default' |

If you have any questions or comments, please leave them below.

Implement Draft & Publish to Rails

Let’s say you have a

model in your Rails app and you want to be able to toggle between ```draft``` and ```publish``` statuses. When your blog is in the ```draft``` staus you don't want it seen by the by the ```public```. In other words visitors to your blog will only be able to see your ```published``` blogs. Assuming you already have a ```blog``` model in your Rails app, you might even call this model ```post```, or ```article```, the name doesn't matter. In my case I have a ```blog``` model in ```app/models/blog.rb``` and to it, I would like to add the ```draft``` and ```publish``` statuses. Below are the steps I will take to accomplish this. Note, this post assumes you're on a ```Rails 5``` app, if you are on a ```Rails 4x``` app or below replace ```$rails``` with ```$ rake``` accordingly, when you run your commands below.
1
2
3
4
5

- First step is to run the following migration to add the ```status``` column to your blog model or any such model in your case.

```bash
$ rails g migration add_status_to_blogs status:integer

  • Your second step is to add the

    value``` e.g. ```0``` to the migration you just created before you run the migration.
    1
    2
    3
    4
    5
    6
    7

    ```ruby
    class AddStatusToBlogs < ActiveRecord::Migration[5.0]
    def change
    add_column :blogs, :status, :integer, default: 0
    end
    end

  • Third, run the migration as shown below.

1
$ rails db:migrate
  • The fourth step is to open and update the blog model, or the model you’re working on.
1
2
3
4
5
6
7
class Blog < ApplicationRecord
enum status: { draft: 0, published: 1 }
.
.
.

end
  • Fifth lets hope into the
    console``` to test and make sure everything is working as it should be so far.
    1
    2
    3

    ```bash
    $ rails console
1
> Blog.first
  • In the sixth step, lets use the bang ! to publish the first blog as shown below.
1
> Blog.first.publish!
  • Seventh, lets use the bang

    to publish the last blog as shown below.
    1
    2
    3

    ```bash
    > Blog.last.publish!

  • Eight, check to see if the blog is in the draft? status.

1
> Blog.last.draft?
  • Ninth, check to see if the blog is in the published? status.
1
> Blog.last.published?
  • Tenth, update the blog index page and add the status link in app/views/blogs/index.html.erb.
1
<%= link_to blog.status, toggle_status_blog_path(blog) %>
  • Eleventh, open your routes.rb file and add the toggle_status route.
1
2
3
4
5
6
7
8
9
10
11
Rails.application.routes.draw do
root to: 'pages#home'
.
.
.
resources :blogs do
member do
get :toggle_status
end
end
end
  • Twelfth, open your blogs_controller.rb file and add the toggle_status method.
1
2
3
4
5
6
7
8
9
def toggle_status
if @blog.draft?
@blog.published!
elsif
@blog.published?
@blog.draft!
end
redirect_to blogs_url, notice: 'Your blog was successfully updated.'
end

If you have any questions or comments, please leave them below.

Implement Simple Search to Rails

This article assumes you have a Rails application with the models, views, and controllers all up running and you want to implement a simple search to your application. I have an app with a ‘note’ model and I would like to to implement simple search to make it easy for me to find specific notes using simple search key words in my rails application. Below I have a note model file, notes controller file and the notes index file.

  • Note Model File: This can be any other model file that you want to implement search on. Add the code below to your model file, I have mine as note.rb.
1
2
3
4
5
6
7
8
9
class Note < ApplicationRecord

.
.
.
def self.search(search)
where("title LIKE ? OR body LIKE ?", "%#{search}%", "%#{search}%")
end
end
  • Notes Controller File: Add this to the index action of your controller file, I’ve named mine notes_controller.rb.
1
2
3
def index
@notes = current_user.notes.recent.paginate(page: params[:page], :per_page => 25).search(params[:search])
end
  • Notes Index Page: Finally add the code below to your index file, my index page is in views/notes/index.html.erb file.
1
2
3
4
5
6
7
8
9
<div class="notes-container">
<div class="form-group">
<h3>My Notes</h3>
<%= form_tag(notes_path, :method => "get", id: "search-form") do %>
<%= text_field_tag :search, params[:search],class: "form-control", placeholder: "Search Notes" %>
<%= submit_tag "Search Notes", title: :nil, class: "btn btn-info search-button" %>
<% end %>
</div>
</div>
  • That’s all you need to implement a simple search to your Ruby on Rails application, note I’m using Bootstrap for my front end, you don’t have to, but you can if you want.

If you have any questions or comments, please leave them below.

Add Devise Bootstrap Views

I just found out about this Devise gem that gives your Devise view pages a much better look. Make sure you already have Devise installed. Since I had already installed the normal Devise views I decided to remove them first, not sure if it makes a difference, however, it worked just fine. So assuming you have already installed the normal Devise views ie. assuming your already ran $ rails g devise:views you can start from the first step below. Otherwise just skip to the second step. You can also go straight to the source by clicking on the link I’ve provided below, it’s a very simple implementation and the author provides clear documentation and it is very easy to follow.

#####Run the following command to remove the devise views if you’ve already installed them

1
$ rails d devise:views

#####Add the gem below to your Gemfile

1
gem 'devise-bootstrap-views'

#####Run the command below

1
$ bundle

#####Open your application.css file and add the code below

1
*= require devise_bootstrap_views

#####Run the following command to install the required translations in your config/locales. Read more …

1
$ rails g devise:views:locale it

#####Run the following command to copy all views to your application. This will allow you to modify your files.
For other templates such as HAML click here scroll down to Customizing Views .

#####If you’re using HAML, like I do, run the following

1
$ rails g devise:views:bootstrap_haml_templates

#####Otherwise run the following for ERB

1
$ rails g devise:views:bootstrap_templates

Learn more about this great time saving gem here Devise Bootstrap Views. If you have any questions or comments, please leave them below.