Learn to Code via Tutorials on Repl.it!

← Back to all posts
Want to use coffeescript in your HTML webpages on REPLit? Look no further!
TheOneAndOnly-

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 index.coffee 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:

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):

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!)

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:

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!

Voters
DynamicSquid
Comments
hotnewtop
ch1ck3n

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

DynamicSquid

Cool!