Skip to content
Colin Wren
Twitter

Setting up Penpot to run on my Synology NAS

Design2 min read

In March 2022 I bought myself a NAS (well actually I bought two but swapped the original QNAP one for a Synology one after some privacy concerns) with the aim of not only having a better backup solution but also to self-host applications with Docker.

So far I’ve mostly been installing tools that help with automating tasks such as Retool to help pull in data from various sources for the applications that I’d built but with the news of Adobe acquiring Figma I decided to add Penpot, an open source design and prototyping app to that list of tools.

Installing Penpot on Docker using Portainer

For the most part you can follow the Getting Started -> Install Docker instructions that Penpot provide https://help.penpot.app/technical-guide/getting-started/#install-docker with a few changes depending on how you deploy your Docker applications.

I use Portainer to manage my Docker ‘stacks’ on my NAS as it provides a more powerful set of features that Synology’s Docker app (which relies on you creating scripts and using tasks on the NAS to exectute them) and it allows you to use docker-compose.yml files to create a stack of services.

There are a few changes to that need to be made to Penpot’s docker-compose.yml before a stack can be deployed with Portainer. The main one is to change references to config.env to stack.env, this is needed because the environment variables defined by Portainer are exposed as a file with that name.

1---
2version: "3.5"
3
4networks:
5 penpot:
6
7volumes:
8 penpot_postgres_data:
9 penpot_assets_data:
10
11services:
12 penpot-frontend:
13 image: "penpotapp/frontend:latest"
14 ports:
15 - 9001:80
16
17 volumes:
18 - penpot_assets_data:/opt/data
19
20 env_file:
21 - stack.env
22
23 depends_on:
24 - penpot-backend
25 - penpot-exporter
26
27 networks:
28 - penpot
29
30 penpot-backend:
31 image: "penpotapp/backend:latest"
32 volumes:
33 - penpot_assets_data:/opt/data
34
35 depends_on:
36 - penpot-postgres
37 - penpot-redis
38
39 env_file:
40 - stack.env
41
42 networks:
43 - penpot
44
45 penpot-exporter:
46 image: "penpotapp/exporter:latest"
47 env_file:
48 - stack.env
49 environment:
50 # Don't touch it; this uses internal docker network to
51 # communicate with the frontend.
52 - PENPOT_PUBLIC_URI=http://penpot-frontend
53 networks:
54 - penpot
55
56 penpot-postgres:
57 image: "postgres:14"
58 restart: always
59 stop_signal: SIGINT
60
61 environment:
62 - POSTGRES_INITDB_ARGS=--data-checksums
63 - POSTGRES_DB=penpot
64 - POSTGRES_USER=penpot
65 - POSTGRES_PASSWORD=penpot
66
67 volumes:
68 - penpot_postgres_data:/var/lib/postgresql/data
69
70 networks:
71 - penpot
72
73 penpot-redis:
74 image: redis:7
75 restart: always
76 networks:
77 - penpot
docker-compose.yml with stack.env changes

The values of that stack.env are can either be uploaded as a file (if you downloaded Penpot’s config.env file) or you can paste in values using the advanced mode. I’d recommend pasting the values in as there are some changes that need to be made to this file and it’s easier to do this in the UI rather than downloading, editing and uploading a file.

In order to get login working for the deployed Penpot there is a change that needs to be made to PENPOT_FLAGS which is to add disable-secure-session-cookies to that string. This will allow us to login over http , otherwise the session cookie that is set on login will fail to be saved and you’ll see an error message when submitting the form.

1PENPOT_PUBLIC_URI=http://localhost:9001
2PENPOT_FLAGS=disable-registration enable-login disable-email-verification disable-secure-session-cookies
3PENPOT_HTTP_SERVER_HOST=0.0.0.0
4PENPOT_DATABASE_URI=postgresql://penpot-postgres/penpot
5PENPOT_DATABASE_USERNAME=penpot
6PENPOT_DATABASE_PASSWORD=penpot
7PENPOT_REDIS_URI=redis://penpot-redis/0
8PENPOT_ASSETS_STORAGE_BACKEND=assets-fs
9PENPOT_STORAGE_ASSETS_FS_DIRECTORY=/opt/data/assets
10PENPOT_TELEMETRY_ENABLED=true
11PENPOT_SMTP_DEFAULT_FROM=no-reply@example.com
12PENPOT_SMTP_DEFAULT_REPLY_TO=no-reply@example.com
stack.env with secure session cookies disabled

With the stack definition and the environment variables set the stack can be deployed and then there’s one last task that needs to be done before Penpot can be used — Create a user to login with.

As per the Penpot instructions because the local stack won’t be able to send emails a local user needs to be created using ./manage.sh create-profile. In order to do this on the Portainer stack you can press the exec console button on the container list entry for penpot-backend_1 which will allow you connect to the container (default settings are fine) and run the ./manage.sh script.

Portainer stack for penpot
The exec process icon looks like a terminal icon

With the script run it’s just a case of hitting up your NAS’ IP address and the port you’ve exposed Penpot over (default is 9001) and logging in with the user you created.

Penpot screen
Penpot’s projects screen running on my NAS

I’m looking forward to seeing how Penpot evolves in the coming years as the project’s gained a lot of recognition & users after the Adobe news and it looks like that’s given them a lot of new investment and opportunities to build on this already amazing tool.