Embedding repl.it

In this wiki, I'll explain how to run repl.it on Heroku, which can then be embedded into any page using an iframe.

repl.it on Heroku

I started by forking the repl.it repository. You can see my fork here, which is running on Heroku here. You can see it running in an iframe here.

Submodules

repl.it uses jsrepl as a submodule. jsrepl also has submodules in its repo. To pull down all of the submodules run:

git submodule update --init --recursive

When writing this, the jsrepl submodule was linked to a commit that isn't up on github, so the above command may error. You can manually cd into the jsrepl directory and run git reset --hard and it will be set to the lastest commit. Then you can commit the change in the repl.it directory so it doesn't error on Heroku.

Dependencies

Now we need to set up repl.it's dependencies so it'll run on Heroku. Since the server is a node.js script, we'll create a package.json file for those dependencies (coffee-script, node and npm):

{
    "name": "node-example",
    "version": "0.0.1",
    "dependencies": {
         "coffee-script": "*"
    },
    "engines": {
        "node": "0.8.x",
        "npm": "1.1.x"
    }
}

We'll also need a requirements.txt file for the python dependencies:

Pygments==1.6

Create Heroku app

To create a Heroku app, we'll need to create a Procfile:

web: node server.js

Then, we can just do:

heroku create

Now we need to change the buildpack that we're using so Heroku knows that we need node.js as well as python. We'll use the heroku-buildpack-multi. First, create a .buildpacks file:

https://github.com/heroku/heroku-buildpack-nodejs
https://github.com/heroku/heroku-buildpack-python

Then tell Heroku to use the multipack:

heroku config:add BUILDPACK_URL=https://github.com/ddollar/heroku-buildpack-multi.git

Commit the Procfile, requirements.txt, package.json and .buildpacks. Then push to Heroku:

git push heroku master

Now you can go to the link Heroku provides and you'll see repl.it running (you can also use heroku open)!

Customizing repl.it

In my fork, you'll notice that I stripped out many of the buttons and the repl.it image. You can also change the css.