📝 Updated self-host-instructions

frontend/src/routes/docs/self-host.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang='ts'>
 	import { onMount } from 'svelte';
 	import '$lib/hljs.css';
 
@@ -11,12 +11,12 @@
 <svelte:head>
 	<title>ClassQuiz/docs - Self-Host</title>
 	<meta
-		name="description"
+		name='description'
-		content="How to self-host ClassQuiz, the open-source quiz-application"
+		content='How to self-host ClassQuiz, the open-source quiz-application'
 	/>
 </svelte:head>
 <article
-	class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate px-4 dark:prose-invert"
+	class='prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate px-4 dark:prose-invert'
 >
 	<h1>Self-Hosting</h1>
 	<p>Since ClassQuiz is open-source, it can also be self-hosted.</p>
@@ -30,33 +30,35 @@
 	<h2>Requirements</h2>
 	<h3>Software</h3>
 	<ul>
-		<li><a href="https://docker.com">Docker</a></li>
+		<li><a href='https://docker.com'>Docker</a></li>
-		<li><a href="https://git-scm.com/">Git</a></li>
+		<li><a href='https://git-scm.com/'>Git</a></li>
 		<li>
-			A <a href="https://redis.com">Redis</a>-Server (I recommend
+			A <a href='https://redis.com'>Redis</a>-Server
-			<a href="https://upstash.com">Upstash</a>)
 		</li>
 	</ul>
 	<h3>3rd-Parties</h3>
 	<h4>Required</h4>
 	<ul>
-		<li><a href="https://hcaptcha.com">hCaptcha (Captcha)</a></li>
+		<li><a href='https://hcaptcha.com'>hCaptcha (Captcha)</a></li>
-		<li><a href="https://www.mapbox.com/">Mapbox (Maps)</a></li>
+		<li><a href='https://www.mapbox.com/'>Mapbox (Maps)</a></li>
 	</ul>
 	<h4>Optional</h4>
 	<ul>
-		<li><a href="https://sentry.io">Sentry (Error-Logging)</a></li>
+		<li><a href='https://sentry.io'>Sentry (Error-Logging)</a></li>
 	</ul>
 
 	<h2>Installation</h2>
 	<p>At first, clone the repo:</p>
 
-	<pre><code class="language-bash"
+	<pre><code class='language-bash'
-			>git clone https://github.com/mawoka-myblock/classquiz && cd ClassQuiz</code
+	>git clone https://github.com/mawoka-myblock/classquiz && cd ClassQuiz</code
-		></pre>
+	></pre>
 	<p>
 		Now, set a <b>VALID</b> Redis-URI in <code>frontend/Dockerfile</code> and, if you want Sentry,
-		set a valid Sentry-DSN.
+		set a valid Sentry-DSN. Note: The problem is that the frontend-container tries to connect to Redis during the
+		build-process. For that, you'll need to provide an available Redis-Instance. For that, I would recommend
+		Upstash, because you get a free Redis-Instance which is available over the internet. This instance won't be used
+		at runtime.
 	</p>
 	<p>
 		You must set a valid hCaptcha-Sitekey in the <code>frontend/Dockerfile</code>.
@@ -75,9 +77,10 @@
 	<h3>Storage Provider</h3>
 	<p>
 		You'll have to set up a storage provider for some pictures (these getting imported from
-		KAHOOT!). For now, you can use <a href="https://deta.sh">Deta</a> or the local filesystem.
+		KAHOOT!). For now, you can use <a href='https://deta.sh'>Deta</a> or the local filesystem.
-		Please note that I would <b>NOT</b> use the local file system because of these funny
+		Please note that I would <b>NOT</b> use the local file system because of <a
-		path-things. I tried to prevent these attacks, but I really wouldn't trust it. You'll have
+		href='https://wiki.owasp.org/index.php/Path_Traversal'>Path Traversals</a>. I tried to prevent these attacks,
+		but I really wouldn't trust it. You'll have
 		to set the
 		<code>STORAGE_BACKEND</code>-environment-variable to either <code>deta</code> or
 		<code>local</code>.
@@ -89,15 +92,15 @@
 	</p>
 	<h4>If you chose the local filesystem...</h4>
 	<p>
-		...you'll have to set the <code>STORAGE_PATH</code> enviromnent variable. The path must be
+		...you'll have to set the <code>STORAGE_PATH</code> environment variable. The path must be
 		absolute (so start with a <code>/</code>).
 	</p>
 	<p>
 		Before you can start your stack, you have to set some environment-variables in your
 		<code>docker-compose.yml</code>.
 	</p>
-	<pre><code class="language-yaml"
+	<pre><code class='language-yaml'
-			>version: "3"
+	>version: "3"
 
 services:
   frontend:
@@ -109,7 +112,7 @@ services:
       - redis
       - api
     environment:
-      REDIS_URL: redis://redis:6379/0?decode_responses=True # For runtime
+	  REDIS_URL: redis://redis:6379/0?decode_responses=True # For runtime
       API_URL: http://api:80 # For runtime
   api:
     build:
@@ -130,7 +133,7 @@ services:
       MAX_WORKERS: "1" # Very important and don't change it!
       MAIL_PORT: "587" # SMTP-Port
       REDIS: "redis://redis:6379/0?decode_responses=True" # decode_response is important!
-      SECRET_KEY: "ghfvfgjgvjgvbh" # openssl rand -hex 32
+      SECRET_KEY: "TOP_SECRET" # openssl rand -hex 32
 	  MEILISEARCH_URL: "http://meilisearch:7700"
       ACCESS_TOKEN_EXPIRE_MINUTES: 30
       HCAPTCHA_KEY: "" # Private hCaptcha key for verification
@@ -181,6 +184,7 @@ volumes:
   data:
   meilisearch-data:
 	</code></pre>
+	<p>Run the following command to generate and set the secret up automatically</p><pre><code class='language-bash'>sed -i "s/TOP_SECRET/$(openssl rand -hex 32)/g" docker-compose.yml</code></pre>
 	<p>Now build and deploy:</p>
 	<pre><code>docker compose build && docker compose up -d</code></pre>
 	<p>You'll have to create an index in Meilisearch with the following command:</p>