One of the ways to run CoffeeScript (other than processing on the server or using the command line to pre-compile) is to run CoffeeScripts, directly, in-browser.
This simply means that you can write coffeescript inside the HTML document. It has the disadvantage of being near impossible to debug as the running code will be encased in a very large javascript eval statement.
Running CoffeeScript in-browser is therefore not encouraged by the Author of CoffeeScript (jashkenas) – to the extent that he preferred not to include my submission (or pull-request as it is known on GitHub) to improve the documentation for it. This may be reasonable, however I would like to put the documentation here.
To run your coffeescript inline:
- Tag your coffeescript with the type “text/coffeescript”
- Include coffee-script.js after all coffeescript on the page (this is the compiler that will evaluate and compile all coffeescript in order)
- The text contents of remote scripts (those referenced via src=”") cannot be accessed from the browser unless they are hosted on the same domain, and are capable of being accessed via an XMLHTTPRequest (which is how the compiler loads it)
And the main improvement to the documentation I wanted to make, an example:
<html>
<head>
<title>In-Browser test</title>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js”> </script>
<script type=”text/coffeescript”>
$ -> $(‘#header‘).css ‘background-color‘, ‘green‘
</script>
<script type=”text/javascript” src=”http://github.com/jashkenas/coffee-script/raw/master/extras/coffee-script.js”> </script>
</head>
<body>
<h1 id=”header” style=”color:white”>CoffeeScript is alive!</h1>
</body>
</html>
<head>
<title>In-Browser test</title>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js”> </script>
<script type=”text/coffeescript”>
$ -> $(‘#header‘).css ‘background-color‘, ‘green‘
</script>
<script type=”text/javascript” src=”http://github.com/jashkenas/coffee-script/raw/master/extras/coffee-script.js”> </script>
</head>
<body>
<h1 id=”header” style=”color:white”>CoffeeScript is alive!</h1>
</body>
</html>
And the corresponding output:
Posted by Jeremy Ashkenas on 2010/09/27 at 11:31 PM
One little addition to this: Remote scripts do work, but only if they are hosted on the same domain, and may be accessed via an XMLHTTPRequest. Still not recommended though.
Posted by PandaWood on 2010/09/28 at 6:54 AM
Thanks, I’ve updated the post to reflect that.
Posted by Aden Watts (@adenwatts) on 2011/09/17 at 8:53 AM
Peter, I was able to use this to play with CoffeeScript on Cloud9IDE, which currently doesn’t support compiling CoffeeScript into JavaScript. Thanks!
Posted by jarav on 2011/09/26 at 6:35 PM
Is there any way of including external Coffeescript files along with inline coffeescript to be compiled together into Javascript ? Thanks.
Posted by PandaWood on 2011/09/26 at 10:10 PM
Hi Jarav,
In my rubyann project, I use external as well as inline coffeescript, see here: https://github.com/PandaWood/rubyann/blob/master/demo.html
I remember there were some quirks in the way coffeescript controlled execution order, but these have apparently been fixed – https://github.com/jashkenas/coffee-script/pull/1277
Posted by Setup CoffeeScript in your local browser | !!"Adam Tal" on 2012/01/20 at 12:41 AM
[...] Running-Coffeescript-In-Browser [...]
Posted by muneeb mukhthar on 2012/02/14 at 7:16 PM
thats greta !!
Posted by Working with JQuery, AJAX, CoffeeScript and Node.js | Giant Flying Saucer on 2012/07/17 at 4:23 AM
[...] index.html file is written in JavaScript, you can actually write that in CoffeeScript as well. See this article for more information on [...]