Hasura in Gitpod

SPOILER ALERT: If you are in a hurry and just want to try it out, click on the following button:

And then just take a look at the source code:
https://github.com/marcopeg/gitpod-hasura
or at the todo-list project:
https://github.com/marcopeg/gitpod-hasura-demo

Overture:

I’m falling in love with the concept of a Cloud IDE thanks to GitPod.io, and with backend-less thanks to Hasura.io.

Obviously, I’m in deep deep love with Postgres for long years. It’s a great open-source database that keeps surprising me with incredible features almost day after day.

Hasura provides a nice 30 seconds Heroku tutorial that gets you up and running with the famous hosting company.

But what if you want to just play with it in a fully discardable workspace?

GitPod + Docker to Rescue!

GitPod makes it easy to customize your workspace using a YAML configuration file:

# .gitpod.yml
image:
  file: .gitpod.Dockerfile

And a Dockerfile:

# .gitpod.Dockerfile
FROM gitpod/workspace-full:latest
RUN apt-get install xxx

There are also several examples of custom images that bring into GitPod whatever other service you may need to build your app:
https://github.com/gitpod-io/workspace-images

Run Hasura!

Let’s just jump to the Dockerfile source code that helps you run Hasura as part of your workspace:

FROM hasura/graphql-engine:v1.1.0 as hasura
FROM gitpod/workspace-postgres

###
# Install Hasura Engine
COPY --from=hasura /bin/graphql-engine /bin/graphql-engine

# Creates the `hasura_start` command:
ENV PATH="$PATH:$HOME/.hasura/bin"
RUN mkdir -p ~/.hasura/bin \
  && printf "#!/bin/bash\n/bin/graphql-engine serve" > ~/.hasura/bin/hasura_start \
  && chmod +x ~/.hasura/bin/*

# Ensure the basic environment variables that are needed by Hasura to start
ENV HASURA_GRAPHQL_DATABASE_URL="postgres://localhost:5432/postgres"
ENV HASURA_GRAPHQL_ENABLE_CONSOLE="true"

The first two lines point to some base images, the official Hasura and a custom GitPod workspace that runs Postgres.

That’s right, with Docker you can extend multiple base images!

This technique is called a multi-stage build, and you can find more details here.

The interesting part comes with the COPY command that imports the Hasura engine into the workspace's image. Now we have a Docker image that contains Postgres AND Hasura.

The next command creates a globally available CLI command that you can use to start the Hasura Engine once into the workspace. It’s a trick that I’ve learned from the gitpod/workspace-postgres source code.

The last block sets some basic environment variables that let you run Hasura with the default settings. You will be able to change them in your workspace.

The Power of Tasks

Just before you run your newly created workspace, let me add a few lines to the .gitpod.yml so that Hasura will start automatically:

image:
  file: .gitpod.Dockerfile

tasks:
  - name: Hasura
    command: hasura_start

ports:
  - port: 5432
    onOpen: ignore
  - port: 8080
    onOpen: open-browser

Once again, if you just want to play around with Hasura on GitPod, you may want to click this button and experience it for yourself:

A Workspace is just a Docker image!

Stating the obvious? Well, maybe. Still, I believe it is interesting to point out that you can build your own custom GitPod workspace and push it to DockerHub for others to enjoy.

I did exactly that, and now you can enjoy Hasura in GitPod with a single config file:

image: marcopeg/gitpod-workspace-hasura

tasks:
  - name: Hasura
    command: hasura_start

ports:
  - port: 5432
    onOpen: ignore
  - port: 8080
    onOpen: open-browser

Enjoy!