Teleport

Web boilerplates as lego bricks

Erwan Ledoux

Published in

Snips Blog

6 min readFeb 10, 2017

By Erwan Ledoux & François Blas (and the team at Snips)

At Snips, we have a team of web engineers dedicated to building a lot of dashboards to help data scientists internally. The challenge is to quickly ship Minimal Viable Product (MVP) applications based on lots of different web technologies. At the same time we still need to maintain and iterate safely on the previously deployed ones. We discovered early on that we needed to automate this process. We chose to make a simple open-sourced Command Line Interface (CLI) called Teleport.

Motivation

Web engineers in our company work hard to push internal tools to create a great environment for data scientists. It is about helping them to easily prototype, monitor and debug new algorithms and models. Data scientists will write some of the code for these projects — this is where some friction for starting new project arises. You need to anticipate from the beginning how to make sure no one will lose time because of differences in programming cultures:

Look I made a small app that fetches my supervised data in a nice html table, can you iterate on it? … — Yes, I used jQuery and Coffeescript of course! …So what?

What do you mean I have to learn Babel, Webpack, React and Redux just to ship my TODO list app?

And you fall into typical Javascript fatigue discussions…

People will also tend to ping you like this:

Help! The docker deployment for my app stopped working and I have no idea why!

The message tagging dashboard you built last week is awesome! Now we need a similar one, but for speech tagging. Should be quick, right — it’s almost the same code..

We wish it could be just like that — easy for us to just jump back into any project written with any tech stack and just be productive straight away. But how many times has a small configuration change in a new app been enough to break the install/dev/deploy step from a previously used boilerplate? Tell us the joy you feel when going through the file system in order to determine which tiny-apparently-stupid-declarative config file must be added/rewritten/removed given the new setup.

We’re often faced with these kind of trade-off questions:

should I let a data scientist start the project using his own web skills, knowing that I might have to re-write it from scratch if we decide to productionize it afterwards?
should I start the project with a modern optimised web tech stack I am familiar with, knowing that future changes for the project might have to go through me?

The difficulty is also increased because of the number of tools you need to juggle with:

it is easy for you to manipulate node servers, but data scientists prefer working in Python. Therefore it is more direct sometimes to use Flask python servers that embed their code.
you have different deployment platforms. We use docker for our internal dashboards and Heroku/S3 for our public ones.
for one project you sometimes need more than one server. For instance, you want a Uwsgi Flask for rendering html and routing API’s, and an other one based on Gunicorn Flask-SocketIO to handle websockets.

That’s how the idea of Teleport came up. It was the question of how to make code disappear, without being pretentious… Or at least how to get rid of the part we don’t like: bootstraping and deployment. Teleport reduces the complexity down to 3 lines of code — pick the lego bricks you need from the best web technologies. All with the added bonus of creative a way for data scientists to familiarize themselves with that tech. All at the same time.

Get started

For full info and troubleshooting, best is to read the README.

A. Install globally Teleport

With yarn:

yarn global add teleport.js

You can also install it with ‘npm -g install teleport.js’. Now you have the global Teleport CLI ‘tpt’ available in your terminal.

Let’s start with an example. Let’s say you want at the same time:

a fully configured boilerplate for a React app with a Node Express server
websockets with Python Flask
a single deploy command for Heroku
Hot Module Reloading in dev.

Easy!

B. Call Teleport with the create option

virtualenv venv
source venv/bin/activate # On Linux . venv/bin/activate
tpt -c --templates teleport-webpack-react,teleport-express-webrouter,teleport-flask-websocket,teleport-heroku

(we use a python virtual env to avoid pip errors related to sudo permissions)

This command is long, but with it, you already defined the atomic template parts that will compose your app. You could also add templates one at a time.

Now you are supposed to have a folder containing your app like “app-685af6ba”. By default Teleport generates an app name for you. To specify your own app name, use ` — name my-app-name`. But make sure that this name is not already used by another app deployed on Heroku.

The framework works with templates. A Teleport template is a collection of files that serve a special function for your app. The source content is downloaded from a versioned npm package stored inside the node modules of your project. Teleport combines then the different template files into your initial project setup.

C. To run it locally

tpt -s

Your app is now running on http://localhost:5000, and your websocket server on http://localhost:5001.

D. Deploy your app

tpt -d --type production

(make sure you have the Heroku CLI, signed up, ran heroku login and that you can deploy 2 new apps!)

Boom! You app is now deployed at: http://app-685af6ba.heroku.com, and your websockets server at http://app-685af6ba-wbs.heroku.com.

Technical details

Teleport proposes a set of methods making the bootstraping and deployment workflow divided into small tasks (create, start, deploy) and sub-tasks (init, configure, dump, install, replace, build, push, run). Of course we are not coming here to propose the ultimate open-source project that would resolve in one CLI all the API’s surface area provided by your favourite frameworks. Teleport is nevertheless cool for proposing a sharable ontology between projects contributing to scale our dashboard releases process.

In a Teleport project you always need to determine:

the number of different servers you need. For example, you can combine a Node Express server (from teleport-express-webrouter) with a websocket one coded in Python (teleport-flask-websocket).
the frontend template that will bundle scripts and styles to your rendering server, like teleport-webpack-react.
the plaftorm template that helps to deploy the whole project, like teleport-heroku

The framework tends to follow the container philosophy, meaning that any backend template you build will be embedded as a separate app at deployment time. This idea of containerizing everything comes from how our internal infrastructure was build at the beginning based on Docker and now Kubernetes.

How do I use this right now?

Teleport is currently in beta. We published 7 templates that you can play with. We let you imagine the kind of combination suited for your use cases. At Snips we often like the teleport-webpack-react,teleport-express-webrouter,teleport-flask-websocket,teleport-heroku recipe for building cool public dashboards, and the teleport-flask-webrouter,teleport-docker combination for shipping internal API’s microservices quickly.

Note that our teleport-docker template is the one we use heavily internally when working with the data science teams. However, we expect to be hard for an external user to know how to handle the Docker configuration in Teleport as you also need an infrastructure based on Kubernetes. Therefore teleport-heroku is the template that we recommend you begin with.

This is just a start. We’ve been using Teleport at Snips for quite a while, and we are now excited feeling that together we can add support for other popular frontend/backend/deploy frameworks. We want to keep on creating new templates. Why not soon a teleport-webpack-angular2, teleport-express-graphql or a teleport-google-cloud? Maybe you’ll want to help with your favourite one — PR’s are welcome.

Follow us on twitter @_erwanledoux, @Sunpaco35 & @snips.

Thanks a lot to @pocketjsoso, @JoDureau, @kalizoy that reviewed our post, @clem_delp who baptised our framework and @cecilebaltazart, @Zibra for the Teleport logo.

If you want to work on AI + Privacy, check our jobs page!