Skip to main content

PenPot Installation

penpot-thumb.png

Penpot: An Open-Source Design and Prototyping Tool

Penpot is the first open-source platform for design and prototyping, tailored for cross-functional teams. It stands out as an excellent alternative to proprietary tools like Figma, offering flexibility, self-hosting capabilities, and a focus on collaboration.

Key Features

Open Source

Penpot is open source and free, making it accessible for individuals and teams who value transparency and control over their design workflows. Its source code is available on GitHub.

Collaboration-First

Penpot promotes teamwork by enabling real-time collaboration between designers and developers. It supports simultaneous editing, ensuring seamless communication and faster iteration cycles.

Cross-Platform

As a web-based application, Penpot runs on any modern browser, making it platform-agnostic. Teams can use it on Windows, macOS, Linux, or even mobile devices.

Self-Hosting

For teams or organizations prioritizing privacy and data control, Penpot offers a self-hosting option. You can deploy it on your infrastructure using Docker or other supported platforms.

Design System Support

Penpot supports design systems, enabling teams to manage components, styles, and assets efficiently. It simplifies design consistency across projects.

SVG-Native

Unlike other tools that rely on proprietary formats, Penpot uses SVG as its native format. This ensures maximum compatibility and flexibility for design assets.

Why Choose Penpot?

  1. Cost-Effective: Free and open source with no hidden subscription fees.
  2. Privacy: Self-hosting ensures data sovereignty.
  3. Community-Driven: A vibrant and growing community contributes to its features and improvements.
  4. Interoperability: SVG-native design format ensures assets work seamlessly across tools and platforms.

Installation

Prerequisites

  • VPS server - at least 4GB RAM

You can get 20€ in cloud credits using this link for Hetzner Cloud. Webnestify recommends Hetzner for all of your projects.

  • Access to the domain for HTTPS.
  • Secured server.

Before you continue with the installation, you need to make sure that your server is secured. Visit security guides section. Do not deploy any applications on an unsecured server. Otherwise, you can risk a potential data breach.

Webnestify can help you to secure your server to your specific needs and compliance. Just get in touch.

Video Walkthrough

Docker Engine

First, we will need to install docker engine on our brand new server.

Quick Installation script:

curl -sSL https://get.docker.com/ | CHANNEL=stable sh
# After the installation process is finished, you may need to enable the service and make sure it is started (e.g. CentOS 7)
systemctl enable --now docker

Visit official installation guide.

Never install docker from other sources or custom repositories.

Docker Compose file

networks:
  penpot:
volumes:
  penpot_assets:
services:
  penpot-frontend:
    image: "penpotapp/frontend:latest"
    restart: always
    ports:
      - 9001:80
    volumes:
      - penpot_assets:/opt/data/assets
    depends_on:
      - penpot-backend
      - penpot-exporter
    networks:
      - penpot
    environment:
      - PENPOT_FLAGS=enable-login-with-password
  penpot-backend:
    image: "penpotapp/backend:latest"
    restart: always
    volumes:
      - penpot_assets:/opt/data/assets
    depends_on:
      - penpot-postgres
      - penpot-redis
    networks:
      - penpot
    environment:
      - PENPOT_FLAGS=enable-registration enable-login-with-password enable-email-verification enable-smtp enable-prepl-server enable-email-whitelist
      - PENPOT_REGISTRATION_DOMAIN_WHITELIST= [YOUR-DOMAINS] # Add domain whitelists for accounts and invites. Examples: webnestify.cloud,webnestify.com
      - PENPOT_SECRET_KEY=[YOUR-SECURE-KEY] # Generate with command: python3 -c "import secrets; print(secrets.token_urlsafe(64))"
      - PENPOT_PREPL_HOST=0.0.0.0
      - PENPOT_PUBLIC_URI=[YOUR-DOMAIN] # https://example.com or https://something.example.com
      - PENPOT_DATABASE_URI=postgresql://penpot-postgres/penpot
      - PENPOT_DATABASE_USERNAME=penpot
      - PENPOT_DATABASE_PASSWORD=[YOUR-SECURE-PASSWORD] # Same generated value as in PG Env variable
      - PENPOT_REDIS_URI=redis://penpot-redis/0
      - PENPOT_ASSETS_STORAGE_BACKEND=assets-fs
      - PENPOT_STORAGE_ASSETS_FS_DIRECTORY=/opt/data/assets
      - PENPOT_TELEMETRY_ENABLED=true # Set to false if you don't want to sent basic diagnostic data to PenPot
      - PENPOT_SMTP_DEFAULT_FROM=[YOUR-SMTP]
      - PENPOT_SMTP_DEFAULT_REPLY_TO=[YOUR-SMTP]
      - PENPOT_SMTP_HOST=[YOUR-SMTP]
      - PENPOT_SMTP_PORT=587
      - PENPOT_SMTP_USERNAME=[YOUR-SMTP]
      - PENPOT_SMTP_PASSWORD=[YOUR-SMTP]
      - PENPOT_SMTP_TLS=true
  penpot-exporter:
    image: "penpotapp/exporter:latest"
    restart: always
    networks:
      - penpot
    environment:
      - PENPOT_PUBLIC_URI=http://penpot-frontend
      - PENPOT_REDIS_URI=redis://penpot-redis/0
  penpot-postgres:
    image: "postgres:15"
    restart: always
    stop_signal: SIGINT
    volumes:
      - /home/[YOUR-USER]/penpot/db:/var/lib/postgresql/data #change your path to your user
    networks:
      - penpot
    environment:
      - POSTGRES_INITDB_ARGS=--data-checksums
      - POSTGRES_DB=penpot
      - POSTGRES_USER=penpot
      - POSTGRES_PASSWORD=[YOUR-SECURE-PASSWORD] # Generate with command: python3 -c "import secrets; print(secrets.token_urlsafe(64))"
  penpot-redis:
    image: redis:7
    restart: always
    networks:
      - penpot

Change to your own values in square brackets [] !

Generate secure keys with this shell command:

python3 -c "import secrets; print(secrets.token_urlsafe(64))"

Reverse Proxy: Caddy

  1. Install Caddy repos and software
sudo apt install -y debian-keyring debian-archive-keyring apt-transport-https curl && curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | sudo gpg --dearmor -o /usr/share/keyrings/caddy-stable-archive-keyring.gpg && curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | sudo tee /etc/apt/sources.list.d/caddy-stable.list && sudo apt update && sudo apt install caddy
  1. Edit the Caddyfile
sudo nano /etc/caddy/Caddyfile
  1. Paste config
yourdomain.com {
    reverse_proxy http://localhost:9001
}

Make sure to replace yourdomain.com and default port 9001 to your own value you installed on.

  1. Restart Caddy
sudo systemctl reload caddy

About Webnestify

Imagine a world where you can focus on your business and less time maintaining your cloud infrastructure. With Webnestify cloud based solutions, we provide customized solutions for all types of companies to meet their needs; no matter how big or small they may be!

Read our reviews on Trustpilot!

Subscribe to our YouTube channel!

If you need to setup your own Docker instances or need help with security, visit our Docker deployment service.

Back to top