DEV Community

Tane Piper
Tane Piper

Posted on

Rapid prototyping with Takeoff

Takeoff is a toolkit for rapidly developing applications. I started developing it in August 2017 after I had been working on a project to read and display logs for the game Elite: Dangerous.

When I was setting up the app I had read the article Dockerize your app and keep hot-reloading! and had created the environment in this way so I could keep the backend and frontend separate, and not have to install mysql on my main environment.

I never really got around to finishing that app, but as I developed it I realised I had a nice layout for a docker-compose application that I could reuse. This was the first version of takeoff I developed, and it was a very opinionated set of command lines in npm and required cloning the environment from Github.

I then took a 2 week break for my honeymoon in Australia. When I came back I had realised that I could separate the application out from the commands and build a toolkit that easily allowed for other application repositories.

I call these blueprints and they are what power Takeoff. By default the first blueprint installed is the basic blueprint which includes a batteries included application. You get node based API, React frontend application and a Postgres database - all running inside docker and with a Ngnix proxy on port 80. Full details are in the readme file.

The apps include basic user management and authentication and communicate via JSON Web Tokens (JWT) so you can start writing your application straight away.

Getting Started

You can easily install it via npm: npm install -g @takeoff/takeoff.

Once you have the command line tool installed you are able to create your first environment:

takeoff init my-new-app
cd my-new-app
Enter fullscreen mode Exit fullscreen mode

This creates your first environment, in here you will find two folders - blueprints and envs. The blueprints folder is a local cache while the env folder is where you will find the source files for these projects, within your envs/default folder - here you can edit the files to add your project features - and all the time your application will be running on http://localhost and hot-reloading as you make changes.

Type the following to get started:

takeoff start
Enter fullscreen mode Exit fullscreen mode

Yes it was really that easy to get a fully working development environment.

Within Takeoff's envs folder, each app lives in it's own folder and structure. The API uses Hapi plugins loaded via configuration, and you also have access to Sequelize and it's CLI to run database migrations and seed stages.

In the React app you'll find files broken down into components that have their views and stores, and a single app to bring them together. In the future I'll also be providing an Angular app, and an app using vanilla web components.

If you have any feedback or find any issues please head over to the Github page to leave an issue.

Top comments (0)