nextjs pwa firebase boilerplate

Weiter.js Firebase PWA

Next.js serverloser PWA mit Firebase- und React -Hooks

Hinweis 1: Diese Kesselplatte wird in TypeScript umgewandelt. Für reine JavaScript siehe Zweig old-javascript

Anmerkung 2: Dies ist mein V4 -Boilerplate für React -Web -Apps. Siehe auch meine GraphQL + Postgres SQL -Kesselplatte, Redux + REST + Postgres SQL -Kesselplatte und Redux + REST + MongoDB -Kesselplatte. Eine einfache Landing-Seite von Next.js finden Sie in der nächsten Generen-Landing-Seite.

Unterstützen Sie dieses Projekt

Haben Sie oder Ihr Unternehmen nextjs-pwa-firebase-boilerplate nützlich gefunden? Bitte erwägen Sie eine kleine Spende, sie hilft mir, mehr Zeit für Open-Source-Projekte zu verbringen:

Warum ist das großartig?

Dies ist eine großartige Vorlage für ein Projekt, bei dem Sie reagieren möchten (mit Hooks) (mit statischer Site-Generierung (SSG) oder serverseitigem Rendering (SSR) , von Next.js) als Frontend und Firebase als Backend. Blitz schnell, alles JavaScript.

• Toller Ausgangspunkt für eine PWA (Progressive Web App), die Sie Ihrem Startbildschirm hinzufügen und als Vollbild-App verwenden können.
• PWA-Funktionen wie manifest.json und Offline Support ( next-offline ).
• Kann jetzt als serverlose Funktionen auf Vercel/Zeit bereitgestellt werden.
• Verwendet die neue Firebase Firestore -Datenbank, ist jedoch einfach zu ersetzen/zu entfernen.
• Login/Anmeldung mit Firebase -Authentifizierung.
• Kann SSG getStaticProps oder SSR getServerSideProps verwenden.
• React Hooks und Kontext für Staatsmanagement und Geschäftslogik.
• Freiform-Datenbankmodell. Keine GraphQL- oder REST -API, fügen Sie einfach React -Hooks hinzu und ändern Sie getStaticProps / getServerSideProps wenn Sie Datenbanktabellen ändern / hinzufügen.
• Das visuelle Thema einfach mit CSS zu stylen (z. B. mithilfe von Designprofilgenerator).
• SEO -Unterstützung mit sitemap.xml und robots.txt .
• Support für Google Analytics und google-site-verification (siehe config/config.ts ).
• Flexible Konfiguration mit config/config.ts und .env.local -Datei.
• Code -Linie und Formatierung mit StandardJs ( yarn lint / yarn fix ).
• Einheitstests mit Jasmin ( yarn unit , noch nicht enthalten).
• Tolle Seitengeschwindigkeit, siehe Leuchtturmbewertung:

Demo

Siehe NEXTJS-PWA-FIREBASE-BOILERPLATE, die hier auf Vercel ausgeführt werden.

Wie man benutzt

Klonen Sie dieses Repository:

 git clone https://github.com/tomsoderlund/nextjs-pwa-firebase-boilerplate.git [MY_APP]
cd [MY_APP]

Entfernen Sie den Ordner .git , da Sie ein neues Repository erstellen möchten

 rm -rf .git

Abhängigkeiten installieren:

 yarn  # or npm install

Zu diesem Zeitpunkt müssen Sie Firestore FireBase Firestore einrichten, siehe unten.

Wenn Firebase eingerichtet ist, starten Sie die Web -App mit:

 yarn dev

In der Produktion:

 yarn build
yarn start

Wenn Sie zu http://localhost:3004/ Sie navigieren, sehen Sie eine Webseite mit einer Liste von Artikeln (oder einer leeren Liste, wenn Sie keine hinzugefügt haben).

Ändern Sie die App zu Ihren Anforderungen

Ändern Sie den Namen und die Beschreibung des Apps

• Suchen Sie/ersetzen Sie nach dem name "Next.js Firebase PWA", "NextJS-PWA-firebase-Boilerplate" und description "Next.js Serverless PWA mit Firebase und React Hooks" auf etwas anderes.
• Ändern Sie die version in package.json auf 0.1.0 oder ähnlich.
• Ändern Sie die license in package.json in das, was zu Ihrem Projekt passt.

"Artikel" in etwas anderes umbenennen

Das Hauptdatenbankelement heißt Article , aber Sie möchten wahrscheinlich etwas anderes in Ihrer App.

Benennen die Dateien um:

 git mv hooks/useArticles.tsx hooks/use{NewName}s.tsx

mkdir -p components/{newName}s
git mv components/articles/CreateArticleForm.tsx components/{newName}s/Create{NewName}Form.tsx
git mv components/articles/ArticleDetails.tsx components/{newName}s/{NewName}Details.tsx
git mv components/articles/ArticleList.tsx components/{newName}s/{NewName}List.tsx
git mv components/articles/ArticleListItem.tsx components/{newName}s/{NewName}ListItem.tsx
rm -r components/articles

mkdir pages/{newName}s
git mv "pages/articles/[slug].tsx" "pages/{newName}s/[slug].tsx"
rm -r pages/articles

Suchen/ersetzen Sie dann in den Dateien für verschiedene Gehäuse: article , Article , ARTICLE .

Portnummer ändern

Suchen/ersetzen Sie 3004 für etwas anderes.

Richten Sie die Firebase -Datenbank ein (Firestore)

Richten Sie die Datenbank ein (wenn Sie keine Datenbank benötigen, finden Sie unten "So entfernen/ersetzen Sie Firebase als Datenbank" unten):

1. Gehen Sie zu https://console.firebase.google.com/ und erstellen Sie ein neues Projekt, eine neue Web -App und eine neue Cloud Firestore -Datenbank.
2. Kopieren Sie die firebaseConfig (von der Einrichtung der Firebase Web App) in lib/data/firebase.ts
3. Bearbeiten Sie die .env.local -Datei und setzen Sie den Wert NEXT_PUBLIC_FIREBASE_API_KEY ein.

So entfernen Sie die Abhängigkeit von Firebase

• Führen Sie yarn remove firebase
• Löschen Sie lib/data/firebase.ts und ändern Sie hooks/useArticles.tsx .

Ersetzen Sie Firebase durch Postgres SQL

• Verwenden Sie einen Postgres -Hosting -Anbieter (z. B. https://www.elephantsql.com/)
• Verwendung createSqlRestRoutesServerless in sql-wizard um Ihre eigenen API-Routen einzurichten.

Ersetzen Sie Firebase durch Supabase (Postgres SQL, Echtzeit-Updates)

• Entfernen Sie Firebase: yarn remove firebase
• Supabase hinzufügen: yarn add @supabase/supabase-js
• Fügen Sie NEXT_PUBLIC_SUPABASE_API_KEY zu .env.local hinzu
• Erstellen Sie eine lib/data/supabase.ts :

 import { createClient } from '@supabase/supabase-js'
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_API_KEY
export const supabase = createClient(supabaseUrl, supabaseKey)

• Aktualisieren Sie die JS -Dateien, die lib/data/firebase verweisen

Visuelles Thema ändern (CSS)

1. Ändern Sie die enthaltenen CSS -Dateien in pages/_app.tsx
2. Ändern Sie CSS in public/app.css
3. Ändern Sie die Schriftarten in PageHead.tsx
4. Ändern Sie die Farben in public/manifest.json

Login/Anmeldung mit einer Firebase -Authentifizierung

Sie müssen eine E -Mail/Passwort -Authentifizierung in https://console.firebase.google.com/project/yourapp/authentication/providers aktivieren

Bereitstellung auf Vercel

Hinweis: Wenn Sie Ihr Projekt mit der Schaltfläche Bereitstellung einrichten, müssen Sie Ihr eigenes Repo anstelle dieses Repositorys klonen.

Richten Sie und bereitstellen Sie Ihr eigenes Projekt mit dieser Vorlage mit Vercel ein. Alles, was Sie brauchen, ist Ihr öffentlicher API -Schlüssel für FireBase.