|
|
@@ -0,0 +1,104 @@
|
|
|
+ <!DOCTYPE html>
|
|
|
+ <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
|
|
+ <head>
|
|
|
+ <title>Run miniPaint - Browser Based Image Editor - in Docker</title>
|
|
|
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="keywords" content="Browser Based,Docker Made Easy,Home Lab,Home Lab Ideas,Install Guide,Web Based,Web Based Tools,Linux,MiniPaint,NodeJS,NodeJS Based Photo Editor,Open Source,Docker,Docker Container,Docker How To,Docker Made Simple,Docker Simplified,Docker Tutorial,Homelab,Ubuntu,Web Based Photo Editor,Web Based Image Editor,Web Based Photoshop Alternative,How To,Tutorial,i12bretro">
|
|
|
+ <meta name="author" content="i12bretro">
|
|
|
+ <meta name="description" content="Run miniPaint - Browser Based Image Editor - in Docker">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <meta name="revised" content="12/30/2023 02:40:24 AM" />
|
|
|
+ <link rel="icon" type="image/x-icon" href="includes/favicon.ico">
|
|
|
+ <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
|
|
+ <script type="text/javascript" src="includes/js/steps.js"></script>
|
|
|
+ <link href="css/steps.css" rel="stylesheet" type="text/css" />
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <div id="gridContainer">
|
|
|
+ <div class="topMargin"></div>
|
|
|
+ <div id="listName" class="topMargin">
|
|
|
+ <h1>Run miniPaint - Browser Based Image Editor - in Docker</h1>
|
|
|
+ </div>
|
|
|
+ <div></div>
|
|
|
+ <div id="content">
|
|
|
+ <h2>What is miniPaint?</h2>
|
|
|
+
|
|
|
+<p><em>[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.<br />
|
|
|
+<br />
|
|
|
+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.</em> -<a href="https://github.com/viliusle/miniPaint" target="_blank">https://github.com/viliusle/miniPaint</a></p>
|
|
|
+
|
|
|
+<h2>Installing Docker</h2>
|
|
|
+
|
|
|
+<ol>
|
|
|
+ <li>Log into the Linux based device</li>
|
|
|
+ <li>Run the following commands in the terminal
|
|
|
+ <div class="codeBlock"># install prerequisites<br />
|
|
|
+ sudo apt install apt-transport-https ca-certificates git curl software-properties-common gnupg-agent -y<br />
|
|
|
+ # add docker gpg key<br />
|
|
|
+ curl -fsSL https://download.docker.com/linux/$(awk -F'=' '/^ID=/{ print $NF }' /etc/os-release)/gpg | sudo apt-key add -<br />
|
|
|
+ # add docker software repository<br />
|
|
|
+ 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"<br />
|
|
|
+ # install docker<br />
|
|
|
+ sudo apt install docker-ce docker-compose containerd.io -y<br />
|
|
|
+ # enable and start docker service<br />
|
|
|
+ sudo systemctl enable docker && sudo systemctl start docker<br />
|
|
|
+ # add the current user to the docker group<br />
|
|
|
+ sudo usermod -aG docker $USER<br />
|
|
|
+ # reauthenticate for the new group membership to take effect<br />
|
|
|
+ su - $USER</div>
|
|
|
+ </li>
|
|
|
+</ol>
|
|
|
+
|
|
|
+<h2>Running miniPaint</h2>
|
|
|
+
|
|
|
+<ol>
|
|
|
+ <li>Now that Docker is installed, run the following commands to setup the miniPaint Docker container and run it
|
|
|
+ <div class="codeBlock"># increase fs.inotify.max_user_watches<br />
|
|
|
+ echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf<br />
|
|
|
+ # reload and verify the change<br />
|
|
|
+ sudo sysctl -p<br />
|
|
|
+ # create working directory<br />
|
|
|
+ mkdir ~/docker/miniPaint -p<br />
|
|
|
+ # clone source code from github<br />
|
|
|
+ git clone https://github.com/viliusle/miniPaint.git ~/docker/miniPaint<br />
|
|
|
+ # change directory<br />
|
|
|
+ cd ~/docker/miniPaint<br />
|
|
|
+ # checkout the latest tagged release<br />
|
|
|
+ git checkout "$(git tag --sort=v:refname | tail -n1)"<br />
|
|
|
+ # edit webpack.config.js<br />
|
|
|
+ sudo nano webpack.config.js</div>
|
|
|
+ </li>
|
|
|
+ <li>Scroll to the bottom of the file and locate devServer, then add the following line inside the devServer block
|
|
|
+ <p>allowedHosts: "all",</p>
|
|
|
+ </li>
|
|
|
+ <li>Press CTRL+O, Enter, CTRL+X to write the changes and exit</li>
|
|
|
+ <li>Continue with the following commands in the terminal
|
|
|
+ <div class="codeBlock"># create a dockerfile<br />
|
|
|
+ sudo nano ./Dockerfile</div>
|
|
|
+ </li>
|
|
|
+ <li>Paste the following into Dockerfile
|
|
|
+ <p>FROM node:16-alpine<br />
|
|
|
+ WORKDIR /usr/src/app<br />
|
|
|
+ COPY package*.json ./<br />
|
|
|
+ RUN npm i<br />
|
|
|
+ COPY . .<br />
|
|
|
+ EXPOSE 8080<br />
|
|
|
+ CMD ["npm", "run", "server"]</p>
|
|
|
+ </li>
|
|
|
+ <li>Press CTRL+O, Enter, CTRL+X to write the changes and exit</li>
|
|
|
+ <li>Continue with the following commands in the terminal
|
|
|
+ <div class="codeBlock"># build the minipaint image<br />
|
|
|
+ docker build -t local/minipaint .<br />
|
|
|
+ # run minipaint container<br />
|
|
|
+ docker run -d --name=minipaint -p 8080:8080 --restart=unless-stopped local/minipaint</div>
|
|
|
+ </li>
|
|
|
+ <li>Open a web browser and navigate to http://DNSorIP:8080</li>
|
|
|
+ <li>Welcome to miniPaint running in Docker</li>
|
|
|
+</ol>
|
|
|
+
|
|
|
+<p>Source: <a href="https://github.com/viliusle/miniPaint/wiki/Docker" target="_blank">https://github.com/viliusle/miniPaint/wiki/Docker</a></p> </div>
|
|
|
+ </div>
|
|
|
+ </body>
|
|
|
+ </html>
|
|
|
+
|
i12bretro