Explain to me a Sinatra setup for dummy's for a preview of html/css code

A word of warning up front: I do not know even the ruby basics, but I'm trying to learn more and more of the world of shell scripting this year.

I saw this Vimeo video of Ben Schwarz and immediately thought that I'd like to use such a tool to debug my sass and haml files.

So this is a call to help me to grasp the concept of Sinatra.

What I want is a simple way to output the code of my index.html to check if all the haml magic was applied correctly - so it should function as a source viewer that gives me live updates. I'd prefer it if Sinatra simply looked at the files that LiveReload already rendered (c.f. index.html) in my project folder.

Update: This is a screenshot of the Vimeo Video. It shows just the raw CSS output of a Sass file. This is what I'd like to have for my Haml and Sass code, or better for the output files that are already rendered by LiveReload as HTML and CSS.

I looked at the source file from @benschwarz at his github, but I wasn't even with his own example I'm only getting the standard: "Sinatra doesn’t know this ditty." So transferring this to work with html is still out of my reach.

What I did so far:

I setup my project as usual in ~/Sites/projectname
I setup RVM and install all the gems I need
- Sass, Compass, Haml - the output gets compiled via LiveReload
- Sinatra
I created myapp.rb in ~/Sites/projectname with the following content:


    # myapp.rb

    require 'sinatra'

    set :public_folder, '/'

    get '/' do
      File.read(File.join('public', 'index.html'))
    end

Whatever, I fired up Sinatra and checked http://localhost:4567/ – this didn't work because I do not know how to set the public_folder to ~/Sites/projectname.

Afterthoughts:

So I went on to search the net, but my limited knowledge of Ruby put my attempt of an successful research to an immediate halt.

Here are some sites I stumpled upon which are obvioulsy close to the solution I need, but… like I told you in the first sentence: if the solution was a book, I'd need the "For Dummies" version.

Obvioulsy the reference documentation of Sinatra would help me, but I don't speak the language, hence, I don't get the lingo.

Solution

About public folder:

The public_folder is relative to your app file myapp.rb. If you have a public folder inside the projectname folder, this is your public folder. If you have your css, js and image files in another folder, say, includes under project_name, then you need to change the line:

# Actually, you need to remove the line above from myapp.rb as it is.
# The line means that the public folder which is used to have css, js and 
# image files under '/' and that means that even myapp.rb is visible to everyone.

set :public_folder, '/'

# to:
set :public_folder, File.dirname(__FILE__) + '/includes'

And that will serve up css, js and/or image files from the project_name/includes folder instead of project_name/public folder.

Reading the html file:

Reading the html files does not depend on the public folder settings. These need not be inside the public folder.

get '/' do
  File.read(File.dirname(__FILE__) + '/index.html')
  # This says that the app should read the index.html
  # Assuming that both myapp.rb and index.html are in the same folder.
  # incase the html files are inside a different directory, say, html, 
  # change that line to:
  # File.read(File.dirname(__FILE__) + '/html/index.html')

  # Directory structure sample:

  # project_name
  # | - myapp.rb
  # | - index.html (and not html/index.html etc.)
  # | /public (or includes incase the css, js assets have a different location)
  # | | /css
  # | | /js
  # | | /images
end

To get the html output inside the browser

After the file is read, typically, this will be your string: "<html><head></head><body></body></html>"

Without escaping the string, the browser renders the html string as html (no pun) and that's why you won't see any text. To escape the html, you can use the CGI class provided by Ruby (hat tip). So, in the end, this will be your snippet:

get '/' do
  CGI::escapeHTML(File.read(File.dirname(__FILE__) + 'index.html'))
end

But that will spit out the html file in a single line. To clean it up,

# myapp.rb

get '/' do
  @raw_html = CGI::escapeHTML(File.read(File.dirname(__FILE__) + 'index.html'))
end

# Using inline templates to keep things simple.
# get '/' do...end gets the index.erb file and hence, in the inline template,
# we need to use the @@ index representation. If we say get '/home' do...end,
# then the inline template will come under @@ home. All the html/erb between 
# two "@@"s will be rendered as one template (also called as view).

# The <%= @raw_html %>spews out the entire html string read inside the "get" block

__END__

@@ index
<html>
  <head></head>
    <body>
      <pre>
        <%= @raw_html %>
      </pre>
    </body>
</html>