2

I'm a newbie to ruby on rails and trying to build the Instagram-clone and I'm following a youtube tutorial. Click here for the tutorial

I used a third party template and loaded the bootstrap.min.scc file in vendors/assets/stylesheets/bootstrap.min.scc path and bootstrap.min.js in vendors/assets/javascripts/bootstrap.min.js

I've also referred these files in the app/assets/javascripts/application.js

Here is my application.js


//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery.min
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require bootstrap.min
//= require_tree .

Here is my application.css

 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require bootstrap.min
 *= require_self
 */

But when I try to start up the server. I get the error and the server doesn't start. Here is the error screenshot.

This is what is being recorded in logs

ActionView::Template::Error (couldn't find file 'bootstrap.min' with type 'text/css'
Checked in these paths: 
  /Users/mabhishek/rails_projects/instagram/app/assets/config
  /Users/mabhishek/rails_projects/instagram/app/assets/images
  /Users/mabhishek/rails_projects/instagram/app/assets/javascripts
  /Users/mabhishek/rails_projects/instagram/app/assets/stylesheets
  /Users/mabhishek/.rvm/gems/ruby-2.5.1/gems/jquery-rails-4.3.5/vendor/assets/javascripts
  /Users/mabhishek/.rvm/gems/ruby-2.5.1/gems/coffee-rails-4.2.2/lib/assets/javascripts
  /Users/mabhishek/.rvm/gems/ruby-2.5.1/gems/actioncable-5.2.4.2/lib/assets/compiled
  /Users/mabhishek/.rvm/gems/ruby-2.5.1/gems/activestorage-5.2.4.2/app/assets/javascripts
  /Users/mabhishek/.rvm/gems/ruby-2.5.1/gems/actionview-5.2.4.2/lib/assets/compiled
  /Users/mabhishek/.rvm/gems/ruby-2.5.1/gems/turbolinks-source-5.2.0/lib/assets/javascripts
  /Users/mabhishek/.rvm/gems/ruby-2.5.1/gems/rails-ujs-0.1.0/dist
  /Users/mabhishek/rails_projects/instagram/node_modules
  /Users/mabhishek/.rvm/gems/ruby-2.5.1/gems/bootstrap-sass-3.4.1/assets/stylesheets
  /Users/mabhishek/.rvm/gems/ruby-2.5.1/gems/bootstrap-sass-3.4.1/assets/javascripts
  /Users/mabhishek/.rvm/gems/ruby-2.5.1/gems/bootstrap-sass-3.4.1/assets/fonts
  /Users/mabhishek/.rvm/gems/ruby-2.5.1/gems/bootstrap-sass-3.4.1/assets/images):
    11:     <%= csrf_meta_tags %>
    12:     <%= csp_meta_tag %>
    13:     < link="vendor/assests/stylesheets/bootstrap.min.scss" rel="stylesheets">
    14:     <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    15:     <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    16: </head>
    17:   <body>

app/assets/stylesheets/application.css:14
app/views/layouts/application.html.erb:14:in `_app_views_layouts_application_html_erb__895371573775794232_70354650107640'

Adding config/application.rb

require_relative 'boot'

require 'rails/all'
require 'sprockets/railtie'

# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(*Rails.groups)

module InstagramClone
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 5.2

    # Settings in config/environments/* take precedence over those specified here.
    # Application configuration can go into files in config/initializers
    # -- all .rb files in that directory are automatically loaded after loading
    # the framework and any gems in your application.
  end
end

Here is the assets.rb

# Be sure to restart your server when you modify this file.

# Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = '1.0'

# Add additional assets to the asset load path.
# Rails.application.config.assets.paths << Emoji.images_path
# Add Yarn node_modules folder to the asset load path.
Rails.application.config.assets.paths += [
  Rails.root.join('vendor', 'assets').to_s
]

# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in the app/assets
# folder are already added.
# Rails.application.config.assets.precompile += %w( admin.js admin.css )

Can someone please help me out.

Abhishek
  • 87
  • 10
  • You have included `vendor/assests/stylesheets/bootstrap.min.scss` in the layout directly. Browsers don't understand scss. First remove it and try again. Also check https://stackoverflow.com/questions/25983283/how-to-load-vendor-asset-folder-in-rails-4 to get some hints – Amit Patel Apr 27 '20 at 03:23
  • @AmitPatel I've tried the solution mentioned in the above link. It's not working. – Abhishek Apr 27 '20 at 10:54
  • can you show us app/config/application.rb and app/config/initializers/assets.rb? my guess is that you haven't told rails to add /vendor to the assets pipeline. – NemyaNation Apr 27 '20 at 11:12
  • @NemyaNation I've added the application.rb and assets.rb. – Abhishek Apr 27 '20 at 13:30
  • Can you try `rails assets:precompile` and then restart your rails server and try again? – NemyaNation Apr 27 '20 at 15:00
  • 1
    @NemyaNation Thanks a lot worked!. But I'm getting unwanted things in the logs. – Abhishek Apr 27 '20 at 18:52
  • @MasettyAbhishek That's good to hear!, can you accept it as an answer? – NemyaNation Apr 27 '20 at 20:21
  • @MasettyAbhishek, let me know if you need anything else? – NemyaNation Apr 28 '20 at 16:16

1 Answers1

-1

You need to precompile your assets so that they are available in the assets pipeline.

Run the command: rails assets:precompile

Restart your rails server afterward.

NemyaNation
  • 983
  • 1
  • 12
  • 22