Simple authentication and styling in beginner Rails 6 project

bbborisk — Fri, 24 Jan 2020 13:47:42 +0000

Ok so, here goes my first tech blog post. I've been trying to do this for a while, but just didn't have the courage to get my self to do it. So, this is a bit about how to do this thing and a bit about how to overcome imposter syndrome for absolute beginners.

Let's just dive in. I have started a project driven by my wife's and my need to systematize hundreds of children's books we have for our toddlers. And I know, we could've made this in a few excel sheets, but my goal here is to make something of my own, customizable and editable.

And I love rails, for it is so beginner-friendly, yet so powerful. First,
I generated the project

rails new ChildrensBooks

Rails 6 takes a bit longer to generate, but it has tons of features, which I am still learning about. After making the index page, the next thing is to add gems for authentication and bootstrap templates. so, in gemfile, add gems devise, devise-bootstrap-views and twitter-bootstrap-rails, which is simple and easy to use. You also need jquery-rails.

gem 'jquery-rails'
gem 'devise'
gem 'twitter-bootstrap-rails'
gem 'devise-bootstrap-views'

And, of course, install them with bundler - bundle install. Now, there are better ways to do this, but again, I'm doing this in the simplest way possible. Then, onto making model for the Users table.

In order to use devise, you must first install it with

rails generate devise:install

Then, generate Users model. Devise makes it so simple, also making all the routes in routes.rb file.

rails generate devise User

This is a perfect setup for me at this moment, no need for other configurations. so I just migrated the database.

rails db:migrate

The styling idea I got from some Udemy course I saw a while back, and it seems great now. It adds a twitter style outlook, and is both available for page layout and devise form aswell.
First, add the bootstrap requirements to the style resources file.
application.css:

 *= require twitter-bootstrap-static/bootstrap

and application.js

//= require twitter/bootstrap

Also, include both files in manifest.js

//= link_tree ../images
//= link_directory ../stylesheets .css
//= link application.js

Next, install the theme. I used static, but in the documentation of the gem you can find others as well.

rails generate bootstrap:install static

then, it is just the matter of adding views and updating the application.html.erb file.

rails g bootstrap:layout application

and then same for devise

rails g devise:views:locale en

rails g devise:views:bootsrap_templates

That should do it.

In my application_controller.rb I added the before_action for authentication

before_action :authenticate_user!

so, when I run the server, it takes me straight to the login screen. From there, you can make a user and, I guess, that is it.

So, the next thing for me is making a model for books. I know this isn't the most brilliant text or groundbreaking tutorial. It is basically my experience in making the starter code following the documentation in gems. But I hope it helps someone, and it really helped me break the ice in the community.

Feel free to get in touch, share your journey into coding world, share knowledge and tips for this newbie.

Cheers!

DEV Community: bbborisk

Simple authentication and styling in beginner Rails 6 project