Hello dear.
PREFACE: I know that not everyone likes to read long texts, but please read them very much and if possible help solve the problem, it will help many people to inspire in web development. Regards Arthur
Description: I just got out of long ruby trainings and finally got to the Rails framework. I already have a little idea about the MVC technology and I think I can backend at least crutches, thereby taking slow steps to practice and memorize important things about this framework. Now I am confronted with an unpleasant wall that is slowly destroying my self-confidence and ask you to help me 1 understand / prompt / show how the ready-made template on the bootstrap is correctly connected to the rails
SHORTLY IN TWO LINES ABOUT YOUR PROBLEM: I just want to stretch the ready bootstrap pattern onto the rail application. At the moment of connecting the template and launching the rails server, I do not connect the fonts bootstrap folders and other important components of the template.
STEP BY STEP THAT AND HOW I DID:
I use the program RubyMine
1 - Found the basis of my future project: Template ADMINLTE
links (of the source): a visual view of the template https://almsaeedstudio.com
direct link to download the template (of the source): https://almsaeedstudio.com/download/AdminLTE-master
2 - downloaded the template
3 - create a new application File-> new project -> New Application
Ruby SDK: Ruby 2.1.8
Rails Version: 4.2.5.1
4 - I run bundle install
#=> C:\Users\ruby\RubymineProjects\untitled9>bundle install Using rake 12.0.0 Using i18n 0.7.0 Using json 1.8.3 Using minitest 5.10.1 Using thread_safe 0.3.5 Using builder 3.2.2 Using erubis 2.7.0 Using mini_portile2 2.1.0 Using rack 1.6.5 Using mime-types-data 3.2016.0521 Using arel 6.0.4 Using debug_inspector 0.0.2 Using byebug 9.0.6 Using coffee-script-source 1.12.2 Using execjs 2.7.0 Using thor 0.19.4 Using concurrent-ruby 1.0.4 Using multi_json 1.12.1 Using bundler 1.13.7 Using rdoc 4.3.0 Using sass 3.4.23 Using tilt 2.0.5 Using sqlite3 1.3.12 Using turbolinks-source 5.0.0 Using tzinfo 1.2.2 Using nokogiri 1.7.0 Using rack-test 0.6.3 Using mime-types 3.1 Using binding_of_caller 0.7.2 Using coffee-script 2.4.1 Using uglifier 3.0.4 Using sprockets 3.7.1 Using sdoc 0.4.2 Using turbolinks 5.0.1 Using activesupport 4.2.5.1 Using tzinfo-data 1.2016.10 Using loofah 2.0.3 Using mail 2.6.4 Using rails-deprecated_sanitizer 1.0.3 Using globalid 0.3.7 Using activemodel 4.2.5.1 Using jbuilder 2.6.1 Using rails-html-sanitizer 1.0.3 Using rails-dom-testing 1.0.8 Using activejob 4.2.5.1 Using activerecord 4.2.5.1 Using actionview 4.2.5.1 Using actionpack 4.2.5.1 Using actionmailer 4.2.5.1 Using railties 4.2.5.1 Using sprockets-rails 3.2.0 Using coffee-rails 4.1.1 Using jquery-rails 4.2.2 Using rails 4.2.5.1 Using sass-rails 5.0.6 Using web-console 2.3.0 Bundle complete! 12 Gemfile dependencies, 56 gems now installed. Use `bundle show [gemname]` to see where a bundled gem is installed. 5 - I transfer all the files of the downloaded ADMINLTE template to the assets folder in my rail application
I will transfer folders such:
-bootstrap -build -dist -pages -plugins
6 In gemfile add gems
gem 'bootstrap-sass' gem 'jquery-rails' gem 'font-awesome-sass' source 'https://rails-assets.org/' do gem 'rails-assets-adminlte' end 7 - I go to the rails folder app / assets / javascripts / application.js and enter:
//= require adminlte As a result, the file began to look like this:
//= require jquery //= require jquery_ujs //= require adminlte //= require turbolinks //= require_tree . 8 - go to rails app / assets / stylesheets / application.css
I enter:
*= require adminlte *= require skin-blue As a result, the file began to look like this:
/* *= require adminlte *= require skin-blue *= require_tree . *= require_self */ 9 - I create a new file in rails app / assets / stylesheets / custom.css.scss and connect there:
@import "bootstrap-sprockets"; @import "bootstrap"; @import "font-awesome-sprockets"; @import "font-awesome"; 10 - Now, from the ADMINLTE template, I take the file called skin-blue.css from the dist / css / skin path and drop it into the assets / stylesheets / rails directory
11 - Now from the ADMINLTE template, I open the source code of the file with the name starter.html and take only the body of BODY from there and everything that is between it
and all of this I transfer to the rail app / views / layouts / application.html.erb file I naturally insert only where the body should be: I will also say in advance that I changed the body container by adding this content there (
<body class="skin-blue sidebar-mini">
) and the file app / views / layouts / application.html.erb looks like this:
<!DOCTYPE html> <html> <head> <title>Untitled9</title> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> </head> <body class="skin-blue sidebar-mini"> <div class="wrapper"> <!-- Main Header --> <header class="main-header"> <!-- Logo --> <a href="index2.html" class="logo"> <!-- mini logo for sidebar mini 50x50 pixels --> <span class="logo-mini"><b>A</b>LT</span> <!-- logo for regular state and mobile devices --> <span class="logo-lg"><b>Admin</b>LTE</span> </a> <!-- Header Navbar --> <nav class="navbar navbar-static-top" role="navigation"> <!-- Sidebar toggle button--> <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button"> <span class="sr-only">Toggle navigation</span> </a> <!-- Navbar Right Menu --> <div class="navbar-custom-menu"> <ul class="nav navbar-nav"> <!-- Messages: style can be found in dropdown.less--> <li class="dropdown messages-menu"> <!-- Menu toggle button --> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-envelope-o"></i> <span class="label label-success">4</span> </a> <ul class="dropdown-menu"> <li class="header">You have 4 messages</li> <li> <!-- inner menu: contains the messages --> <ul class="menu"> <li><!-- start message --> <a href="#"> <div class="pull-left"> <!-- User Image --> <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"> </div> <!-- Message title and timestamp --> <h4> Support Team <small><i class="fa fa-clock-o"></i> 5 mins</small> </h4> <!-- The message --> <p>Why not buy a new awesome theme?</p> </a> </li> <!-- end message --> </ul> <!-- /.menu --> </li> <li class="footer"><a href="#">See All Messages</a></li> </ul> </li> <!-- /.messages-menu --> <!-- Notifications Menu --> <li class="dropdown notifications-menu"> <!-- Menu toggle button --> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-bell-o"></i> <span class="label label-warning">10</span> </a> <ul class="dropdown-menu"> <li class="header">You have 10 notifications</li> <li> <!-- Inner Menu: contains the notifications --> <ul class="menu"> <li><!-- start notification --> <a href="#"> <i class="fa fa-users text-aqua"></i> 5 new members joined today </a> </li> <!-- end notification --> </ul> </li> <li class="footer"><a href="#">View all</a></li> </ul> </li> <!-- Tasks Menu --> <li class="dropdown tasks-menu"> <!-- Menu Toggle Button --> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-flag-o"></i> <span class="label label-danger">9</span> </a> <ul class="dropdown-menu"> <li class="header">You have 9 tasks</li> <li> <!-- Inner menu: contains the tasks --> <ul class="menu"> <li><!-- Task item --> <a href="#"> <!-- Task title and progress text --> <h3> Design some buttons <small class="pull-right">20%</small> </h3> <!-- The progress bar --> <div class="progress xs"> <!-- Change the css width attribute to simulate progress --> <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"> <span class="sr-only">20% Complete</span> </div> </div> </a> </li> <!-- end task item --> </ul> </li> <li class="footer"> <a href="#">View all tasks</a> </li> </ul> </li> <!-- User Account Menu --> <li class="dropdown user user-menu"> <!-- Menu Toggle Button --> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <!-- The user image in the navbar--> <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image"> <!-- hidden-xs hides the username on small devices so only the image appears. --> <span class="hidden-xs">Alexander Pierce</span> </a> <ul class="dropdown-menu"> <!-- The user image in the menu --> <li class="user-header"> <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"> <p> Alexander Pierce - Web Developer <small>Member since Nov. 2012</small> </p> </li> <!-- Menu Body --> <li class="user-body"> <div class="row"> <div class="col-xs-4 text-center"> <a href="#">Followers</a> </div> <div class="col-xs-4 text-center"> <a href="#">Sales</a> </div> <div class="col-xs-4 text-center"> <a href="#">Friends</a> </div> </div> <!-- /.row --> </li> <!-- Menu Footer--> <li class="user-footer"> <div class="pull-left"> <a href="#" class="btn btn-default btn-flat">Profile</a> </div> <div class="pull-right"> <a href="#" class="btn btn-default btn-flat">Sign out</a> </div> </li> </ul> </li> <!-- Control Sidebar Toggle Button --> <li> <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a> </li> </ul> </div> </nav> </header> <!-- Left side column. contains the logo and sidebar --> <aside class="main-sidebar"> <!-- sidebar: style can be found in sidebar.less --> <section class="sidebar"> <!-- Sidebar user panel (optional) --> <div class="user-panel"> <div class="pull-left image"> <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"> </div> <div class="pull-left info"> <p>Alexander Pierce</p> <!-- Status --> <a href="#"><i class="fa fa-circle text-success"></i> Online</a> </div> </div> <!-- search form (Optional) --> <form action="#" method="get" class="sidebar-form"> <div class="input-group"> <input type="text" name="q" class="form-control" placeholder="Search..."> <span class="input-group-btn"> <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i> </button> </span> </div> </form> <!-- /.search form --> <!-- Sidebar Menu --> <ul class="sidebar-menu"> <li class="header">HEADER</li> <!-- Optionally, you can add icons to the links --> <li class="active"><a href="#"><i class="fa fa-link"></i> <span>Link</span></a></li> <li><a href="#"><i class="fa fa-link"></i> <span>Another Link</span></a></li> <li class="treeview"> <a href="#"><i class="fa fa-link"></i> <span>Multilevel</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <ul class="treeview-menu"> <li><a href="#">Link in level 2</a></li> <li><a href="#">Link in level 2</a></li> </ul> </li> </ul> <!-- /.sidebar-menu --> </section> <!-- /.sidebar --> </aside> <!-- Content Wrapper. Contains page content --> <div class="content-wrapper"> <!-- Content Header (Page header) --> <section class="content-header"> <h1> <%= yield %> </h1> <ol class="breadcrumb"> <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li> <li class="active">Here</li> </ol> </section> <!-- Main content --> <section class="content"> <!-- Your Page Content Here --> </section> <!-- /.content --> </div> <!-- /.content-wrapper --> <!-- Main Footer --> <footer class="main-footer"> <!-- To the right --> <div class="pull-right hidden-xs"> Anything you want </div> <!-- Default to the left --> <strong>Copyright © 2016 <a href="#">Company</a>.</strong> All rights reserved. </footer> <!-- Control Sidebar --> <aside class="control-sidebar control-sidebar-dark"> <!-- Create the tabs --> <ul class="nav nav-tabs nav-justified control-sidebar-tabs"> <li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li> <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <!-- Home tab content --> <div class="tab-pane active" id="control-sidebar-home-tab"> <h3 class="control-sidebar-heading">Recent Activity</h3> <ul class="control-sidebar-menu"> <li> <a href="javascript::;"> <i class="menu-icon fa fa-birthday-cake bg-red"></i> <div class="menu-info"> <h4 class="control-sidebar-subheading">Langdon's Birthday</h4> <p>Will be 23 on April 24th</p> </div> </a> </li> </ul> <!-- /.control-sidebar-menu --> <h3 class="control-sidebar-heading">Tasks Progress</h3> <ul class="control-sidebar-menu"> <li> <a href="javascript::;"> <h4 class="control-sidebar-subheading"> Custom Template Design <span class="pull-right-container"> <span class="label label-danger pull-right">70%</span> </span> </h4> <div class="progress progress-xxs"> <div class="progress-bar progress-bar-danger" style="width: 70%"></div> </div> </a> </li> </ul> <!-- /.control-sidebar-menu --> </div> <!-- /.tab-pane --> <!-- Stats tab content --> <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div> <!-- /.tab-pane --> <!-- Settings tab content --> <div class="tab-pane" id="control-sidebar-settings-tab"> <form method="post"> <h3 class="control-sidebar-heading">General Settings</h3> <div class="form-group"> <label class="control-sidebar-subheading"> Report panel usage <input type="checkbox" class="pull-right" checked> </label> <p> Some information about this general settings option </p> </div> <!-- /.form-group --> </form> </div> <!-- /.tab-pane --> </div> </aside> <!-- /.control-sidebar --> <!-- Add the sidebar's background. This div must be placed immediately after the control sidebar --> <div class="control-sidebar-bg"></div> </div> <!-- ./wrapper --> <!-- REQUIRED JS SCRIPTS --> <!-- jQuery 2.2.3 --> <script src="plugins/jQuery/jquery-2.2.3.min.js"></script> <!-- Bootstrap 3.3.6 --> <script src="bootstrap/js/bootstrap.min.js"></script> <!-- AdminLTE App --> <script src="dist/js/app.min.js"></script> </body> </html> 11 - I run bundle install
C:\Users\ruby\RubymineProjects\untitled9>bundle install Using rake 12.0.0 Using i18n 0.7.0 Using json 1.8.3 Using minitest 5.10.1 Using thread_safe 0.3.5 Using builder 3.2.2 Using erubis 2.7.0 Using mini_portile2 2.1.0 Using rack 1.6.5 Using mime-types-data 3.2016.0521 Using arel 6.0.4 Using debug_inspector 0.0.2 Using byebug 9.0.6 Using coffee-script-source 1.12.2 Using execjs 2.7.0 Using thor 0.19.4 Using concurrent-ruby 1.0.4 Using multi_json 1.12.1 Using bundler 1.13.7 Using rdoc 4.3.0 Using sass 3.4.23 Using tilt 2.0.5 Using sqlite3 1.3.12 Using turbolinks-source 5.0.0 Using tzinfo 1.2.2 Using nokogiri 1.7.0 Using rack-test 0.6.3 Using mime-types 3.1 Using binding_of_caller 0.7.2 Using coffee-script 2.4.1 Using uglifier 3.0.4 Using sprockets 3.7.1 Using sdoc 0.4.2 Using turbolinks 5.0.1 Using activesupport 4.2.5.1 Using tzinfo-data 1.2016.10 Using loofah 2.0.3 Using mail 2.6.4 Using rails-deprecated_sanitizer 1.0.3 Using globalid 0.3.7 Using activemodel 4.2.5.1 Using jbuilder 2.6.1 Using rails-html-sanitizer 1.0.3 Using rails-dom-testing 1.0.8 Using activejob 4.2.5.1 Using activerecord 4.2.5.1 Using actionview 4.2.5.1 Using actionpack 4.2.5.1 Using actionmailer 4.2.5.1 Using railties 4.2.5.1 Using sprockets-rails 3.2.0 Using coffee-rails 4.1.1 Using jquery-rails 4.2.2 Using rails 4.2.5.1 Using sass-rails 5.0.6 Using web-console 2.3.0 Bundle complete! 12 Gemfile dependencies, 56 gems now installed. Use `bundle show [gemname]` to see where a bundled gem is installed. 12 - I create a home controller, rails g controller home
13 - I create the index method in the controller
def index end 14 - I create a view index.html.erb
15 - paving the route in the routs
root "home#index" 16 - I start rails server
17 - I go to the browser at localhost: 3000 and get an error:
Sprockets::FileNotFound in Home#index Showing C:/Users/ruby/RubymineProjects/untitled9/app/views/layouts/application.html.erb where line #5 raised: couldn't find file 'adminlte' with type 'text/css' Checked in these paths: C:/Users/ruby/RubymineProjects/untitled9/app/assets/bootstrap C:/Users/ruby/RubymineProjects/untitled9/app/assets/build C:/Users/ruby/RubymineProjects/untitled9/app/assets/dist C:/Users/ruby/RubymineProjects/untitled9/app/assets/images C:/Users/ruby/RubymineProjects/untitled9/app/assets/javascripts C:/Users/ruby/RubymineProjects/untitled9/app/assets/pages C:/Users/ruby/RubymineProjects/untitled9/app/assets/plugins C:/Users/ruby/RubymineProjects/untitled9/app/assets/stylesheets C:/Users/ruby/RubymineProjects/untitled9/vendor/assets/javascripts C:/Users/ruby/RubymineProjects/untitled9/vendor/assets/stylesheets C:/RailsInstaller/Ruby2.1.0/lib/ruby/gems/2.1.0/gems/jquery-rails-4.2.2/vendor/assets/javascripts C:/RailsInstaller/Ruby2.1.0/lib/ruby/gems/2.1.0/gems/coffee-rails-4.1.1/lib/assets/javascripts C:/RailsInstaller/Ruby2.1.0/lib/ruby/gems/2.1.0/gems/turbolinks-source-5.0.0/lib/assets/javascripts Rails.root: C:/Users/ruby/RubymineProjects/untitled9 18 - Strange before the error of this nebylo (Previously, the bootstrap folder fonts img and others gave in the console 404.
