Screenshot showing Penpot in a browser window running on localhost. A mockup with Fedora content is shown as a demonstration.

Running Penpot locally, Docker-free, with Podman!

Penpot is a new free & open source design tool I have been using a lot lately. It is a tool the Fedora Design Team has picked up (we have a team area on the public https://penpot.app server where we collaborate and share files) and that we have been using for the Fedora website redesign work.

Penpot Logo (A pot of pencils next to the words "penpot" in a clean sans-serif font)

As I’ve used it over a longer length of time, I’ve noticed some performance issues (particularly around zooming and object selection / movement.) Now, there’s a number of factors on my side that might be causing it. For example, I have ongoing network issues (we spent part of Christmas break rewiring our house and wireless AP setup, which helped a bit, but now it seems my wireless card can’t switch APs if the laptop is moved between floors, lol.) In any case, I knew that Penpot can be run locally using containers, and I wanted to try that to see if it helped with the performance issues I was seeing.

To get started, I hopped over to Penpot’s main GitHub repo and found the link for the Penpot Technical Guide. This is the exact document you need to get started running Penpot yourself.  The “Getting Started” chapter was all I needed.

As I skimmed through the instructions my heart sank just a little bit when I saw mention of docker-compose. Now, I am no super über container tech whiz by any stretch: I’m a UX designer. I understand the basics of the technology at an abstract level and even a little bit on the technical level but I am not a person who is all containers, all kubernetes, all-the-time. I do know enough to know that, at least historically, applications that require docker-compose to run are a Big Fat Headache if you prefer using Podman.

 

Podman logo: three selkie seals with purple eyes above the text "podman"

Since I first got my new laptop between 1-2 months ago now, I have been avoiding installing Docker on it. I really believe in the Podman project and its approach to containers. Being as stubborn as I am, I decided to maintain my Docker-free status and just go ahead and try to get Penpot running anyway, since I had heard about podman-compose and that there have been many improvements with compatibility for docker-compose-based applications since I last did any kind of deep dive (probably 2 years ago) on it….

…. and it worked!

Like, “Just Worked” worked. No debugging, no hacking, no sweat. So here you go:

 

Running Penpot using Podman on Fedora 35, Step-by-Step

1. Install Podman

Install podman, along with podman-compose, podman-docker (aliases docker commands for you), and cockpit to manage it because it’s awesome.

sudo dnf install podman cockpit cockpit-podman podman-compose podman-docker podman-plugins

2. Clone the Penpot code

Grab the code. Git clone the penpot repo locally. Let’s say to ~/penpot.

git clone https://github.com/penpot/penpot.git

3. Run podman-compose

Run podman-compose on the Penpot docker file. Go into the ~/penpot/docker/images directory, and run podman-compose.

cd penpot/docker/images
podman-compose -p penpot -f docker-compose.yaml up -d

Any time podman prompts you about which registry you should use (it asked me 5 times), choose the docker.io registries. I tried using quay.io and the Fedora registries, but they are missing some components and the setup seems to fail as a result.

The selection prompt looks something like this:

? Please select an image:
registry.fedoraproject.org/penpotapp/exporter:latest
registry.access.redhat.com/penpotapp/exporter:latest
▸ docker.io/penpotapp/exporter:latest
quay.io/penpotapp/exporter:latest

4. Create your Penpot user

Create your Penpot user. (Penpot’s container doesn’t have working SMTP to do this through the front-end.)

docker exec -ti penpot_penpot-backend_1 ./manage.sh create-profile

5. Use Penpot!

All that’s left to do is to visit your local penpot in your browser. The URL should be http://localhost:9001 – if you get a weird SSL error, it’s because you used https. I am assuming since you’re connecting to your own machine that it’s ok to forego SSL!

Bonus: Create a desktop icon for your local Penpot

Wouldn’t it be nice if you could have a desktop icon to launch your local containerized Penpot? Yes, it would 🙂 So here are some (admittedly GNOME-centric, sorry!) steps on how to do that. (If this works for you on other desktops or if you have hints for other desktops, let us know in the comments!)

To do this, you’ll need to install a menu editor tool. I usually use a tool called alacarte, but while it’s available in Fedora’s DNF repos, it’s not in GNOME software. For your benefit I tested out one that is – it is called AppEditor.

Go ahead and install AppEditor from GNOME Software (you’ll need Flathub enabled) and open it up.

Screenshot of AppEditor showing all the fields listed in the table that follows below

You can use whichever browser you prefer, but I use Firefox so these instructions are for Firefox. 🙂 If you know how to do this for other browsers (I think Epiphany has a feature built-in to do this, but I decided not to do it because it doesn’t have access to my password manager) please drop a comment.

In AppEditor, click the “New Application” icon in the upper left, it looks like this: "New Entry" icon from AppEditor - a tiny document with a + symbol.

You’ll then get a form to fill out with the details of your new application launcher. Here’s how I filled mine out:

Form field Entry
Display name Penpot
Comment UI design and prototyping tool
Show in Launcher [On]
Command Line firefox %u –new-window http://localhost:9001
Working Directory [Leave blank]
Launch in Terminal [Off]

By default, your new application launcher will have a generic blue icon that looks like this:
Diamond-shaped icon in 3 shades of blue with two interlocking gears

You can use the Penpot favicon located at https://penpot.app/images/favicon.png – but it is small and lacking alpha transparency. I have scaled that logo slightly up (I know, it’s not smooth, sorry!) and added alpha to it so it will look nicer for you, download it here:

Penpot logo - a square penpot with three pencils in it, black and white lineart style

Here’s how it looks in action:

Screenshot of the GNOME application launcher with a Penpot app icon visible

Container Troubleshooting

If you run into any issues with your local Penpot, the cockpit & cockpit-podman packages you installed will be of great use.

Cockpit is a web-based open source OS management console. It has a plugin for managing Podman containers, and it is really, really nice.

Here’s how to use it – you just run this command as root to enable the cockpit service:

sudo systemctl enable --now cockpit.socket

Then visit http://localhost:9090, and log in using the same username and password you use to log into your Fedora desktop.

(If you have any issues, see the firewall suggestion on the Cockpit upstream get started instructions.)

Click on the “Podman containers” tab on the right. If you click on one of the running Penpot containers, you can get a console open into the container.

Screenshot of the Cockpit Podman web UI. It has a hidden list of container images at the top, and a list of 5 containers (penpot-backend, penpot-frontend, etc.) underneath. All containers are listed as running.

Screenshot of Cockpit Podman web UI. A running penpot container listing is expanded, and details, logs, and console tabs are visible.

That’s it!

I hope that this helps somebody out there! If you have more tips / tricks / ideas to share please share in the comments 🙂

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.