Looking to implement a prototype or a Minimum Viable Product (MVP) at your startup fast? You’re on the right step-by-step guide then. Through these paragraphs, we will prove how using a theme or a template to start your project can help you reduce your development effort.
We strongly recommend this option because it eases the process and reduces time-to-development. There are many theme and template options that can be used for any industry and that can perfectly meet your needs. Here’s a list of just three platforms where you can find the right template for you:
At Eagerworks, we’re used to choosing bootstrap for our own rails projects. Therefore, for this tutorial, we’re going to focus on those templates that use this library─yes, we only recommend what we truly use, this guide is eagerworks-tested. We had a hard time selecting the theme ─because there are plenty of pretty good examples to try─but after a while, we’ve decided to go with this open-source theme: AdminKit.
There aren’t a lot of requisites to start this step-by-step guide. You just need to check out that you have ruby 3 and bundler installed. And, for sure, an npm above version 7. Done? Then we are good to jump into our tutorial.
We are going to explain each step, command, and code we’ve used to integrate a bootstrap theme in rails 7. This means we’re going to go through all the way together.
To create a new rails project with bootstrap, please run the following commands:
gem install jsbundling-rails rails new admin_template --css=bootstrap cd admin_template
Once we’re done with creating the rails project, it’s time to build some space to create the root route and welcome controller. We just simply have to add this line into config/routes.rb:
Then, we have to create the controller, so get this into app/controllers/welcome_controller.rb:
class WelcomeController < ApplicationController def index; end end
Now we have to create an empty file for the welcome index view into app/views/welcome/index.html.rb.
Here we have to copy the dashboard html into the rails project, which means copying the content of the theme file static/index.html and then pasting it into app/views/welcome/index.html.erb.
Now we have the chance to run our server and verify that the html is working─we should be able to see it. Remember that we don’t have any styles yet.
To continue, we have to move content from app/assets/stylesheets/application.bootstrap.scss and modify some of the imports in order to use the libraries that we’ve already installed. A little help: our /application.bootstrap.scss should look like this:
// Variables @import "1-variables/app"; // Bootstrap @import 'bootstrap/scss/bootstrap'; // Theme mixins @import "2-mixins/button"; // Theme components @import "3-components/avatar"; @import "3-components/buttons"; @import "3-components/card"; @import "3-components/chart"; @import "3-components/content"; @import "3-components/dropdown"; @import "3-components/feather"; @import "3-components/footer"; @import "3-components/hamburger"; @import "3-components/list-group"; @import "3-components/main"; @import "3-components/navbar"; @import "3-components/reboot"; @import "3-components/sidebar"; @import "3-components/sizing"; @import "3-components/stat"; @import "3-components/tables"; @import "3-components/type"; @import "3-components/wrapper"; // Theme utilities @import "4-utilities/cursors"; // 3rd party plugins @import "jsvectormap/src/scss/jsvectormap"; @import "simplebar/src/simplebar"; @import "flatpickr/dist/flatpickr"; // 3rd party plugin styles @import "5-vendor/flatpickr"; @import "5-vendor/simplebar";
Pay special attention to bootstrap, jsvectormap, simplebar, and flatpickr imports. See how we have changed them?
Now it’s key that we erase <head> and <body> html tags from app/views/welcome/index.html.erb and that we move important head content to app/views/layouts/application.html.er. Here’s how the layout should look like:
To install all the js libraries needed by using yarn, we have to run these commands:
yarn add email@example.com
yarn add firstname.lastname@example.org
yarn add email@example.com
yarn add firstname.lastname@example.org
yarn add email@example.com
// Entry point for the build script in your package.json import "@hotwired/turbo-rails" import "./controllers" import * as bootstrap from "bootstrap" import "./modules/sidebar" import "./modules/theme" import "./modules/feather" // Charts import "./modules/chartjs" // Forms import "./modules/flatpickr" // Maps import "./modules/vector-maps"
It’s key that we use `image_tag` instead of img html tags, so, we must replace all img html tags in our app/views/welcome/index.html.erb file for something like this:
<%= image_tag "avatars/avatar-4.jpg", class: "avatar img-fluid rounded-circle", alt: "Christina Mason" %>
One last recommendation is to move the sidebar, navbar, and footer to partials, to reuse them.
See? In less than ten steps, you can now enjoy all the pre-designed views and components to implement your MVP faster than ever while keeping its good appearance. Want to get some more guides? Explore our blog.