How to install Penpot UX/UI Prototype Tool With the Help of Docker Compose

Penpot is an open-source design and prototyping software that empowers designers and developers to create interactive user interfaces, wireframes, and visual designs. It provides a collaborative platform for teams to work together efficiently, fostering better communication and productivity throughout the design process. With its user-friendly interface and extensive feature set, Penpot offers a viable alternative to proprietary design tools.

Penpot vs Figma

When comparing Penpot to Figma, one of the popular design tools in the market, there are several notable differences. Firstly, Penpot is open-source software, which means it is freely available for anyone to use, modify, and distribute. On the other hand, Figma is a commercial tool that requires a subscription to access its full range of features.

In terms of collaboration, both Penpot and Figma offer real-time collaboration capabilities, allowing multiple users to work on the same project simultaneously. However, Penpot’s open-source nature makes it advantageous for teams looking for more flexibility and control over their design environment, as they can customize and extend the software to suit their specific needs.

Another key aspect is the design functionality. Figma has been around longer and has a more mature feature set, including advanced prototyping options and a robust design system. While Penpot may not have the same level of polish and extensive feature set as Figma, it still provides a solid foundation for creating visually appealing designs and interactive prototypes.

One significant advantage of Penpot is its open architecture, which enables seamless integration with other design tools and systems. This flexibility allows designers to leverage existing workflows and tools, enhancing their productivity and reducing the need for extensive tool switching.

Ultimately, the choice between Penpot and Figma depends on specific requirements, preferences, and budget. Figma, with its established reputation and comprehensive feature set, maybe a preferred option for teams looking for a polished and industry-standard design tool. On the other hand, Penpot’s open-source nature and customizable framework make it an appealing choice for teams seeking more control, flexibility, and potential cost savings.

Install Penpot with Docker Compose

Minimum Server Requirements

Regarding the minimum server requirements, Penpot recommends the following:

• CPU: 4 cores
• RAM: 8 GB
• Disk space: 50 GB

Setting Up UFW in SSH Client. (Firewall setting in Ubuntu)

Once you’ve confirmed that your server meets the minimum requirements, the next step is to set up UFW in SSH Client. This is important for ensuring that your server is secure and protected from potential threats. For configuring the firewall in Ubuntu, you can use the”ufw” (Uncomplicated Firewall). Here are the steps to allow traffic on ports 80 and 443 (for HTTPS) using “ufw“:

## Enable ufw 
sudo ufw enable

## Allow incoming traffic on ports
sudo ufw allow 80/tcp
sudo ufw allow 443/tcp
sudo ufw allow 81/tcp
sudo ufw allow 9001/tcp

## check status of ufe
ufw status

Install Docker and Docker Compose in Ubuntu

## make a new file
nano in.sh

## copy and paste the below code in "in.sh" file
##############

apt update && 
apt upgrade -y &&
curl -fsSL https://get.docker.com -o get-docker.sh &&
sudo sh get-docker.sh &&
curl -SL https://github.com/docker/compose/releases/download/v2.13.0/docker-compose-linux-x86_64 -o /usr/local/bin/docker-compose &&
chmod +x /usr/local/bin/docker-compose &&
apt-get install docker-compose-plugin

##############

## Activate the execution mode
chmod +x in.sh

## Run this script
./in.sh

Install Penpot

## make a new directory with any name
mkdir penpot

## Navigate to the directory
cd penpot

## download the docker-compose.yml file
wget https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml

#OR
curl -o docker-compose.yaml https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml

## Then simply launch composer:
docker compose -p penpot -f docker-compose.yaml up -d

## Wait for the containers to start up. You can check the logs with the following command
docker-compose logs -f

## Access Penpot in your web browser at http://localhost:9001

## If you want to stop running Penpot, just type
docker compose -p penpot -f docker-compose.yaml down

SSL Certificate

For using Nginx Proxy Manager to issue an SSL certificate for Penpot, you can follow these steps:

Install Nginx Proxy Manager in Ubuntu with Docker Compose

How to install Nginx Proxy Manager on the same server with the help of docker-compose please follow the instructions below

## make a directory for Nginx Proxy Manager
cd
mkdir npm
cd npm

## create a file "docker-compose.yml" init
nano docker-compose.yml

## paste the below code init

version: '3.8'
services:
  app:
    image: 'jc21/nginx-proxy-manager:latest'
    restart: unless-stopped
    ports:
      - '80:80'
      - '81:81'
      - '443:443'
    volumes:
      - ./data:/data
      - ./letsencrypt:/etc/letsencrypt

## run this below command
docker-compose up -d

Once the installation is complete, you can access your “Nginx Proxy Manager” site by going to http://your_server_ip_address “port 81” in your web browser. By default login detail is

Email = admin@example.com

Password = changeme

1. Add a new proxy host for Penpot with the following settings:
   • Scheme: HTTP
   • Internal IP: The IP address of the Penpot container (you can find it with docker inspect penpot-docker-compose_penpot_1 | grep IPAddress) Port: 8080
   • Click on “SSL” and toggle on “Automatically issue Let’s Encrypt SSL certificate”.
   • Save the proxy host and wait for the certificate to be issued.

That’s it! You should now be able to access Penpot securely over HTTPS.

Feeling lost in the tech jungle? Say hello to Oldie Tech, your friendly guide!

No more confusing jargon or frustrating updates! In my videos (Urdu/Hindi with English subtitles!), I take complex tech and break it down into bite-sized, easy-to-understand pieces. Think of me as your tech translator, turning mysteries into simple solutions with a sprinkle of humor and helpful tips.

Whether you’re a tech newbie or just prefer your tech talk with a bit of flavor, Oldie Tech welcomes you with open arms. Join our supportive community and ditch the tech fear! Subscribe now: