DEV Community

Cover image for Simple authentication and styling in beginner Rails 6 project
bbborisk
bbborisk

Posted on

Simple authentication and styling in beginner Rails 6 project

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
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

rails generate devise User
Enter fullscreen mode Exit fullscreen mode

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

rails db:migrate
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

and application.js

//= require twitter/bootstrap
Enter fullscreen mode Exit fullscreen mode

Also, include both files in manifest.js

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

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

rails g bootstrap:layout application
Enter fullscreen mode Exit fullscreen mode

and then same for devise

rails g devise:views:locale en
Enter fullscreen mode Exit fullscreen mode
rails g devise:views:bootsrap_templates
Enter fullscreen mode Exit fullscreen mode

That should do it.

In my application_controller.rb I added the before_action for authentication

before_action :authenticate_user! 
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)