6 wesentliche Funktionen, die jedes Web-Starter-Kit enthalten sollte

Black Friday: Enjoy a 25% discount on the starter kits. Use code BLACKFRIDAY2024 at checkout.

LaunchFast Logo LaunchFast

6 wesentliche Funktionen, die jedes Web-Starter-Kit enthalten sollte

Rishi Raj Jain
6 Essential Features Every Web Starter Kit Should Include

Benötigen Sie ein Web-Starter-Kit, das alles bietet? Das müssen Sie in 30 Sekunden wissen:

Sponsored AICardify - AI-generated greeting cards

Generate AI Powered Greeting Cards For Every Occasion

Ein nützliches Web-Starter-Kit benötigt diese 6 Kernfunktionen:

FunktionWas Sie bekommenBeliebte Tools
Benutzer-Login- und KontosystemBenutzerauthentifizierung, Sitzungen, ZugriffskontrolleAuthjsdev, Lucia, Clerk
EntwicklungstoolsCode-Editor, Versionskontrolle, LintingVS Code, Prettier, ESLint
DatenverwaltungstoolsDatenbank-Setup, StatusverwaltungMongoDB, PostgreSQL, Firestore, Redis , SQLite
CSS- und Design-SetupStyling-Framework, DesignsystemTailwind CSS, Bootstrap CSS
API-ToolsEndpunkte, Authentifizierung, SicherheitAuthjsdev, JWT (jsonwebtoken)
SicherheitseinrichtungSSL, Header, EingabevalidierungHTTPS, CSP, Autorisierung

Warum das wichtig ist: Ein gutes Starterkit verkürzt die Entwicklungszeit um 40–60 % und hilft Ihnen, häufige Einrichtungsfehler zu vermeiden

Kurze Fakten:

  • Aufbauzeit: 24–48 Stunden
  • Funktioniert mit: Astro, SvelteKit, Nextjs
  • Browserunterstützung: Alle modernen Browser
  • Lernkurve: 1 Tag für die Ersteinrichtung

Die LaunchFast Astro-, Nextjs- und SvelteKit-Starterkits enthalten alle diese Funktionen vorkonfiguriert. Kaufen, klonen und mit dem Start beginnen!

Inhaltsverzeichnis

1 Benutzer-Login- und Kontosystem

Jede Web-App benötigt ein solides Anmeldesystem. Folgendes sollte Ihr Starter-Kit für die Benutzerverwaltung enthalten:

KomponenteZweckGemeinsame Implementierung
AuthentifizierungBenutzeridentität überprüfenE-Mail/Passwort, soziale Logins
SitzungsverwaltungBenutzerstatus verfolgenCookies, Datenbankspeicherung
PasswortsicherheitBenutzerdaten schützenPasswort-Hashing

Ihr grundlegendes Anmeldesystem muss Folgendes verarbeiten:

  • Melden Sie sich mit E-Mail-Checks an
  • Passwort-Resets
  • Anmelde-/Abmeldeablauf
  • Sitzungszeitüberschreitungen

Möchten Sie das schwere Heben überspringen? Hier sind einige beliebte vorgefertigte Optionen:

AuthentifizierungsanbieterFunktionenAm besten für
LuciaVerschlüsselte Cookies, zustandslose SitzungenEinfache Setups
EisensitzungVerschlüsselte Cookies, zustandslose SitzungenEinfache Setups
AuthjsdevIntegrierte API-Routen, DatenbanksitzungenNextjs, SvelteKit-Projekte
SachbearbeiterSoziale Anmeldungen, anpassbare BenutzeroberflächeGroße Anwendungen
Auth0Soziale Anmeldungen, anpassbare BenutzeroberflächeGroße Anwendungen

Lassen Sie uns dies anhand einer Online-Kursplattform aufschlüsseln:

Ein Student meldet sich an. Das System prüft, ob er bezahlt hat. Wenn ja, erhält er Zugriff auf seine Kurse. Das System verfolgt seinen Fortschritt und hält ihn angemeldet

Um die Sicherheit zu gewährleisten:

  • Hashen Sie diese Passwörter
  • Verwenden Sie HTTPS für die Authentifizierung
  • Sperren Sie Ihre Cookies

Die LaunchFast Astro-, Nextjs- und SvelteKit-Starterkits sind mit all diesen integrierten Funktionen ausgestattet. Sie erhalten ein sicheres Authentifizierungssystem ohne Setup-Kopfschmerzen

2 Grundlegendes Dev-Tools-Setup

Folgendes benötigen Sie, um sofort mit dem Codieren beginnen zu können:

WerkzeugkategorieWerkzeugeZweck
Code-EditorVS-CodeCode schreiben und debuggen
VersionskontrolleNodejs, npm/garnPakete verwalten
CodequalitätESLint, PrettierHalten Sie den Code sauber
TypensicherheitTypeScriptFehler frühzeitig erkennen

1\ VS-Code: Ihre Code-Startseite

VS Code ist der Editor der Wahl für 73 % der EntwicklerHier sind die unverzichtbaren Erweiterungen:

ErweiterungDownloadsWas Sie bekommen
Live-Server46M+Änderungen sofort sehen
GitHub-Copilot146M+Erhalten Sie AI-Codevorschläge
GitLens30M+Codeänderungen verfolgen
Hübscher42M+Code automatisch formatieren

2\ Nodejs: Ihre Build-Grundlage

Terminal window
# Set up Node
echo "v20.10.0" > .nvmrc
nvm use
# Start your project
npm init -y

3\ TypeScript: Typsicherheit hinzufügen

Terminal window
# Get TypeScript ready
npm install --save-dev typescript @types/node @tsconfig/node20
# Add to package.json
{
"scripts": {
"build": "tsc",
"dev": "tsc --watch"
}
}

4\ Lassen Sie Ihren Code gut aussehen

.prettierrc
{
"tabWidth": 2,
"trailingComma": "es5",
"semi": true,
"singleQuote": true
}

Wählen Sie Ihr Starter-Framework:

RahmenBefehl
Astronpm create astro@latest
SvelteKitnpx sv create my-app
Nextjsnpx create-next-app@latest

Fügen Sie dies zum besseren Debuggen hinzu:

{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Server",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev"
}
]
}

3\ Datenverwaltungstools

Folgendes müssen Sie über Datenbanken für Ihr Web-Starter-Kit wissen:

DatenbanktypAm besten fürVerwendet vonHauptmerkmale
MySQLStrukturierte DatenFacebook, TwitterSQL-Abfragen, ACID-Konformität
MongoDBUnstrukturierte DatenUber, eBayDokumentbasiert, hohe Skalierbarkeit
PostgreSQLKomplexe AbfragenFinanz-AppsDatenintegrität, JSON-Unterstützung
RedisCaching, SitzungenInstagram, GitHubIn-Memory, schnelle Leistung
FeuerladenNoSQL, EchtzeitGoogle, FirebaseEchtzeitdaten, Offline-Unterstützung
SQLiteEingebettete DatenbankMobile Apps, IoTLeicht, in sich geschlossen

Die Staatsverwaltung hängt von der Wahl Ihres Rahmenwerks ab:

RahmenWerkzeugSetup-Befehl
AstroNanostoresimport { atom } from 'nanostores'
SchlankEinbaumärkteimport { beschreibbar } aus 'svelte/store'
NextjsZustandnpm i zustand

So richten Sie einen Svelte-Shop ein:

store.js
import { writable } from 'svelte/store';
export const userData = writable({
name: '',
email: '',
preferences: {}
});

SQL vs. NoSQL: Kurzanleitung

FaktorSQL-DatenbankenNoSQL-Datenbanken
DatenstrukturFestes SchemaFlexibles Schema
SkalierungVertikalHorizontal
AbfragespracheSQLVerschiedene
AnwendungsfallBankwesen, CRMEchtzeitdaten, IoT

Hier ist ein grundlegendes CRUD-Setup:

api/users.js
export async function getUser(id) {
return await db.query('SELECT * FROM users WHERE id = ?', [id])
}
export async function createUser(data) {
return await db.query('INSERT INTO users SET ?', data)
}

Halten Sie Ihre Dateien organisiert:

OrdnerInhaltZweck
/dbDatenbankkonfigurationenVerbindungsaufbau
/apiAPI-RoutenDatenendpunkte
/storesStaatsverwaltungClientseitige Daten

4\ CSS- und Design-Setup

Schauen wir uns die besten CSS-Frameworks an, aus denen Sie auswählen können:

RahmenGröße (komprimiert)LernzeitAm besten fürVerwendet von
Bootstrap16 KB1-2 TageRapid PrototypingTwitter, Spotify
Rückenwind5087kB3-4 TageSonderanfertigungenShopify, OpenAI
Stiftung347 KB2-3 TageUnternehmens-Apps-

Möchten Sie loslegen? Hier ist die Grundkonfiguration:

Terminal window
# Bootstrap
npm install bootstrap@5.3.3
# Tailwind
npm install -D tailwindcss
npx tailwindcss init

Fügen Sie für Tailwind Folgendes in Ihr CSS ein:

@tailwind base;
@tailwind components;
@tailwind utilities;

Hier sind einige Tools, die Ihre CSS-Arbeit erleichtern:

WerkzeugZweckPreis
CSS-RastergeneratorLayouterstellungKostenlos
PurifyCSSNicht verwendetes CSS entfernenKostenlos
CSS-ScanStile von Websites kopieren100 $ lebenslang
TailscanRückenwind-Inspektor59 $/Jahr

So sieht eine grundlegende Tailwind-Komponente aus:

const Nav = () => (
<nav className="fixed w-full bg-white shadow-lg">
<div className="max-w-7xl mx-auto px-4">
<div className="flex justify-between h-16">
<Logo />
<MenuItems />
</div>
</div>
</nav>
)

Einige Zahlen, die Sie interessieren könnten:

Tailwind als Low-Level-CSS-Framework ist zu meiner bevorzugten Styling-Lösung geworden. Es hat die meisten Nachteile behoben, auf die ich auf meiner Reise durch verschiedene CSS-Lösungen gestoßen bin – Rishi Raj Jain, LaunchFast

So organisieren Sie Ihre Designdateien:

OrdnerInhalt
/stylesGlobales CSS
/componentsUI-Komponenten

5\API-Setup und Tools

Folgendes benötigen Sie, um APIs in Ihrem nächsten Projekt einzurichten:

KomponenteZweckSetup-Befehl
TLS/SSLNachrichtenverschlüsselungopenssl req -x509 -nodes -days 365 -newkey rsa:2048
OAuth2Benutzerauthentifizierungnpm install oauth2-server
JWTToken-Handlingnpm install jsonwebtoken
NextAuthjsSoziales Loginnpm install next-auth

Schauen wir uns verschiedene Authentifizierungsmethoden an:

AuthentifizierungsmethodeEinrichtungszeitSicherheitsstufeAm besten für
API-Schlüssel30 MinutenGrundlegendInterne Werkzeuge
OAuth 202-3 StundenHochÖffentliche Apps
JWT1 StundeMittelMobile Apps
mTLS4-5 StundenSehr hochUnternehmen

Die Zahlen lügen nicht:

So gehen Sie mit API-Schlüsseln RICHTIG um:

// BAD - Don't do this
const apiKey = "sk_test_123456789";
// GOOD - Do this instead
const apiKey = process.env.API_KEY;

Möchten Sie Google OAuth in Ihrem Nextjs-Projekt? So geht’s:

import NextAuth from 'next-auth'
import GoogleProvider from 'next-auth/providers/google'
export default NextAuth({
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_ID,
clientSecret: process.env.GOOGLE_SECRET,
}),
],
})

Organisieren Sie Ihre Dateien wie folgt:

OrdnerInhalt
/apiAPI-Routen
/authAuth-Konfiguration
/middlewareAPI-Middleware
/lib/utilsHilfsfunktionen

6\ Grundlegende Sicherheitseinrichtung

So schützen Sie Ihre Web-App vor häufigen Bedrohungen:

SicherheitsmerkmalZweckUmsetzung
SSL-ZertifikatVerschlüsselt Daten während der ÜbertragungVon einer vertrauenswürdigen Zertifizierungsstelle installieren, HTTPS erzwingen
SicherheitsheaderBrowser-SchutzregelnCSP, HSTS, X-Frame-Optionen festlegen
EingabevalidierungVerhindert InjektionsattackenVerwenden Sie zod/Valibot für Schemaprüfungen
Sichere CookiesSchützt SitzungsdatenSetzen Sie die Flags „HttpOnly“ und „Secure“
UmgebungsvariablenVersteckt sensible DatenSpeichern Sie API-Schlüssel und Anmeldeinformationen in env

Fügen Sie diese Header zu Ihrer Nextjs-App hinzu:

next.config.js
const securityHeaders = [
{
key: 'Strict-Transport-Security',
value: 'max-age=63072000'
},
{
key: 'X-Frame-Options',
value: 'DENY'
},
{
key: 'Content-Security-Policy',
value: "default-src 'self'"
}
]

So sperren Sie Ihre API-Routen:

export default function handler(req, res) {
// Block non-POST requests
if (req.method !== 'POST') {
return res.status(405).end()
}
// Check auth token
const token = req.headers.authorization
if (!isValidToken(token)) {
return res.status(401).json({
error: 'Invalid token'
})
}
}

Kennen Sie diese Angriffe und wie Sie sie stoppen können:

AngriffstypRisikoLösung
XSSSkriptinjektionCSP-Header, Eingabebereinigung
CSRFGefälschte AnfragenCSRF-Tokens, SameSite-Cookies
SQL-InjectionDB-KompromissParametrisierte Abfragen
DoSServerüberlastungRatenbegrenzung, CDN-Schutz

Folgendes MÜSSEN Sie zuerst tun:

1 Zu HTTPS wechseln: Blockieren Sie den gesamten HTTP-Verkehr 2 Sicherheitsheader hinzufügen: Richten Sie CSP und andere Browserregeln ein 3 Alle Eingaben prüfen: Formulardaten und API-Anfragen filtern 4 Cookies sperren: Aktivieren Sie die Flags „HttpOnly“ und „Secure“. 5 Schützen Sie Ihre Geheimnisse: Verwenden Sie Umgebungsvariablen

Testen Sie Ihr Setup mit:

  • Mozilla-Observatorium
  • Sicherheitsheader
  • SSL Labs-Servertest

Ihre Sicherheitsarbeit ist nach der Einrichtung noch nicht erledigt. Suchen Sie jede Woche nach Abhängigkeitsaktualisierungen und führen Sie jeden Monat Sicherheitsscans durch

Checkliste für den Website-Start

Folgendes benötigen Sie, um Ihre Website zum Laufen zu bringen:

StartphaseWerkzeugeZweck
GeschwindigkeitGoogle PageSpeed ​​Insights, WebPageTest, GTMetrixLadezeitprüfungen
SicherheitSSL-Zertifikat, HTTPSDatensicherheit
SEOXML-Sitemap, robotstxtGoogle-Indexierung
AnalytikWide Angle Analytics, Google Analytics, Pirsch Analytics usw.Benutzerverfolgung

Wählen Sie Ihr Hosting:

Hosting-AnbieterFunktionenAm besten für
FlyioGlobale Bereitstellung, automatische Skalierung, Docker-UnterstützungApps, die weltweit eine geringe Latenz benötigen
VercelServerlose Funktionen, einfache Integration mit Nextjs, automatische SkalierungFrontend-Frameworks und statische Websites
NetlifyKontinuierliche Bereitstellung, serverlose Funktionen, FormularverarbeitungJAMstack-Sites und statische Web-Apps
AWS AmplifyFull-Stack-Entwicklung, einfache Integration mit AWS-Services, CI/CDKomplexe Anwendungen, die eine AWS-Infrastruktur benötigen

Muss unbedingt durchgeführt werden:

1 Testen Sie jedes Formular und jeden Zahlungsablauf 2 Klicken Sie auf alle Links 3 Überprüfen Sie die SSL-Einrichtung 4 Sitemap an Google senden 5 Erstellen Sie eine 404-Seite

Beschleunigen Sie die Dinge:

AufgabeWerkzeugErgebnis
Bilder komprimierenwebp-Format25-35 % kleiner
SchrumpfcodeTerser30-50 % kleiner
Verwenden Sie CDNCloudflare/VercelSchnelleres Laden
Cache festlegenBrowser-CacheSchnelle Rückgabe

Deshalb ist Geschwindigkeit wichtig: Über die Hälfte Ihrer Besucher verlässt die Website, wenn das Laden Ihrer Website länger als 3 Sekunden dauert

Zusammenfassung

Ihr Starter-Kit soll Ihnen das Leben erleichtern. Wählen Sie Werkzeuge aus, die gut zusammenpassen und zu dem passen, was Sie bauen

Learn More Authentifizieren von Benutzern in Astro mit besserer Authentifizierung: Eine Schritt-für-Schritt-Anleitung
Authentifizieren von Benutzern in Astro mit besserer Authentifizierung: Eine Schritt-für-Schritt-Anleitung November 24, 2024
Astro vs. Next.js: Auswahl des richtigen Frameworks im Jahr 2024
Astro vs. Next.js: Auswahl des richtigen Frameworks im Jahr 2024 October 30, 2024
Schneller Start mit Astro 4.16
Schneller Start mit Astro 4.16 October 23, 2024