From 9821f46ff380a2377280afa513000106323b1392 Mon Sep 17 00:00:00 2001 From: Denis Ergin Date: Sun, 22 Sep 2024 15:40:03 +0200 Subject: [PATCH] feat(slides): Project Setup Slides --- .../slides/project-setup/docker.astro | 15 +++++++ .../slides/project-setup/index.astro | 15 +++++++ src/components/slides/project-setup/npm.astro | 45 +++++++++++++++++++ .../slides/project-setup/title.astro | 3 ++ .../slides/project-setup/using-python.astro | 20 +++++++++ .../slides/project-setup/web-apps.astro | 17 +++++++ src/pages/slides/setting-up-a-project.astro | 8 ++++ 7 files changed, 123 insertions(+) create mode 100644 src/components/slides/project-setup/docker.astro create mode 100644 src/components/slides/project-setup/index.astro create mode 100644 src/components/slides/project-setup/npm.astro create mode 100644 src/components/slides/project-setup/title.astro create mode 100644 src/components/slides/project-setup/using-python.astro create mode 100644 src/components/slides/project-setup/web-apps.astro create mode 100644 src/pages/slides/setting-up-a-project.astro diff --git a/src/components/slides/project-setup/docker.astro b/src/components/slides/project-setup/docker.astro new file mode 100644 index 0000000..55e3c1b --- /dev/null +++ b/src/components/slides/project-setup/docker.astro @@ -0,0 +1,15 @@ +
+
+

Bereitstellung mittels Docker

+
+ +
+
    +
  • Mit Docker-Container ist man bereits sehr nah an "Produktion"
    • +
  • Alle Assets werden in einen NginX-Container platziert
    • +
  • Der Container kann dann "überall" deployed werden
    • +
+
+ + +
\ No newline at end of file diff --git a/src/components/slides/project-setup/index.astro b/src/components/slides/project-setup/index.astro new file mode 100644 index 0000000..68e48dc --- /dev/null +++ b/src/components/slides/project-setup/index.astro @@ -0,0 +1,15 @@ +--- +import TitleSlide from './title.astro' +import WebBased from './web-apps.astro' +import PythonHttp from './using-python.astro' +import Docker from './docker.astro' +import Npm from './npm.astro' +--- + +
+ + + + + +
\ No newline at end of file diff --git a/src/components/slides/project-setup/npm.astro b/src/components/slides/project-setup/npm.astro new file mode 100644 index 0000000..4b8b122 --- /dev/null +++ b/src/components/slides/project-setup/npm.astro @@ -0,0 +1,45 @@ +
+
+

NodeJS + NPM

+
+ +
+

+ NodeJS ist eine JavaScript-Runtime die auf vielen verschiedenen Platform Anwendung findet. +

+ Im späteren Verlauf werden wir NodeJS auf jeden Fall verwenden. Deshalb lohnt es sich, die Runtime auf jeden Fall zu installieren. +

+ NodeJS kommt mit dem Package Manager "NPM". Wir werden NPM für verschiedene Sachen verwenden. +

+
+ +
+

Installation

+

+ Besuche die NodeJS-Website und lade dort das Program herunter. +

+ Alternativ mit Choco, Brew, oder dem Linux-Package Manager eurer Wahl. +

+
+ +
+

Setup von Web-Projekten mittels NPM

+ 

+      User> # Projektordner erstellen
+      User> mkdir mein-html-project && cd mein-html-project
+      User> # Im Projektordner ein NPM-Projekt initialisieren
+      User> npm init 
+      User> # Optional noch git initialisieren
+      User> git init
+
+
+ +
+
    +
  • Für den Anfang wäre die Arbeit mit NodeJS "Overkill"
    • +
  • Im späteren Verlauf werden wir uns aber mit dem Thema bundling beschäftigen
    • +
  • Dafür werden wir einen Bundler Namens "Vite" verwenden
    • +
  • Die Installation wird dann über NPM erfolgen
    • +
+
+
\ No newline at end of file diff --git a/src/components/slides/project-setup/title.astro b/src/components/slides/project-setup/title.astro new file mode 100644 index 0000000..2600036 --- /dev/null +++ b/src/components/slides/project-setup/title.astro @@ -0,0 +1,3 @@ +
+

Web-Projekte aufsetzen

+
\ No newline at end of file diff --git a/src/components/slides/project-setup/using-python.astro b/src/components/slides/project-setup/using-python.astro new file mode 100644 index 0000000..babe6a4 --- /dev/null +++ b/src/components/slides/project-setup/using-python.astro @@ -0,0 +1,20 @@ +
+
+

Python Web-Server

+
+ +
+

+ Für diejenigen, die bereits Python auf dem Laptop installiert haben. +
+ Bietet eine schnelle und einfache Lösung, lokale HTML-Dateien auszuspielen. +

+
+ +
+ 

+      User> cd <ordner-mit-html-dateien>
+      User> python3 -m http.server
+
+
+
\ No newline at end of file diff --git a/src/components/slides/project-setup/web-apps.astro b/src/components/slides/project-setup/web-apps.astro new file mode 100644 index 0000000..347646f --- /dev/null +++ b/src/components/slides/project-setup/web-apps.astro @@ -0,0 +1,17 @@ +
+
+

Webbasierte Lösungen

+
+ +
+

Genug für den Anfang, sobald wir mit JavaScript arbeiten, sollten alternative Lösungen bevorzugt werden

+
+ +
+ +
+
\ No newline at end of file diff --git a/src/pages/slides/setting-up-a-project.astro b/src/pages/slides/setting-up-a-project.astro new file mode 100644 index 0000000..a3729c8 --- /dev/null +++ b/src/pages/slides/setting-up-a-project.astro @@ -0,0 +1,8 @@ +--- +import Reveal from "../../layouts/Reveal.astro" +import Slides from '../../components/slides/project-setup/index.astro' +--- + + + + \ No newline at end of file