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.
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.
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 -p penpot -f docker-compose.yaml up -d
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:
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.
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.
You’ll then get a form to fill out with the details of your new application launcher. Here’s how I filled mine out:
|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]|
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:
Here’s how it looks in action:
If you run into any issues with your local Penpot, the
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.
I hope that this helps somebody out there! If you have more tips / tricks / ideas to share please share in the comments 🙂