🧑‍💻 Improved developer-docs

frontend/src/routes/docs/develop.svelte

@@ -1,3 +1,13 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import '$lib/hljs.css';
+
+	onMount(async () => {
+		const { default: hljs } = await import('highlight.js/lib/common');
+		hljs.highlightAll();
+	});
+</script>
+
 <svelte:head>
 	<title>ClassQuiz/docs - Development-setup</title>
 	<meta
@@ -11,7 +21,6 @@
 	<h1>Development-setup</h1>
 
 	<h2>Requirements</h2>
-	<h4>Backend</h4>
 	<ul>
 		<li>
 			<a href="https://www.python.org/">Python</a><br /><i
@@ -20,14 +29,8 @@
 		</li>
 		<li><a href="https://caddyserver.com/">Caddy</a></li>
 		<li><a href="https://pipenv.pypa.io/en/latest/">Pipenv</a></li>
-		<li><a href="https://redis.io/">Redis</a></li>
-		<li><a href="https://meilisearch.com">Meilisearch</a></li>
-		<li><a href="https://caddyserver.com"><i>(Optional) Caddy</i></a></li>
 		<li>Linux</li>
-	</ul>
-
-	<h4>Frontend</h4>
-	<ul>
+		<li><a href="https://docker.com">Docker</a></li>
 		<li><a href="https://pnpm.io/">pnpm</a></li>
 	</ul>
 
@@ -35,14 +38,14 @@
 	<ul>
 		<li>
 			Clone the repo:
-			<pre><code>git clone https://github.com/mawoka-myblock/classquiz</code></pre>
+			<pre><code>git clone https://github.com/mawoka-myblock/ClassQuiz</code></pre>
 		</li>
 		<li>
 			Install the dependencies
 			<ul>
 				<li>
 					Python:
-					<pre><code>pipenv install</code></pre>
+					<pre><code>pipenv install -d</code></pre>
 				</li>
 				<li>
 					JS:
@@ -52,21 +55,49 @@
 		</li>
 		<li>
 			Start the other services
-			<ul>
+			<p>
+				There's a small helper-script: It's called <code>run_tests.sh</code> and does more than
+				you think.
+			</p>
+			<h4>run_tests.sh - Docs</h4>
+			<p>
+				You can run this script with bash. It helps you managing docker-containers you need
+				to run ClassQuiz. The standard workflow is the following:
+			</p>
+			<ol>
 				<li>
-					Caddy:
+					Prepare all the containers:
+					<pre><code>./run_tests.sh +</code></pre>
+				</li>
+				<li>
+					Start the Python-server:
+					<pre><code>pipenv run uvicorn classquiz:app --reload --proxy-headers</code
+						></pre>
+				</li>
+				<li>
+					Start the frontend-dev-server:
+					<pre><code
+							>cd frontend && API_URL=http://localhost:8080 REDIS_URL=redis://localhost:6379/0?decode_responses=True pnpm dev</code
+						></pre>
+				</li>
+				<li>
+					Start Caddy:
 					<pre><code>caddy run</code></pre>
 				</li>
-				<li>
-					Redis:
-					<pre><code>redis-server</code></pre>
-				</li>
-			</ul>
+			</ol>
+			<p>If you're done developing: <code>./run_tests.sh -</code></p>
+			<p>If you want to run all the tests: <code>./run_tests.sh a</code></p>
 		</li>
 		<li>
 			Add the following line to your <code>/etc/hosts</code>-file, so you can visit ClassQuiz
 			via <code>test.com</code> (Required for the Captcha and Mapbox)
 			<pre><code>127.0.0.1 test.com</code></pre>
+
+			Now you can visit ClassQuiz at<a
+				href="http://test.com:8080"
+				rel="nofollow"
+				target="_blank">http://test.com:8080</a
+			>.
 		</li>
 		<li>
 			Set your config up in your .env-file. What you have to set up can you see in the
@@ -79,7 +110,14 @@
 				<li><code>mail_server</code></li>
 				<li><code>mail_port</code></li>
 				<li><code>secret_key</code></li>
-				<li><code>meilisearch_url</code></li>
+			</ul>
+			<p>
+				You'll have to set up the storage. For developing, I'd recommend using the local
+				file system. to do that, set the following 2 environment-varialbes:
+			</p>
+			<ul>
+				<li><code>STORAGE_PATH=/tmp/storage</code></li>
+				<li><code>STORAGE_BACKEND=local</code></li>
 			</ul>
 		</li>
 		<li>
@@ -97,6 +135,13 @@
 		</li>
 	</ul>
 
+	<h2>Pre-Commit</h2>
+	<p>
+		We're using <a href="https://pre-commit.com/">Pre-Commit</a> for our pre-commit hooks. Install
+		it by running the following command:
+	</p>
+	<pre><code>pipenv run pre-commit install</code></pre>
+
 	<h2>BEFORE you submit a Pull-Request</h2>
 	<p>Please use <a href="https://gitmoji.dev">Gitmoji</a> for your commits.</p>
 	<h4>Frontend</h4>
@@ -104,5 +149,5 @@
 	<pre><code>pnpm run format && pnpm run lint</code></pre>
 
 	<h4>Backend</h4>
-	<p>IDK, just check that it works!</p>
+	<p>Run the tests: <code>./run_tests.sh a</code></p>
 </article>