Run miniPaint - Browser Based Image Editor - in Docker 🌱

What is miniPaint?

[miniPaint is an] online image editor lets you create, edit images using HTML5 technologies. No need to buy, download, install or have obsolete flash. No ads. Key features: layers, filters, HTML5, open source, Photoshop alternative.

miniPaint operates directly in the browser. You can create images, paste from the clipboard (ctrl+v) or upload from the computer (using menu or drag & drop). Nothing will be sent to any server. Everything stays in your browser.
-https://github.com/viliusle/miniPaint

Installing Docker

  1. Log into the Linux based device
  2. Run the following commands in the terminal
    # install prerequisites
    sudo apt install apt-transport-https ca-certificates git curl software-properties-common gnupg-agent -y
    # add docker gpg key
    curl -fsSL https://download.docker.com/linux/$(awk -F'=' '/^ID=/{ print $NF }' /etc/os-release)/gpg | sudo apt-key add -
    # add docker software repository
    sudo add-apt-repository "deb [arch=$(dpkg --print-architecture)] https://download.docker.com/linux/$(awk -F'=' '/^ID=/{ print $NF }' /etc/os-release) $(lsb_release -cs) stable"
    # install docker
    sudo apt install docker-ce docker-compose containerd.io -y
    # enable and start docker service
    sudo systemctl enable docker && sudo systemctl start docker
    # add the current user to the docker group
    sudo usermod -aG docker $USER
    # reauthenticate for the new group membership to take effect
    su - $USER

Running miniPaint

  1. Now that Docker is installed, run the following commands to setup the miniPaint Docker container and run it
    # increase fs.inotify.max_user_watches
    echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf
    # reload and verify the change
    sudo sysctl -p
    # create working directory
    mkdir ~/docker/miniPaint -p
    # clone source code from github
    git clone https://github.com/viliusle/miniPaint.git ~/docker/miniPaint
    # change directory
    cd ~/docker/miniPaint
    # checkout the latest tagged release
    git checkout "$(git tag --sort=v:refname | tail -n1)"
    # edit webpack.config.js
    sudo nano webpack.config.js
  2. Scroll to the bottom of the file and locate devServer, then add the following line inside the devServer block

    allowedHosts: "all",

  3. Press CTRL+O, Enter, CTRL+X to write the changes and exit
  4. Continue with the following commands in the terminal
    # create a dockerfile
    sudo nano ./Dockerfile
  5. Paste the following into Dockerfile

    FROM node:16-alpine
    WORKDIR /usr/src/app
    COPY package*.json ./
    RUN npm i
    COPY . .
    EXPOSE 8080
    CMD ["npm", "run", "server"]

  6. Press CTRL+O, Enter, CTRL+X to write the changes and exit
  7. Continue with the following commands in the terminal
    # build the minipaint image
    docker build -t local/minipaint .
    # run minipaint container
    docker run -d --name=minipaint -p 8080:8080 --restart=unless-stopped local/minipaint
  8. Open a web browser and navigate to http://DNSorIP:8080
  9. Welcome to miniPaint running in Docker

Source: https://github.com/viliusle/miniPaint/wiki/Docker