# 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