From 68f88d6df095ee99d091e4e45d95b6a455d9a19d Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Fri, 27 Aug 2021 19:43:49 +0200
Subject: [PATCH] Working on docker doc

---
 .../documentation/advanced/Deployment.vue     | 89 ++++++++++++++++++-
 1 file changed, 87 insertions(+), 2 deletions(-)

diff --git a/src/templates/modules/documentation/advanced/Deployment.vue b/src/templates/modules/documentation/advanced/Deployment.vue
index af9e0e5..d124861 100644
--- a/src/templates/modules/documentation/advanced/Deployment.vue
+++ b/src/templates/modules/documentation/advanced/Deployment.vue
@@ -41,15 +41,58 @@
       <p>Then open a terminal in the root folder of your application and run the following command :</p>
       <CodeHighlight :code="startPm2" />
     </div>
+
+    <div class="space-y-5">
+      <h2>Deploy with Docker</h2>
+      <p>Docker is free software for launching applications in isolated containers.</p>
+      <div>
+        <p class="mr-2">Learn more: </p>
+        <LinkExternal url="https://www.docker.com">
+          Docker Documentation
+        </LinkExternal>
+      </div>
+      <AlertWarn>
+        <template v-slot:label>
+          Warn
+        </template>
+        <template v-slot:message>
+          In the docker section, replace <br />
+            - <span class="font-bold">[name]</span> with the name of your bot, <br />
+            - <span class="font-bold">[version]</span> with the version of your bot. (You can use `latest`, `dev`... with docker) <br />
+            - <span class="font-bold">[env]</span> with your env file (`.env`, `environment.json` or `environment.yml`)
+        </template>
+      </AlertWarn>
+      <p>Create a root file named <code class="active">Dockerfile</code>.</p>
+      <CodeHighlight :code="Dockerfile" />
+      <p>Then open a terminal in the root folder of your application and run the following command :</p>
+      <CodeHighlight :code="buildImage" />
+      <p>Use docker-compose to automate the start command of your bot with the following content :</p>
+      <CodeHighlight :code="dockerCompose" />
+      <p>Finally, you can run your image inside a container with the following command :</p>
+      <CodeHighlight :code="startContainer" />
+      <AlertInfo>
+        <template v-slot:label>
+          Info
+        </template>
+        <template v-slot:message>
+          The option <span class="font-bold">-d</span> allows to launch the container in the background.
+        </template>
+      </AlertInfo>
+      <p>To stop the container, run the following command :</p>
+      <CodeHighlight :code="stopContainer" />
+      <p>To stop see the log of your discord bot, run the following command :</p>
+      <CodeHighlight :code="seeLogs" />
+    </div>
   </Documentation>
 </template>
 
 <script setup lang="ts">
 import Documentation from '../../../../components/Documentation.vue'
 import CodeHighlight from '../../../../components/CodeHighlight.vue'
-import Divider from '../../../../components/Divider.vue'
 import LinkExternal from '../../../../components/LinkExternal.vue'
-import AlertWarn from '../../../../components/AlertWarn.vue'
+import AlertInfo from '../../../../components/AlertInfo.vue'
+import AlertWarn from "../../../../components/AlertWarn.vue";
+
 const ecosystem = `
 module.exports = {
   apps : [{
@@ -63,4 +106,46 @@ module.exports = {
 const startPm2 = `
 $ cd /path/to/project/folder/root
 $ pm2 start`
+
+const Dockerfile = `
+FROM node:16-alpine3.11
+
+RUN mkdir -p /usr/src/[name]
+
+WORKDIR /usr/src/[name]
+
+COPY . /usr/src/[name]
+
+RUN yarn build
+
+CMD ["yarn", "start"]
+`
+
+const buildImage = `
+$ cd /path/to/project/folder/root
+$ docker build -t [name]:[version] .
+`
+
+const startContainer = `
+$ docker-compose up -d
+`
+
+const stopContainer = `
+$ docker-compose down
+`
+
+const seeLogs = `
+$ docker logs [name]
+`
+
+const dockerCompose = `
+version: "3"
+
+services:
+  [name]:
+    image: [name]:[version]
+    container_name: [name]
+    volumes:
+      - "/path/to/project/folder/root/[env]:/usr/src/[name]/[env]:ro"
+`
 </script>