Penpot on Kubernetes with Helm

Every project starts with an idea, so it is really important to have the right tools by your side to be able to express what you are thinking. At CodeChem, we believe that most of these tools are the ones that the community creates and maintains, which is why we try to be part of the open-source community actively.

(Read also: Hactoberfest2022)

For web/mobile applications, having a tool to easily design wireframes and proof-of-concept pages/screens means you can express and share your idea with other people in your team quickly and precisely.

For that reason, we decided to try an open-source tool, and as a first project, we started to migrate the design of our company webpage. The tool I am talking about is Penpot. Using Penpot, we were able to collaborate perfectly and get the webpage design migrated in no time.

For a quick overview of the tool, we suggest you check their website and get familiar with it.

(our company webpage)

After spending some time on Penpot (and enjoying it), we decided to give back to the community by creating a quick deployment setup of Penpot using Kubernetes and Helm. This blog post will serve as a walkthrough of that process, so we can get started.

Getting started

First and foremost, make sure you have kubectl and helm installed on your system. If you don't, check the installation guides for your OS for kubectl and helm and install them.

Now, you need to add the CodeChem Helm repository to your current repositories:

helm repo add codechem https://charts.codechem.com
helm repo update

Configuration

The extensive configuration for Penpot can be found on the ArtifactHub page for the chart, in the Parameters section.

As you can see, the Penpot dependencies can be installed by the chart itself, but if you already have PostgreSQL and/or Redis instances available, you can use them. For now, start with creating the custom-values.yaml file to begin with the configuration. The parameters that you include here will override the default ones.

The following example configuration can be used, and this is the one we have in our current Penpot installation at CodeChem:

persistence:
  enabled: true
  size: 50Gi

config:
  publicURI: "https://penpot.example.com"
  flags: "enable-registration enable-login disable-demo-users disable-demo-warning enable-smtp enable-login-with-google"
  apiSecretKey: <REDACTED>

  postgresql:
    host: "postgresql.postgresql.svc.cluster.local"
    port: 5432
    database: penpot
    existingSecret: "penpot-config-secret"
    secretKeys:
      usernameKey: "postgresql-username"
      passwordKey: "postgresql-password"

  redis:
    host: "redis-headless.redis.svc.cluster.local"
    port: 6379
    database: "0"

  smtp:
    enabled: true
    defaultFrom: "penpot@example.com"
    defaultReplyTo: "design@example.com"
    host: "smtp.gmail.com"
    port: "587"
    tls: true
    existingSecret: "penpot-config-secret"
    secretKeys:
      usernameKey: "smtp-username"
      passwordKey: "smtp-password"

  registrationDomainWhitelist: "example.com"

  providers:
    google:
      enabled: true

    existingSecret: "penpot-config-secret"
    secretKeys:
      googleClientIDKey: "google-client-id"
      googleClientSecretKey: "google-client-secret"

In short, this example configuration uses already created instances of PostgreSQL and Redis, utilizes the provisioning of sensitive data like passwords with existing (pre created) secrets, implements the SMTP configuration, and allows for authentication with Google OAuth.

You might notice that there isn't any ingress configuration here, as we're using Istio internally, but the chart allows for the creation of an Ingress object if you don't have a way to expose the Penpot frontend.

All in all, this should give you an idea of the most used configuration settings for Penpot. Make sure to read the parameter descriptions carefully, because you might miss some important details like setting up additional flags required by Penpot.

You can also read more about the configuration of Penpot in their official documentation.

Deployment

After you've spent time configuring and reading about the settings offered by Penpot and the chart itself, it's time to deploy your Penpot instance!

To do so, if you have any existingSecret parameters set, make sure to create them first, and if not, continue with the installation.

First, create the namespace manually, or skip this step and provide the --create-namespace argument to the helm install command later:

kubectl create namespace penpot

Now, time to install:

helm install penpot -n penpot -f custom-values.yaml codechem/penpot

Wait for a while for everything to be deployed, and if you don't have an ingress controller to set up, you can use the Kubernetes port forwarding feature to see your instance:

kubectl port-forward -n penpot svc/penpot 8080:80

Head over to your browser and visit http://localhost:8080 to see your instance.

Tips

The importance of the flags

There are two types of configuration: options (properties that require some value) and flags (that just enable or disable something). The PENPOT_FLAGS the environment variable will have an ordered list of strings using this format: <enable|disable>-<flag-name>.

The Penpot flags explained in the official documentation can provide you with some powerful options. For example, you might not be able to log into your fresh instance without setting SMTP first, but you can disable registration or enable demo users to test Penpot without too much hassle.

The third-party auth settings

For configuration of the authentication with third-party auth providers, you will need to configure PenPot and set the correct callback of your PenPot instance in the auth-provider configuration. The callback has the following format:

<https://<your_domain>/api/auth/oauth/<oauth_provider>/callback>

You will need to change <your_domain> and <oauth_provider> according to your setup. This is how it looks with the gitlab.com provider:

<https://<your_domain>/api/auth/oauth/gitlab/callback>

The Redis auth settings

The Redis configuration is very simple, just provide a valid Redis URI. Redis is used mainly for WebSocket notifications coordination. Currently, only a non-authenticated connection is supported!

Conclusion

That's it. You are all set. If you've had any issues with the chart installation, you've noticed a misconfiguration, you have ideas on how we can improve the Penpot chart or our other charts in the repository, or simply wanna have a chat, feel free to open an Issue/PR/Discussion in our GitHub repository!