CODEWITHSUNDEEP
javascriptcssrubysinatra
John Geliberte
John Geliberte

Reputation: 1025

Importing css and js files on sinatra

Hi im currently creating a small app that uses bootstrap and jquery and im having a little problem regarding importing the css and js files.

this is my layout.erb looks like.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Portfolio</title>
    <link href="public/css/bootstrap.min.css" rel="stylesheet">
    <script src="public/js/bootstrap.min.js"></script>
    <script src="public/js/jquery-3.1.0.min.js"></script>

</head>
<body>
    <header>
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <ul class="nav navbar-nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Projects & Tutorials</a></li>
                    <li><a href="#">The Division Highlights</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
                <p class="navbar-text navbar-right"><a href="#" class="navbar-link"><span class="glyphicon glyphicon-user"></span> Login / Signup</a></p>
            </div>
        </nav>
    </header>

    <section>
        <%= yield %>
    </section>

    <footer>
        <div class="panel panel-default">
            <div class="panel-footer">&copy; Copywrite JDG</div>
        </div>
        </footer>
</body>
</html>

here is where i configure the files for my views folder

require 'rubygems'
require 'sinatra'
require_relative './app'

module Portfolio

  class MainRoutes < Sinatra::Base

    before do
      @user_authentication = Portfolio::Main
    end

    configure do
      set :views          , File.expand_path('../../../Portfolio-FE/views', __FILE__)
      set :root           , File.dirname(__FILE__)
    end

    helpers do
      include Rack::Utils
      alias_method :h, :escape_html
    end

    get '/' do
      erb :index
    end
  end
end

and this is what my Files looks like.

enter image description here

the css and js is not being imported in the project and i wonder why.

thanks guys.

Upvotes: 0

Views: 416

Answers (2)

kgpdeveloper
kgpdeveloper

Reputation: 2119

Apart from setting the public folder, you might want to use Sprockets.

I have an example app here: https://github.com/katgironpe/simple-sinatra-mvc

http://www.sinatrarb.com/configuration.html

set :root, File.dirname(__FILE__)
set :public_folder, Proc.new { File.join(root, "static") }

Follow the official guides. Don't forget to set root of your app.

Upvotes: 0

John Geliberte
John Geliberte

Reputation: 1025

I figured out the answer,

Just set the public folder like this:

set :public          , File.expand_path('../../../Portfolio-FE/public', __FILE__)

and import the files like this.

<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-3.1.0.min.js"></script>

Upvotes: 1

Related Questions