static website
1.0.0
Willkommen im CDNJS/Static-Website Repository, der Heimat der neuen CDNJS-Website, die mit Vue & Nuxt erstellt wurde, nach dem neuen CDNJS-Branding-Vorschlag von CDNJS/Brand.
Diese Website stützt sich vollständig auf die CDNJS -API, die zu operieren ist, was zu einer sehr geringen Ressourcennutzung führt, um die Site und die begrenzte App -Logik zu bedienen, um Daten zu aktualisieren (nur Sitemaps müssen aktualisiert werden, alles andere verwendet API -Anrufe, wenn eine Seite geladen wird).
Dieses Projekt läuft auf node.js. Bitte stellen Sie sicher, dass eine Version installiert ist, die unserer definierten Anforderung in der .nvmrc -Datei für dieses Projekt entspricht.
In diesem Projekt ist eine Abhängigkeitssperrdatei enthalten. Dies wird verwendet, um sicherzustellen, dass alle Installationen des Projekts dieselbe Version von Abhängigkeiten für die Konsistenz verwenden.
Sie können die Knotenabhängigkeiten nach dieser Sperrdatei installieren, indem Sie ausführen:
npm ciSobald die Abhängigkeiten installiert sind, ist die Website im Entwicklungsmodus bereit. Ausführen:
npm run dev Fügen Sie vor dem Ausführen npm run dev ein globales NPM -Paket hinzu, um das 'NODE_ENV' is not recognized as an internal or external command :
npm install -g win-node-envDie Website wird mit Nuxt erstellt und basiert auf WebPack, um das Client-Seite-Bundle zu generieren, das zur Rendere der Website und zur Bereitstellung von Interaktivität verwendet wird. Aus diesem Grund können wir den Analysator von WebPack verwenden, um besser zu verstehen, was zur Größe des endgültigen Bündels beiträgt.
Verwenden Sie zum Ausführen des Analysators das folgende Paketskript:
npm run dev:analyze Bei der Arbeit mit der Website in der Entwicklung wird die Umgebungsvariable http://localhost:3000/ SITE_HOST -Umgebungsvariable mithilfe von npm run dev oder npm run dev:analyze .
Beim Bereitstellen dieser Site für die Produktion mithilfe des npm run build und npm run start -Skripte muss die Umgebungsvariable SITE_HOST festgelegt werden und sollte die kanonische Basis für die Hosted der Website sein. In der Produktion für uns ist dies auf https://cdnjs.com/ festgelegt.
Um Google Analytics für eine Bereitstellung der Website zu aktivieren, sollten Sie die GA_ID -Umgebungsvariable festlegen. Dies sollte auf die eindeutige Google Analytics-ID für Ihre Eigenschaft im Formular UA-xxxxxxxxx-x eingestellt werden.
Google Analytics wird mit der Site mit dem Modul @nuxtjs/google-analytics gebündelt. Wenn die Umgebungsvariable nicht angegeben ist, wird Google Analytics nicht mit der Bereitstellung gebündelt.
Um eine grundlegende Sentry -Fehlerprotokollierung zu aktivieren, muss die Umgebungsvariable SENTRY_DSN mit einer gültigen DSN -URL von Sentry festgelegt werden.
Um Source Maps & Release -Tracking für die Fehlerberichterstattung in der Produktion zu aktivieren, müssen die Variablen SENTRY_ORG und SENTRY_PROJECT -Umgebungsumgebungen mit den korrekten Sentry -Projektinformationen festgelegt werden, sowie SENTRY_AUTH_TOKEN , die auf einen gültigen Auth -Token von Sentry eingestellt werden. Quellkarten werden als Produktion verwendet. Wir verwenden minifiedes, gebündeltes JavaScript, sodass die Sourcemaps Sentry anzeigen können, wohin ein Fehler im Quellcode stammt.
Standardmäßig wird während des Erstellungsprozesses eine robots.txt Datei für die Site generiert, auf der User-agent: * und Allow: * . Wenn Sie eine privatere Instanz der Website haben oder eine mögliche SEO -Kontamination verhindern möchten, können Sie die ROBOTS_DISALLOW Env var auf 1 sein. Dadurch wird die Allow: * Regel nicht Disallow: / .
Um die Sitemap -Generierung für die Site zu aktivieren, muss NODE_ENV auf production gesetzt werden. Dies ermöglicht die anfängliche Sitemap -Generierung während des Builds sowie die Hintergrundaufgabe zum Regenerieren der Sitemap während npm run start alle 30 Minuten.
Durch NODE_ENV=production wird das oben genannte Skript von robots.txt Generation auch angegeben, das eine Regel, die auf die Sitemap -Indexdatei hinweist, basierend auf dem bereitgestellten SITE_HOST Env var aufgenommen wird.
(Beachten Sie, dass NODE_ENV für npm run dev:analyze , npm run build & npm run start automatisch auf production eingestellt wird.)
Um diese Website für die Produktion bereitzustellen, sollten die folgenden Schritte unternommen werden:
npm cinpm run buildnpm run start Für Bereitstellungen für einige PAAS -Hosts wird die Installation von Abhängigkeiten und das Erstellen der App automatisch durchgeführt, wobei npm run start in der Procfile definiert wird.
Um den Port zu ändern, an den die App bindet, setzen Sie die PORT VAR, wenn Sie das Skript ausführen.
Der benutzerdefinierte Express -Server wird verwendet, um unsere Sitemaps zu verarbeiten, da wir zu viele Routen für das Sitemap -Angebot von Nuxt haben, um zuverlässig zu handhaben. Während des Build -Schritts ( npm run build ) werden erste Sitemaps erzeugt. Der Express -Server regeneriert diese dann alle 30 Minuten mit der CDNJS -API. Ein Protokoll, das das Ergebnis der letzten Generation in Express enthält, finden Sie unter /sitemap-log.txt auf der Website.
Unsere vollständige Tests für die Linie können jederzeit ausgeführt werden mit:
npm testIn diesem Repository sind eine Eslint-Konfigurationsdatei sowie eine Sass-Lint-Konfigurationsdatei enthalten, mit der ein konsistenter Stil in der Codebasis für JS/VUE und SCSS in der App verwendet wird.
Um dies durchzusetzen, verwenden wir sowohl Eslint als auch Sass-Lint in unseren Tests. Um eSlint jederzeit auszuführen, der den Codestil aller JavaScript- und Vue -Dateien überprüft, können Sie verwenden:
npm run test:eslintEslint bietet auch automatische Fixfunktionen, diese können mit der Codebasis mit:
npm run test:eslint:fixIn ähnlicher Weise kann Sass-Lint jederzeit ausgeführt werden, um die Qualität aller in der App verwendeten SCSS-Dateien durch Ausführen zu überprüfen:
npm run test:scssEin sekundäres Paket, Sass-Lint-Auto-Fix, hilft mit der automatischen Behebung einiger der durch Sass-Lint aufgeworfenen Fehler, die mit:
npm run test:scss:fix Wie beim npm test , bei dem sowohl Eslint- als auch Sass-Lint ausgeführt werden, steht ein kürzeres Paketskript zur Verfügung, um automatisch zu versuchen, Probleme aus beiden Lining-Paketen zu beheben, die durch Ausführen verwendet werden können:
npm run test:fix
