Skip to content
Sign upLog in
← Back to Community

Want to use coffeescript in your HTML webpages on REPLit? Look no further!

Profile icon

Hello Everyone! This is a pretty simple tutorial, so I'm sure you'll get through it in no time! REPLit, whilst having coffeescript support, has more of an interpreter than full blown support like typescript has (and even then it's the same kind of leap to want to use it on webpages) and in reality I'd rather code coffeescript on Atom than try and figure out how to do it on REPLit. Alas, I was away from my computer (and Atom) so I gave it shot. Here's how you can too!

First, we'll need a Node.js repl. Make one now! Next, we will need a bit of setup. Your main page will need to be in a folder in the repl, I'm calling it "index", and of course you need your index.html in there as well as everything else. put your file in there too or whatever you'd like to name it.
Now we head into index.js in the root of the repl. We'll start with a couple of requires:

const fs = require("fs"); const path = require("path"); const coffee = require("coffeescript"); const express = require("express");

Now, we need to go through every file in a folder and compile it. As a good programmer you'll need to know how to navigate Stack Overflowyour web browser to find answers to questions, and that's what I did to get the code for looping (recursively!) through all the files in a folder (matching a regex):

function fromDir(startPath, filter, callback){ if (!fs.existsSync(startPath)){ // Make sure it exists console.log("no dir ", startPath); return; } var files = fs.readdirSync(startPath); // Read it, now. for(var i = 0; i < files.length; i++){ var filename = path.join(startPath, files[i]); var stat = fs.lstatSync(filename); // resolve it's path and see what kind of file it is. if (stat.isDirectory()){ // If it's a directory, recurse fromDir(filename, filter, callback); //recurse } else if (filter.test(filename)) callback(filename); // Otherwise, run the callback. } }

This code is easy enough to use, startPath is meant to be a string locating the folder, filter is meant to be a regex, and callback is a function run for every file. /\.coffee$/ will easily target every .coffee file in the folders. Now, we can write a function to compile each file into a .js file with the same name, in the same folder the .coffee file is. (Of course, if you want something more complex go for it!)

fromDir("./index", /\.coffee$/, function(filename){ // Compile every coffee file in the index folder to a .js file, in the same nested folder. fs.readFile(filename, 'utf-8', function(err, data){ if (err) { console.log(err); return; } var newName = filename.split(".").slice(0, -1).join(".") + ".js"; var compiled = "// Compiled from Coffeescript (" + filename + ")\n" + coffee.compile(data); fs.writeFile(newName, compiled, 'utf-8', (err) => {if (err) console.log(err)}); }); });

I added a small header in case I EVER needed to manually write a .js file, but I never did in my case (hindsight is 20/20), so you don't need to include it if you don't want to.

Congratulations! That was the hard part! Now we need to set up the express server, which is done in three lines of code:

const app = express(); app.use('/', express.static(path.join(__dirname, "./index"))); app.listen(3000);

Basically this makes a web server and serves it's homepage through the index folder.

When you click run, your webpage will open up and load! Try the attached repl to see it in action! Change the coffeescript file! Watch it compile! Pat yourself on the back and have a cookie!

Thanks for reading through my tutorial! Hoped it helped!

- TheOneAndOnly

P.S.: I bet you could try this method to run a webpage off of Typescript but I haven't tried. If you do, let me know, please! I would like to see it!

Profile icon
Profile icon

Cool! I don't know cofeescript but i can probably make a website using dogescript!! thanks!

Profile icon