I'm trying to get coffeescript working with Sinatra. I'm new to both technologies so this is probably something silly. My problem seems to be that the coffeescript compiles to javascript but doesn't execute on page, instead appearing as html.
#sinatra app
require 'coffee-script'
get "/test.js" do
coffee :hello
end
#hello.coffee
alert "hello world"
#My page (/test.js) doesn't execute the js - just displays the code
#On screen in the browser I get this:
(function() {
alert("hello world");
}).call(this);
#In the HTML I get this within the body tags
<pre style="word-wrap: break-word; white-space: pre-wrap;">(function() {
alert('hello world!');
}).call(this);
</pre>
4 Answers 4
Hmm... it looks like your example is based on this Sinatra documentation. But for some reason, Sinatra is trying to serve the .js file as HTML, and is preprocessing it accordingly. Are you by any chance setting content_type elsewhere in your application? Try changing your code to
get "/test.js" do
content_type "text/javascript"
coffee :hello
end
You could also try a completely different approach, using either Rack::Coffee or Barista to compile your CoffeeScript to JavaScript automatically at the Rack level. That might be easier if you have a large number of CoffeeScript files anyway.
Edit: After posting the above, it struck me that I'm probably just misinterpreting your markup. Is what you see when you load the page test.js in your browser just
alert('hello world!');
? If so, everything is working fine. JavaScript is only going to run in your browser when it's in an HTML page between <script> tags, or referenced via <script src="test.js"></script>. So in addition to your existing code, add
get "/alert", :provides => 'html' do
'<script type=src="test.js"></script>'
end
then open that alert address in your browser, and the script should run.
1 Comment
From sinatra-coffee-script-template I was just looking for the same setup.
require 'rubygems'
require 'bundler/setup'
require 'sinatra'
require 'coffee-script'
get '/' do
erb :index
end
get '/application.js' do
coffee :application
end
then in application.coffee
$(document).ready ->
$('button:first').click ->
$('body').toggleClass 'dark', 'light'
index.erb
<h1>I'm living the dream</h1>
<button>Click me</button>
layout.erb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Sinatra Coffee-Script Template</title>
<style type="text/css">
.dark {
background: #2F2F2F;
color: #7F7F7F;
}
.light {
background: #EEEEEE;
color: #2F2F2F;
}
</style>
</head>
<body>
<%= yield %>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script src="/javascripts/listeners.js" type="text/javascript"></script>
</body>
</html>
1 Comment
I usually just setup a watcher on my CoffeeScript files while developing coffee -wc dirname/ and then deploy the compiled JS files to production. It's not ideal, but it's less complicated in some ways and removes the dependency on Node.JS from my production server (which in my case is Heroku.)
4 Comments
coffee-script gem (now a default in Rails 3.1) doesn't depend on Node. It runs CoffeeScript's compiler (which is a JavaScript file) via ExecJS, which in turn will look for the therubyracer gem; that's a JavaScript interpreter with no dependencies. Totally Heroku-friendly.Use a gem like sinatra-asset-snack (https://rubygems.org/gems/sinatra-asset-snack) or even better, use a bootstrap to start your project so you don't have to worry about setting up all the plumbing (https://github.com/benkitzelman/sinatra-backbone-bootstrap)
"hello world"vs."hello kids".