Use tilt to provide easy to setup development environments
Tags: devops, webdev, productivity, opensource
Published: 2022-01-24 11:58:18

You might know it. You just want to start working on an existing project be it in a company or on github. You just want to do the frontend part. Only the frontend which is usually super easy to setup. Just a quick `npm install` and `npm start` respectively yarn. But of course you need to run the whole project on your local machine to be independent. 

# Just install a few backend tools quick and easy ... so they said

So you get in touch with the backend folks and they tell you "yeah no problem, suuper easy, you just have to install this and that, then have this config and add this repository URL and install this database and apply that db dump and now it's working. Ah I forgot the message queue. Ah you are using MacOS, let's quickly recompile it and then have these certificates and..." and it goes on and on and on...
I have to say I'm a little frontend biased because of the complexity most backends have... sure frontend also has complexity but it's usually easy to setup.  

I'd like to show you a tool which set's up kubernetes pods and services fast and also watches your changes during development. The target is to have all your projects run by [tilt](tilt.dev) in a container even the frontend.

This will speed up the setup of new dev environments and fasten the onboarding process for new people.

There are a few prerequisites to install first.

# Prerequisites

* install docker (https://www.docker.com/get-started)
* install minikube (https://minikube.sigs.k8s.io/docs/start/)
* install kubctl (https://kubernetes.io/docs/tasks/tools/)
* install helm chart (https://helm.sh/docs/intro/install/)
* install tilt (https://docs.tilt.dev)

For macOS I recommend you use homebrew to install minikube, kubectl, helm and tilt. 

# Create a Tiltfile

In the root of your project you can now create a `Tiltfile`.  
For remotify I've created the following.
Please note that the `Tiltfile` has to have this exact name in order to be detected by tilt.

{% gist https://gist.github.com/flodev/61b140c7be6e5bed2f971ac1d9e3911a %}

Now let's examine whats going on.

1. define the minikube context that has to be used using `allow_k8s_contexts`
2. load helm remote extension
3. define a db password
4. setup each app

My project consists of postgresql db, hasura graphql, hasura migration, backend auth and the app frontend.

All of these projects are setup by almost the same schema. 
First load the helm chart. Second define how the projects will be accessed using `k8s_resource`.  

Note how all projects after postgres define `resource_deps`. The projects will wait for the defined dependencies until they are up and running.

For the app project I've set trigger mode to manual which means that it won't automatically update the project when a file change is detected. The frontend just takes too long to build. On my macbook it's 1 minute 30 seconds.

# Run tilt

Now that you have defined your projects in the Tiltfile you can navigate to the respective directory using the command line and run `tilt up`.

![tilt after executing tilt up](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eiz2hxjsbkx8y50tchk4.png)

Tilt gives you hints how to proceed. I'm always opening the browser using space since I really like the UI of tilt. 

![Tilt UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q077ut51d1gw8zmtbgld.png)
 
By clicking on the project name (for example `app`) you can get into a detail view where to console output is shown. 

![tilt detail project view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k7m061kao0c5c9pgzq7u.png)
 
To switch back just click on the tilt logo in the upper left corner (took me a while to figure that out ☺️).

# Fazit

So far I love tilt. The UI is quite cool. It does what it's meant to do. Refreshes the pod after an update is detected.
Only thing is for me that the frontend takes very long to bundle the file but that is only for me because I happen to have large dependencies. 
The Tiltfile is easy to write, the docs are quite good. 
Check out how everything works and maybe try setting up [remotify](https://github.com/flodev/remotify) using tilt.

If one could just setup the infrastructure on AWS using a simple Tiltfile ... that would be too good to be true 😊