Run locally ES6KATAS

How to run locally ES6KATAS with TDDBIN

I am moving around a lot and I like doing the katas you can find at es6katas.org. This is a great way of learning ES6. Sometimes when you have the problem of no available Internet connection a local copy seems to be the perfect solution.

I went over the instructions and it turned out that there wasn’t anything ‘out of the box ready’ to install with a single command.

The process goes as follows:

  1. First, you need to have configured the tddbin-frontend
  2. specify where the katas are located (that’s another package),
  3. start a server and go to the katas URL.

So I put together all of the steps I completed to have the server up and running and decided to share them with everybody, I hope this helps. :)

Copy & Paste. TL:DR

Just copy and paste. This will create the folder es6katas and install everything inside it. It WON’T install global packages.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
mkdir es6katas;
cd es6katas;
git clone https://github.com/tddbin/katas.git;
git clone https://github.com/tddbin/tddbin-frontend.git;
export KATAS_SERVICE_DOMAIN=localhost:8000/katas/dist/;
export TDDBIN_ROOT_DOMAIN=localhost:8000/tddbin-frontend/dist;
cd tddbin-frontend; npm install;
npm run build;
cd ../katas;
npm install;
npm run build;
cd .. ;
npm install http-server;
http-server -p 8000 & open http://localhost:8000/tddbin-frontend/dist/?311#?kata=es6/language/template-strings/basics

at the bottom, you have the makefile code so you can easily run it with make.


Instructions

You need two packages, one for the katas and the other for the Tddbin.

So, go to your es6katas folder or where are you going to start the server, in my example we are going to use a folder called es6katas

1
mkdir es6katas; cd es6katas

Cloning repositories

start cloning the katas repository:

1
git clone https://github.com/tddbin/katas.git

after this at the same directory, you can clone the tddbin repository

1
git clone https://github.com/tddbin/tddbin-frontend.git

Setting up variables.

Next, you need to set your KATAS_SERVICE_DOMAIN variable to the location where it is going to find the proxy.html served at the katas repository.

we’ll run the following as our example (remember to change the port to the one you are going to use):

1
export KATAS_SERVICE_DOMAIN=localhost:8000/katas/dist/

We need also to set the TDDBIN_ROOT_DOMAIN variable.

1
export TDDBIN_ROOT_DOMAIN=localhost:8000/tddbin-frontend/dist

Remember that if you open a new tab, the variable will need to be set again.

Start installing the packages needed for tddbin to run.

Then we’ll move into the tddbin dir

1
cd tddbin-frontend

and run the following

1
npm install; npm run build

once it is finished we have to go back to the root folder and into the katas repository

1
cd ../katas

then install all the packages needed and run the build. (we are going to get some errors, but the dist folder will be created and this is what we require.)

1
npm install; npm run build

Start the server.

then in the other tab, we have to go to the es6katas folder,

1
cd ..

where both repositories are. Here we’ll start the server. if you don’t have a simple HTTP server, the package http-server will do the work.

1
npm install http-server; http-server -p 8000 &

Open the first kata page.

After this, just point your browser to the following link(change the port to the one you are using):

1
open http://localhost:8000/tddbin-frontend/dist/?311#?kata=es6/language/template-strings/basics

That will start test number one and will show the links for the rest at the bottom.


Makefile

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
export KATAS_SERVICE_DOMAIN=localhost:8000/katas/dist/
export TDDBIN_ROOT_DOMAIN=localhost:8000/tddbin-frontend/dist

default: run-es6katas-local

run-es6katas-local:
mkdir es6katas
cd es6katas && git clone https://github.com/tddbin/katas.git
cd es6katas && git clone https://github.com/tddbin/tddbin-frontend.git
cd es6katas/tddbin-frontend && npm install && npm run build
make build-katas -i
cd es6katas && npm install http-server
cd es6katas && http-server -p 8000 & open "http://localhost:8000/tddbin-frontend/dist/?311#?kata=es6/language/template-strings/basics"

build-katas:
cd es6katas/katas && npm install && npm run build

.PHONY: run-es6katas-local