Chat App programmieren mit Express, socket.io, TypeScript, Svelte + Deployment
In diesem Tutorial entwickeln wir eine Chat-Applikation mit Node, Express und socket.io auf dem Backend und Svelte und Sass auf dem Frontend. Außerdem benutzen wir TypeScript für einen besseren Entwicklungsprozess, insbesondere Auto-Vervollständigung. Am Ende geht es um das Deployment auf render.com.
📝 Demo & Quellcode
● Demo: https://svelte-chat-app.onrender.com/
● Code: https://github.com/ScriptRaccoon/svel...
⏱ Zeitmarken
● Vorstellung 00:00
● Teil 1: Setup des Express-Servers mit TypeScript 04:06
● Express Server 04:09
● TypeScript Setup 06:57
● Skripte für Server 10:05
● Teil 2: Setup von socket.io mit TypeScript 14:51
● Setup von socket.io 14:54
● Typen für socket.io 18:23
● Teil 3: Setup des Svelte-Projektes für den Client 21:45
● Svelte mit Vite aufsetzen 21:48
● socket.io auf dem Client 25:20
● Skripte für Client 29:55
● Globale Typen 34:46
● Teil 4: Svelte-Komponenten und die Chat-Logik 38:02
● Login, Header und Chat-Komponente 38:05
● Pfad-Alias 44:20
● Messages- und SendForm-Komponente 47:58
● Nachrichten abschicken 51:12
● Nachrichten anzeigen 56:11
● Teil 5: Bot-Nachrichten und Anzeige der User 01:01:34
● Username in Nachricht anzeigen 01:01:37
● Willkommensnachricht 01:04:34
● Austrittsnachricht 01:08:07
● Liste der User 01:11:42
● Users-Komponente 01:16:33
● Menü 01:20:10
● Stores (Refactoring) 01:24:41
● Teil 6: Styling mit CSS und Barrierefreiheit 01:28:19
● Barrierefreiheit 01:28:22
● Setup von Sass 01:31:13
● Globale Styles 01:31:55
● Header Styles 01:39:34
● Login Styles 01:41:57
● Menü Styles 01:44:34
● Messages Styles 01:46:04
● Scrollen zur letzten Nachricht 01:52:24
● Message Styles 01:58:19
● SendForm Styles 02:00:34
● Breakpoints Datei 02:03:26
● Users Styles 02:06:47
● Tastatursteuerung 02:09:12
● Teil 7: Deployment auf render.com 02:12:15
● GitHub Repository 02:12:18
● Webservice auf render.com 02:15:00
● Abschluss 02:21:28
📙 Quellen
● Node: https://nodejs.org/en/
● Express: http://expressjs.com/
● TypeScript: https://typescriptlang.org/
● socket.io: https://socket.io/
● Svelte: https://svelte.dev/
● Sass: https://sass-lang.com/
💻 Verwendete Tools (Entwicklung)
● Visual Studio Code: https://code.visualstudio.com/
● Svelte for VS Code: https://marketplace.visualstudio.com/...
🎤 Verwendete Software (Aufnahme)
● OBS: https://obsproject.com/de
● Davinci Resolve 16: https://www.blackmagicdesign.com/de/p...
#Express #Svelte #TypeScript
On this page of the site you can watch the video online Chat App programmieren mit Express, socket.io, TypeScript, Svelte + Deployment with a duration of hours minute second in good quality, which was uploaded by the user Script Raccoon 04 March 2023, share the link with friends and acquaintances, this video has already been watched 961 times on youtube and it was liked by 23 viewers. Enjoy your viewing!
