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

Question

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.

not sure what you're trying to do. If all you want to do is serving static files you can use lighttpd or apache. Or even any browser. sass can be used with a daemon to monitor changes and converts automatically. — three, Sep 02 '12 at 19:58
I added a screen shot to clarify what my goal is. Basically I want to preview the generated raw html/css when developing locally. — patrick, Sep 03 '12 at 06:30
I'm sorry that it takes me so long to review your answers but currently I have another project which I need deal with first. Thanks for your submissions so far. — patrick, Sep 17 '12 at 19:50

score 2 · Accepted Answer · edited May 23 '17 at 11:47

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>

Thanks for your input @Kashyap, I've read [this Nettus article](http://net.tutsplus.com/tutorials/ruby/an-introduction-to-haml-and-sinatra/) yesterday and along with your post this made structuring a Sinatra app clear to me. /// However, I updated my question to make it a bit more clearer what my actual goal is, namely to render to raw output. — patrick, Sep 03 '12 at 06:42
Ah! The reason why you probably didn't get the output is that the html tags in the html file that is being read are rendered into the browser as tags and not as a string. I will update the answer. — Kashyap, Sep 03 '12 at 08:36
I just hadn't the time to wrap my head completely around it and dig deeper into Sinatra --- but since I felt bad for not accepting your great answers, I did a very basic and quick test run. Thanks for taking the time. I think I can modify this to work as I want it to. Also the GitHub repo of the from @benschwarz that I linked in the first post turned out to be a complete solution for displaying the css in a browser. — patrick, Oct 07 '12 at 16:46

score 0 · Answer 2 · answered Sep 02 '12 at 20:54

0

If you're trying to render an index.html file, I would try storing it in the /views directory with an .erb extension. Or use an inline template. Here is a great resource

answered Sep 02 '12 at 20:54

Dru

9,632
13
49
68

Thanks Dru, but I want the 'rendered' raw html output of a haml file to get displayed. I updated my question with a screen shot and a brief description to make this clearer. – patrick Sep 03 '12 at 06:44

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

2 Answers2

About public folder:

Reading the html file:

To get the html output inside the browser