Penpot is the first open-source design and prototyping platform for product teams that allows true collaboration between designers and developers. The Penpot mission is to provide an open source & open standards platform to bring collaboration between designers and developers to the next level. In this step by step guide I will show you how to install Penpot on your Synology NAS using Docker & Portainer.

Note: This guide works perfectly with the latest version of Penpot v2.0.0

• STEP 1

Please Support My work by Making a Donation.

• STEP 2

Install Portainer using my step by step guide. If you already have Portainer installed on your Synology NAS, skip this STEP. Attention: Make sure you have installed the latest Portainer version.

• STEP 3

Make sure you have a synology.me Wildcard Certificate. Follow my guide to get a Wildcard Certificate. If you already have a synology.me Wildcard certificate, skip this STEP.

• STEP 4

Go to Control Panel / Login Portal / Advanced Tab / click Reverse Proxy. Follow the instructions in the image below.

• STEP 5

Now click the “Create” button. Follow the instructions in the image below.

• STEP 6

After you click the Create button, the window below will open. Follow the instructions in the image below.

On the General area, set the Reverse Proxy Name description: type in Penpot. After that, add the following instructions:

Source:
Protocol: HTTPS
Hostname: penpot.yourname.synology.me
Port: 443

Check Enable HSTS

Destination:
Protocol: HTTP
Hostname: localhost
Port: 9010

• STEP 7

On the Reverse Proxy Rules click the Custom Header tab. Click Create and then, from the drop-down menu, click WebSocket. After you click on WebSocket, two Header Names and two Values will be automatically added. Click Save. Follow the instructions in the image below.

• STEP 8

Go to Control Panel / Network / Connectivity tab/ Check Enable HTTP/2 then click Apply. Follow the instructions in the image below.

• STEP 9

Go to Control Panel / Security / Advanced tab/ Check Enable HTTP Compression then click Apply. Follow the instructions in the image below.

• STEP 10

Go to File Station and open the docker folder. Inside the docker folder, create one new folder and name it penpot. Follow the instructions in the image below.
Note: Be careful to enter only lowercase, not uppercase letters.

• STEP 11

Now create three new folders inside the penpot folder that you created at STEP 10 and name them assets, db, redis. Follow the instructions in the image below.
Note: Be careful to enter only lowercase, not uppercase letters.

• STEP 12

Right click on the penpot folder that you have previously created at STEP 10 then click Properties. Follow the instructions in the image below.

• STEP 13

Go to the Permission tab then click Advanced options. From the drop-down menu choose “Make inherited permissions explicit“. Follow the instructions in the image below.

• STEP 14

Select Everyone then click the Edit tab. Follow the instructions in the image below.

• STEP 15

Check all Read and Write Permissions. Click Done. Follow the instructions in the image below.

• STEP 16

After you click Done on STEP 15, check “Apply to this folder, sub-folders and files“. Click Save. Follow the instructions in the image below.

• STEP 17

Follow my step by step guide on how to activate SMTP for your Gmail account. This step is mandatory. Note: If you don’t want to use the easiest way for SMTP with Google and you already have SMTP details from your own Mail Server, you can just skip this STEP and use your personalized email SMTP details instead.

• STEP 18

Log into Portainer using your username and password. On the Portainer left sidebar click on Stacks then + Add stack. Follow the instructions in the image below.

• STEP 19

In the Name field type in penpot. Follow the instructions in the image below.

Note: In the Portainer Stacks Web editor Copy Paste the code below.

version: "3.9"
services:
  redis:
    image: redis
    command:
      - /bin/sh
      - -c
      - redis-server --requirepass redispass
    container_name: Penpot-REDIS
    hostname: penpot-redis
    mem_limit: 256m
    mem_reservation: 50m
    cpu_shares: 768
    security_opt:
      - no-new-privileges:true
    read_only: true
    user: 1026:100
    healthcheck:
      test: ["CMD-SHELL", "redis-cli ping || exit 1"]
    volumes:
      - /volume1/docker/penpot/redis:/data:rw
    environment:
      TZ: Europe/Bucharest
    restart: on-failure:5

  db:
    image: postgres
    container_name: Penpot-DB
    hostname: penpot-db
    mem_limit: 512m
    cpu_shares: 768
    security_opt:
      - no-new-privileges:true
    user: 1026:100
    healthcheck:
      test: ["CMD", "pg_isready", "-q", "-d", "penpot", "-U", "penpotuser"]
      timeout: 45s
      interval: 10s
      retries: 10
    volumes:
      - /volume1/docker/penpot/db:/var/lib/postgresql/data:rw
    environment:
      POSTGRES_DB: penpot
      POSTGRES_USER: penpotuser
      POSTGRES_PASSWORD: penpotpass
      POSTGRES_INITDB_ARGS: --data-checksums
    restart: on-failure:5

  penpot-exporter:
    image: penpotapp/exporter:main
    container_name: Penpot-EXPORTER
    hostname: penpot-exporter
    mem_limit: 1g
    cpu_shares: 768
    security_opt:
      - no-new-privileges:true
    environment:
      PENPOT_PUBLIC_URI: https://penpot.yourname.synology.me
      PENPOT_REDIS_URI: redis://:redispass@penpot-redis/0
    restart: on-failure:5

  penpot-backend:
    image: penpotapp/backend:main
    container_name: Penpot-BACKEND
    hostname: penpot-backend
    mem_limit: 3g
    cpu_shares: 768
    security_opt:
      - no-new-privileges:true
    volumes:
      - /volume1/docker/penpot/assets:/opt/data/assets:rw
    environment:
      PENPOT_FLAGS: enable-registration enable-login-with-password disable-email-verification enable-prepl-server enable-smtp
      PENPOT_SECRET_KEY: MariushostingMariushostingMari13
      ## The PREPL host. Mainly used for external programatic access to penpot backend
      ## (example: admin). By default it listen on `localhost` but if you are going to use
      ## the `admin`, you will need to uncomment this and set the host to `0.0.0.0`.
      # - PENPOT_PREPL_HOST=0.0.0.0
      PENPOT_PUBLIC_URI: https://penpot.yourname.synology.me
      PENPOT_DATABASE_URI: postgresql://penpot-db/penpot
      PENPOT_DATABASE_USERNAME: penpotuser
      PENPOT_DATABASE_PASSWORD: penpotpass
      PENPOT_REDIS_URI: redis://:redispass@penpot-redis/0
      PENPOT_ASSETS_STORAGE_BACKEND: assets-fs
      PENPOT_STORAGE_ASSETS_FS_DIRECTORY: /opt/data/assets
      PENPOT_TELEMETRY_ENABLED: false
      PENPOT_SMTP_HOST: smtp.gmail.com
      PENPOT_SMTP_DEFAULT_FROM: Your-own-gmail-address
      PENPOT_SMTP_DEFAULT_REPLY_TO: Your-own-gmail-address
      PENPOT_SMTP_PORT: 587
      PENPOT_SMTP_USERNAME: Your-own-gmail-address
      PENPOT_SMTP_PASSWORD: Your-own-app-password
      PENPOT_SMTP_TLS: true
      PENPOT_SMTP_SSL: false
    restart: on-failure:5
    depends_on:
      redis:
        condition: service_healthy
      db:
        condition: service_healthy

  penpot-frontend:
    image: penpotapp/frontend:main
    container_name: Penpot-FRONTEND
    hostname: penpot-frontend
    mem_limit: 1g
    cpu_shares: 768
    security_opt:
      - no-new-privileges:true
    ports:
      - 9010:80
    volumes:
      - /volume1/docker/penpot/assets:/opt/data/assets:rw
    environment:
      PENPOT_FLAGS: enable-registration enable-login-with-password
    restart: on-failure:5
    depends_on:
      penpot-backend:
        condition: service_started
      penpot-exporter:
        condition: service_started

Note: Before you paste the code above in the Web editor area below, change the value numbers for user with your own UID and GID values. (Follow my step by step guide on how to do this.) 1026 is my personal UID value and 100 is my personal GID value. You have to type in your own values.
Note: After you paste the code in the Web editor, change the value for TZ (Select your current Time Zone from this list).
Note: Before you paste the code above in the Web editor area below, change the value for PENPOT_PUBLIC_URI with your own synology.me DDNS with https:// at the beginning that you have previously created at STEP 6.
Note: Before you paste the code above in the Web editor area below, change the value for PENPOT_SECRET_KEY and add your own SECRET KEY. MariushostingMariushostingMari13 is an example for a SECRET KEY. You should invent your own Value. Add 32 random characters, both letters and numbers.
Note: Before you paste the code above in the Web editor area below, change the value for PENPOT_PUBLIC_URI with your own synology.me DDNS with https:// at the beginning that you have previously created at STEP 6.
Note: Before you paste the code above in the Web editor area below, change the value for PENPOT_SMTP_DEFAULT_FROM and type in your own Gmail address. STEP 17.
Note: Before you paste the code above in the Web editor area below, change the value for PENPOT_SMTP_DEFAULT_REPLY_TO and type in your own Gmail address. STEP 17.
Note: Before you paste the code above in the Web editor area below, change the value for PENPOT_SMTP_USERNAME and type in your own Gmail address. STEP 17.
Note: Before you paste the code above in the Web editor area below, change the value for PENPOT_SMTP_PASSWORD and type in your own Gmail app password. STEP 17.

• STEP 20

Scroll down on the page until you see a button called Deploy the stack. Click on it. Follow the instructions in the image below. The installation process can take up to a few minutes. It will depend on your Internet speed connection.

• STEP 21

If everything goes right, you will see this message at the top right of your screen: “Success Stack successfully deployed“.

• STEP 22

Go back to STEP 1 or you will deal with karma 🙂.

• STEP 23

Please wait approximately 2-3 minutes for the installation to be completed or you will get a blank bad gateway error page if you try to connect too soon. Now open your browser and type in your HTTPS/SSL certificate like this https://penpot.yourname.synology.me that you have previously created at STEP 6. In my case it’s https://penpot.mariushosting.synology.me If everything goes right, you will see the Penpot registration page. Type in your own Email and Password then click Create an account. Follow the instructions in the image below.

• STEP 24

Type in your Full Name then click Create an account. Follow the instructions in the image below.

• STEP 25

Complete the Penpot Survey.

• STEP 26

Create your first Team, then click Continue, or Create a team later. Follow the instructions in the image below.

• STEP 27

Invite your team members via email. Click Invite members. Follow the instructions in the image below.

• STEP 28

If you have correctly followed STEP 17, your friends will be automatically invited via email.

• STEP 29

Your Penpot collaborative file at a glance!

Enjoy Penpot!

🆘TROUBLESHOOTING

If you encounter issues by using this container, make sure to check out the Common Docker issues article.

Note: Can I run Docker on my Synology NAS? See the supported models.
Note: How to Back Up Docker Containers on your Synology NAS.
Note: Find out how to update the Penpot container with the latest image.
Note: How to Free Disk Space on Your NAS if You Run Docker.
Note: How to Schedule Start & Stop For Docker Containers.
Note: How to Activate Email Notifications.
Note: How to Add Access Control Profile on Your NAS.
Note: How to Change Docker Containers Restart Policy.
Note: How to Use Docker Containers With VPN.
Note: Convert Docker Run Into Docker Compose.
Note: How to Clean Docker.
Note: How to Clean Docker Automatically.
Note: Best Practices When Using Docker and DDNS.
Note: Some Docker Containers Need WebSocket.
Note: Find out the Best NAS Models For Docker.
Note: Activate Gmail SMTP For Docker Containers.

This post was updated on Sunday / April 28th, 2024 at 3:49 PM