Setting up Penpot to run on my NAS
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.
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.
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.
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.
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.
