Jamstack mit React, Serverless und Airtable

Der beste Weg zu lernen ist, zu bauen. Lassen Sie uns über dieses heiße neue Schlagwort, Jamstack, lernen, indem wir eine Website mit React, Netlify (Serverless) Functions und Airtable bauen. Eine der Zutaten von Jamstack ist statisches Hosting, aber das bedeutet nicht, dass alles auf der Website statisch sein muss. Tatsächlich werden wir eine App mit voller CRUD-Funktionalität bauen, genau wie ein Tutorial für jede Webtechnologie mit traditionellerem serverseitigem Zugriff.

Warum diese Technologien, fragen Sie?

Sie wissen es vielleicht schon, aber das „JAM“ in Jamstack steht für JavaScript, APIs und Markup. Diese Technologien sind einzeln nicht neu, daher ist Jamstack wirklich nur eine neue und kreative Art, sie zu kombinieren. Mehr darüber können Sie auf der Jamstack-Website lesen.

Einer der wichtigsten Vorteile von Jamstack ist die einfache Bereitstellung und das Hosting, was die von uns verwendeten Technologien stark beeinflusst. Durch die Einbindung von Netlify Functions (für Backend-CRUD-Operationen mit Airtable) können wir unsere Full-Stack-Anwendung auf Netlify bereitstellen. Die Einfachheit dieses Prozesses ist die Schönheit des Jamstack.

Was die Datenbank betrifft, habe ich Airtable gewählt, weil ich etwas wollte, das einfach zu bedienen ist. Ich wollte mich auch nicht in technischen Datenbankdetails verlieren, daher passt Airtable perfekt. Hier sind einige der Vorteile von Airtable:

1. Sie müssen keine Datenbank selbst bereitstellen oder hosten
2. Es kommt mit einer Excel-ähnlichen GUI zur Anzeige und Bearbeitung von Daten
3. Es gibt ein schönes JavaScript SDK

Was wir bauen

Zur Orientierung für das Folgende: Wir werden eine App bauen, mit der Sie Online-Kurse verfolgen können, die Sie belegen möchten. Persönlich nehme ich an vielen Online-Kursen teil, und manchmal ist es schwierig, mit denen in meinem Rückstand Schritt zu halten. Diese App ermöglicht es Ihnen, diese Kurse zu verfolgen, ähnlich wie eine Netflix-Warteschlange.

 

Einer der Gründe, warum ich viele Online-Kurse belege, ist, dass ich selbst Kurse erstelle. Tatsächlich habe ich einen neuen Kurs verfügbar, in dem Sie lernen können, wie Sie sichere und produktionsreife Jamstack-Anwendungen mit React und Netlify (Serverless) Functions erstellen. Wir werden Authentifizierung, Datenspeicherung in Airtable, Styled Components, Continuous Integration mit Netlify und mehr behandeln! Schauen Sie sich das an  →

Airtable-Einrichtung

Lassen Sie mich zuerst klarstellen, dass Airtable ihre Datenbanken als „Bases“ bezeichnet. Um mit Airtable zu beginnen, müssen wir ein paar Dinge tun.

1. Registrieren Sie sich für ein kostenloses Konto
2. Erstellen Sie eine neue „Base“
3. Definieren Sie eine neue Tabelle zum Speichern von Kursen

Als Nächstes erstellen wir eine neue Datenbank. Wir melden uns bei Airtable an, klicken auf „Add a Base“ und wählen die Option „Start From Scratch“. Ich habe meine neue Base „JAMstack Demos“ genannt, damit ich sie für verschiedene Projekte in Zukunft nutzen kann.

Als Nächstes klicken wir auf die Base, um sie zu öffnen.

Sie werden feststellen, dass dies einem Excel- oder Google Sheets-Dokument sehr ähnlich sieht. Das ist wirklich gut, um Daten direkt im Dashboard bearbeiten zu können. Es gibt bereits ein paar Spalten, aber wir fügen unsere eigenen hinzu. Hier sind die Spalten, die wir brauchen, und ihre Typen:

1. name (einzeiliger Text)
2. link (einzeiliger Text)
3. tags (Mehrfachauswahl)
4. purchased (Kontrollkästchen)

Wir sollten dabei auch ein paar Tags zur Spalte „tags“ hinzufügen. Ich habe „node“, „react“, „jamstack“ und „javascript“ als Anfang hinzugefügt. Fühlen Sie sich frei, beliebige Tags hinzuzufügen, die für die Arten von Kursen relevant sind, an denen Sie interessiert sein könnten.

Ich habe auch ein paar Zeilen mit Daten in der Spalte „name“ basierend auf meinen bevorzugten Online-Kursen hinzugefügt.

1. 20 React Apps erstellen
2. Fortgeschrittene React-Sicherheitspatterns
3. React und Serverless

Das Letzte, was zu tun ist, ist, die Tabelle selbst umzubenennen. Sie heißt standardmäßig „Table 1“. Ich habe sie stattdessen in „courses“ umbenannt.

Airtable-Anmeldeinformationen finden

Bevor wir mit dem Schreiben von Code beginnen, benötigen wir ein paar Informationen von Airtable. Das erste ist Ihr API-Schlüssel. Der einfachste Weg, diesen zu erhalten, ist, auf Ihre Kontoseite zu gehen und im Abschnitt „Übersicht“ nachzusehen.

Als Nächstes benötigen wir die ID der Base, die wir gerade erstellt haben. Ich empfehle Ihnen, zur Airtable API-Seite zu gehen, da Sie dort eine Liste Ihrer Bases sehen. Klicken Sie auf die Base, die Sie gerade erstellt haben, und Sie sollten die Base-ID sehen. Die Dokumentation für die Airtable API ist sehr hilfreich und enthält detailliertere Anweisungen zum Auffinden der ID einer Base.

Zuletzt benötigen wir den Namen der Tabelle. Auch hier habe ich meine „courses“ genannt, aber verwenden Sie, was auch immer Sie sie genannt haben, wenn es anders ist.

Projekteinrichtung

Um die Dinge zu beschleunigen, habe ich ein Startprojekt für uns im Haupt-Repository erstellt. Von hier aus müssen Sie ein paar Dinge tun:

1. Forken Sie das Repository, indem Sie auf die Fork-Schaltfläche klicken
2. Klonen Sie das neue Repository lokal
3. Wechseln Sie mit git checkout starter zum Starter-Branch

Es gibt bereits viele Dateien. Die meisten Dateien stammen aus einer Standardanwendung create-react-app mit ein paar Ausnahmen. Es gibt auch ein Verzeichnis „functions“, das alle unsere Serverless-Funktionen enthält. Schließlich gibt es eine Konfigurationsdatei netlify.toml, die Netlify mitteilt, wo sich unsere Serverless-Funktionen befinden. In dieser Konfiguration befindet sich auch eine Weiterleitung, die den Pfad vereinfacht, den wir zum Aufrufen unserer Funktionen verwenden. Mehr dazu bald.

Das letzte Stück der Einrichtung ist die Einbindung von Umgebungsvariablen, die wir in unseren Serverless-Funktionen verwenden können. Installieren Sie dazu das Paket dotenv.

npm install dotenv

Erstellen Sie dann eine Datei .env im Stammverzeichnis des Repository mit Folgendem. Stellen Sie sicher, dass Sie Ihren eigenen API-Schlüssel, Ihre Base-ID und Ihren Tabellennamen verwenden, die Sie zuvor gefunden haben.

AIRTABLE_API_KEY=<YOUR_API_KEY>
AIRTABLE_BASE_ID=<YOUR_BASE_ID>
AIRTABLE_TABLE_NAME=<YOUR_TABLE_NAME>

Jetzt schreiben wir Code!

Serverless-Funktionen einrichten

Um Serverless-Funktionen mit Netlify zu erstellen, müssen wir eine JavaScript-Datei in unserem Verzeichnis /functions erstellen. In diesem Starter-Verzeichnis sind bereits einige Dateien enthalten. Schauen wir uns zuerst die Datei courses.js an.

const  formattedReturn  =  require('./formattedReturn');
const  getCourses  =  require('./getCourses');
const  createCourse  =  require('./createCourse');
const  deleteCourse  =  require('./deleteCourse');
const  updateCourse  =  require('./updateCourse');
exports.handler  =  async  (event)  =>  {
  return  formattedReturn(200, 'Hello World');
};

Der Kern einer Serverless-Funktion ist die Funktion exports.handler. Hier verarbeiten wir die eingehende Anfrage und antworten darauf. In diesem Fall akzeptieren wir einen Event-Parameter, den wir gleich verwenden werden.

Wir geben einen Aufruf innerhalb des Handlers an die Funktion formattedReturn zurück, was die Rückgabe eines Status und von Bodendaten etwas vereinfacht. Hier ist zum Referenzzweck, wie diese Funktion aussieht.

module.exports  =  (statusCode, body)  =>  {
  return  {
    statusCode,
    body: JSON.stringify(body),
  };
};

Beachten Sie auch, dass wir mehrere Hilfsfunktionen importieren, um die Interaktion mit Airtable zu verwalten. Wir können entscheiden, welche davon basierend auf der HTTP-Methode der eingehenden Anfrage aufgerufen wird.

• HTTP GET → getCourses
• HTTP POST → createCourse
• HTTP PUT → updateCourse
• HTTP DELETE → deleteCourse

Lassen Sie uns diese Funktion aktualisieren, um die entsprechende Hilfsfunktion basierend auf der HTTP-Methode im Event-Parameter aufzurufen. Wenn die Anfrage keiner der erwarteten Methoden entspricht, können wir einen Statuscode 405 (Methode nicht erlaubt) zurückgeben.

exports.handler = async (event) => {
  if (event.httpMethod === 'GET') {
    return await getCourses(event);
  } else if (event.httpMethod === 'POST') {
    return await createCourse(event);
  } else if (event.httpMethod === 'PUT') {
    return await updateCourse(event);
  } else if (event.httpMethod === 'DELETE') {
    return await deleteCourse(event);
  } else {
    return formattedReturn(405, {});
  }
};

Airtable-Konfigurationsdatei aktualisieren

Da wir in jeder der verschiedenen Hilfsdateien mit Airtable interagieren werden, konfigurieren wir es einmal und verwenden es wieder. Öffnen Sie die Datei airtable.js.

In dieser Datei möchten wir eine Referenz auf die Tabelle courses erhalten, die wir zuvor erstellt haben. Um dies zu tun, erstellen wir mit dem API-Schlüssel und der Base-ID eine Referenz auf unsere Airtable Base. Dann verwenden wir die Base, um eine Referenz auf die Tabelle zu erhalten und exportieren sie.

require('dotenv').config();
var Airtable = require('airtable');
var base = new Airtable({ apiKey: process.env.AIRTABLE_API_KEY }).base(
  process.env.AIRTABLE_BASE_ID
);
const table = base(process.env.AIRTABLE_TABLE_NAME);
module.exports = { table };

Kurse abrufen

Mit der Airtable-Konfiguration an Ort und Stelle können wir nun die Datei getCourses.js öffnen und Kurse aus unserer Tabelle abrufen, indem wir table.select().firstPage() aufrufen. Die Airtable-API verwendet Paginierung. In diesem Fall geben wir an, dass wir die erste Seite der Datensätze wünschen (standardmäßig 20 Datensätze).

const courses = await table.select().firstPage();
return formattedReturn(200, courses);

Genau wie bei jedem async/await-Aufruf müssen wir Fehler behandeln. Lassen Sie uns diesen Schnipsel mit einem try/catch umgeben.

try {
  const courses = await table.select().firstPage();
  return formattedReturn(200, courses);
} catch (err) {
  console.error(err);
  return formattedReturn(500, {});
}

Airtable gibt viele zusätzliche Informationen in seinen Datensätzen zurück. Ich ziehe es vor, diese Datensätze zu vereinfachen, indem ich nur die Datensatz-ID und die Werte für jede der oben erstellten Tabellenspalten verwende. Diese Werte befinden sich in der Eigenschaft fields. Dazu habe ich eine Array-Map verwendet, um die Daten so zu formatieren, wie ich es möchte.

const { table } = require('./airtable');
const formattedReturn = require('./formattedReturn');
module.exports = async (event) => {
  try {
    const courses = await table.select().firstPage();
    const formattedCourses = courses.map((course) => ({
      id: course.id,
      ...course.fields,
    }));
    return formattedReturn(200, formattedCourses);
  } catch (err) {
    console.error(err);
    return formattedReturn(500, {});
  }
};

Wie testen wir das? Nun, die netlify-cli bietet uns den Befehl netlify dev, um unsere Serverless-Funktionen (und unser Frontend) lokal auszuführen. Installieren Sie zuerst die CLI.

npm install -g netlify-cli

Führen Sie dann den Befehl netlify dev im Verzeichnis aus.

Dieser wunderschöne Befehl tut ein paar Dinge für uns:

• Führt die Serverless-Funktionen aus
• Startet einen Webserver für Ihre Website
• Erstellt einen Proxy, damit Frontend und Serverless-Funktionen auf Port 8888 miteinander kommunizieren können.

Lassen Sie uns die folgende URL öffnen, um zu sehen, ob das funktioniert:

Aufgrund der Weiterleitungskonfiguration in der Datei netlify.toml können wir /api/* für unsere API verwenden.

Wenn erfolgreich, sollten wir unsere Daten im Browser angezeigt sehen.

Kurse erstellen

Lassen Sie uns die Funktionalität zum Erstellen eines Kurses hinzufügen, indem wir die Datei createCourse.js öffnen. Wir müssen die Eigenschaften aus dem eingehenden POST-Body extrahieren und sie verwenden, um einen neuen Datensatz durch Aufruf von table.create() zu erstellen.

Der eingehende event.body kommt als normaler String an, was bedeutet, dass wir ihn parsen müssen, um ein JavaScript-Objekt zu erhalten.

const fields = JSON.parse(event.body);

Dann verwenden wir diese Felder, um einen neuen Kurs zu erstellen. Beachten Sie, dass die Funktion create() ein Array akzeptiert, das es uns ermöglicht, mehrere Datensätze auf einmal zu erstellen.

const createdCourse = await table.create([{ fields }]);

Dann können wir den createdCourse zurückgeben.

return formattedReturn(200, createdCourse);

Und natürlich sollten wir die Dinge mit einem try/catch umgeben.

const { table } = require('./airtable');
const formattedReturn = require('./formattedReturn');
module.exports = async (event) => {
  const fields = JSON.parse(event.body);
  try {
    const createdCourse = await table.create([{ fields }]);
    return formattedReturn(200, createdCourse);
  } catch (err) {
    console.error(err);
    return formattedReturn(500, {});
  }
};

Da wir POST-, PUT- oder DELETE-Anfragen nicht direkt im Browser-Webadressfeld (wie wir es für GET getan haben) ausführen können, müssen wir ein separates Tool für die weitere Tests unserer Endpunkte verwenden. Ich bevorzuge Postman, aber ich habe auch gute Dinge über Insomnia gehört.

Innerhalb von Postman benötige ich die folgende Konfiguration:

• url: localhost:8888/api/courses
• method: POST
• body: JSON-Objekt mit name, link und tags

Nachdem wir die Anfrage ausgeführt haben, sollten wir den neuen Kursdatensatz zurückgegeben sehen.

Wir können auch die Airtable GUI überprüfen, um den neuen Datensatz zu sehen.

Tipp: Kopieren Sie die ID aus dem neuen Datensatz, um sie in den nächsten beiden Funktionen zu verwenden.

Kurse aktualisieren

Nun widmen wir uns der Aktualisierung eines bestehenden Kurses. Aus dem eingehenden Anforderungs-Body benötigen wir die id des Datensatzes sowie die anderen Feldwerte.

Wir können den ID-Wert spezifisch mithilfe der Objekt-Destrukturierung extrahieren, wie folgt:

const {id} = JSON.parse(event.body);

Dann können wir den Spread-Operator verwenden, um die restlichen Werte zu extrahieren und sie einer Variablen namens fields zuzuweisen.

const {id, ...fields} = JSON.parse(event.body);

Von dort rufen wir die Funktion update() auf, die ein Array von Objekten (jeweils mit einer id und einer fields-Eigenschaft) zum Aktualisieren akzeptiert.

const updatedCourse = await table.update([{id, fields}]);

Hier ist die vollständige Datei mit all dem zusammen:

const { table } = require('./airtable');
const formattedReturn = require('./formattedReturn');
module.exports = async (event) => {
  const { id, ...fields } = JSON.parse(event.body);
  try {
    const updatedCourse = await table.update([{ id, fields }]);
    return formattedReturn(200, updatedCourse);
  } catch (err) {
    console.error(err);
    return formattedReturn(500, {});
  }
};

Um dies zu testen, greifen wir in Postman für die PUT-Anfrage erneut darauf zurück.

• url: localhost:8888/api/courses
• method: PUT
• body: JSON-Objekt mit id (der id des gerade erstellten Kurses) und den Feldern, die wir aktualisieren möchten (name, link und tags)

Ich habe beschlossen, „Updated!!!“ an den Namen eines Kurses anzuhängen, sobald er aktualisiert wurde.

Wir können die Änderung auch in der Airtable GUI sehen.

Kurse löschen

Schließlich müssen wir die Löschfunktionalität hinzufügen. Öffnen Sie die Datei deleteCourse.js. Wir müssen die ID aus dem Anforderungs-Body extrahieren und sie verwenden, um die Funktion destroy() aufzurufen.

const { id } = JSON.parse(event.body);
const deletedCourse = await table.destroy(id);

Die endgültige Datei sieht so aus:

const { table } = require('./airtable');
const formattedReturn = require('./formattedReturn');
module.exports = async (event) => {
  const { id } = JSON.parse(event.body);
  try {
    const deletedCourse = await table.destroy(id);
    return formattedReturn(200, deletedCourse);
  } catch (err) {
    console.error(err);
    return formattedReturn(500, {});
  }
};

Hier ist die Konfiguration für die DELETE-Anfrage in Postman.

• url: localhost:8888/api/courses
• method: DELETE
• body: JSON-Objekt mit einer ID (derselben ID des Kurses, den wir gerade aktualisiert haben)

Und natürlich können wir überprüfen, ob der Datensatz entfernt wurde, indem wir uns die Airtable GUI ansehen.

Anzeige einer Liste von Kursen in React

Puh, wir haben unser gesamtes Backend gebaut! Nun kommen wir zum Frontend. Die meisten Codes sind bereits geschrieben. Wir müssen nur noch die Teile schreiben, die mit unseren Serverless-Funktionen interagieren. Beginnen wir mit der Anzeige einer Liste von Kursen.

Öffnen Sie die Datei App.js und suchen Sie die Funktion loadCourses. Darin müssen wir einen Aufruf an unsere Serverless-Funktion machen, um die Liste der Kurse abzurufen. Für diese App werden wir eine HTTP-Anfrage mit fetch machen, das direkt integriert ist.

Dank des Befehls netlify dev können wir unsere Anfrage mit einem relativen Pfad zum Endpunkt stellen. Das Schöne daran ist, dass wir nach der Bereitstellung unserer Anwendung keine Änderungen vornehmen müssen!

const res = await fetch('/api/courses');
const courses = await res.json();

Speichern Sie dann die Liste der Kurse in der Zustandsvariable courses.

setCourses(courses)

Fassen Sie alles zusammen und umgeben Sie es mit einem try/catch.

const loadCourses = async () => {
  try {
    const res = await fetch('/api/courses');
    const courses = await res.json();
    setCourses(courses);
  } catch (error) {
    console.error(error);
  }
};

Öffnen Sie localhost:8888 im Browser und wir sollten unsere Liste von Kursen sehen.

Kurse in React hinzufügen

Nachdem wir nun die Möglichkeit haben, unsere Kurse anzuzeigen, benötigen wir die Funktionalität, um neue Kurse zu erstellen. Öffnen Sie die Datei CourseForm.js und suchen Sie die Funktion submitCourse. Hier müssen wir eine POST-Anfrage an die API stellen und die Eingaben aus dem Formular im Body senden.

Die JavaScript Fetch API macht standardmäßig GET-Anfragen, daher müssen wir, um POST zu senden, ein Konfigurationsobjekt mit der Anfrage übergeben. Dieses options-Objekt hat diese beiden Eigenschaften:

1. method → POST
2. body → eine stringifizierte Version der Eingabedaten

await fetch('/api/courses', {
  method: 'POST',
  body: JSON.stringify({
    name,
    link,
    tags,
  }),
});

Umgeben Sie dann den Aufruf mit try/catch und die gesamte Funktion sieht so aus:

const submitCourse = async (e) => {
  e.preventDefault();
  try {
    await fetch('/api/courses', {
      method: 'POST',
      body: JSON.stringify({
        name,
        link,
        tags,
      }),
    });
    resetForm();
    courseAdded();
  } catch (err) {
    console.error(err);
  }
};

Testen Sie dies im Browser. Füllen Sie das Formular aus und senden Sie es ab.

Nach dem Absenden des Formulars sollte das Formular zurückgesetzt werden und die Liste der Kurse sollte mit dem neu hinzugefügten Kurs aktualisiert werden.

Gekaufte Kurse in React aktualisieren

Die Liste der Kurse ist in zwei verschiedene Abschnitte unterteilt: einen mit bereits gekauften Kursen und einen mit Kursen, die noch nicht gekauft wurden. Wir können die Funktionalität hinzufügen, um einen Kurs als „gekauft“ zu markieren, damit er im richtigen Abschnitt angezeigt wird. Dazu senden wir eine PUT-Anfrage an die API.

Öffnen Sie die Datei Course.js und suchen Sie die Funktion markCoursePurchased. Hier werden wir die PUT-Anfrage stellen und sowohl die ID des Kurses als auch die Eigenschaften des Kurses mit der auf „true“ gesetzten Eigenschaft „purchased“ übergeben. Dies können wir tun, indem wir alle Eigenschaften des Kurses mit dem Spread-Operator übergeben und dann die Eigenschaft purchased auf „true“ überschreiben.

const markCoursePurchased = async () => {
  try {
    await fetch('/api/courses', {
      method: 'PUT',
      body: JSON.stringify({ ...course, purchased: true }),
    });
    refreshCourses();
  } catch (err) {
    console.error(err);
  }
};

Um dies zu testen, klicken Sie auf die Schaltfläche, um einen der Kurse als gekauft zu markieren, und die Liste der Kurse sollte aktualisiert werden, um den Kurs im gekauften Abschnitt anzuzeigen.

Kurse in React löschen

Und im Einklang mit unserem CRUD-Modell fügen wir die Möglichkeit hinzu, Kurse zu löschen. Um dies zu tun, lokalisieren Sie die Funktion deleteCourse in der Datei Course.js, die wir gerade bearbeitet haben. Wir müssen eine DELETE-Anfrage an die API stellen und die ID des zu löschenden Kurses übergeben.

const deleteCourse = async () => {
  try {
    await fetch('/api/courses', {
      method: 'DELETE',
      body: JSON.stringify({ id: course.id }),
    });
    refreshCourses();
  } catch (err) {
    console.error(err);
  }
};

Um dies zu testen, klicken Sie auf die Schaltfläche „Delete“ neben dem Kurs, und der Kurs sollte aus der Liste verschwinden. Wir können auch überprüfen, ob er vollständig weg ist, indem wir das Airtable-Dashboard überprüfen.

Bereitstellung auf Netlify

Nachdem wir nun alle benötigten CRUD-Funktionen im Frontend und Backend haben, ist es an der Zeit, dies auf Netlify bereitzustellen. Hoffentlich sind Sie genauso begeistert wie ich davon, wie einfach das ist. Stellen Sie einfach sicher, dass alles auf GitHub hochgeladen ist, bevor wir mit der Bereitstellung fortfahren.

Wenn Sie noch kein Netlify-Konto haben, müssen Sie eines erstellen (wie Airtable ist es *kostenlos*). Klicken Sie dann im Dashboard auf die Option „New site from Git“. Wählen Sie GitHub, authentifizieren Sie es und wählen Sie dann das Projekt-Repository aus.

Als Nächstes müssen wir Netlify mitteilen, von welchem Branch bereitgestellt werden soll. Wir haben hier zwei Optionen:

1. Verwenden Sie den Branch starter, an dem wir gearbeitet haben
2. Wählen Sie den Master-Branch mit der endgültigen Codeversion

Fürs Erste würde ich den Branch starter wählen, um sicherzustellen, dass der Code funktioniert. Dann müssen wir einen Befehl auswählen, der die App erstellt, und das Veröffentlichungsverzeichnis, das sie bedient.

1. Build-Befehl: npm run build
2. Publish-Verzeichnis: build

Netlify hat kürzlich ein Update veröffentlicht, das React-Warnungen während des Build-Prozesses als Fehler behandelt, was dazu führen kann, dass der Build fehlschlägt. Ich habe den Build-Befehl auf CI = npm run build aktualisiert, um dies zu berücksichtigen.

Klicken Sie zuletzt auf die Schaltfläche „Show Advanced“ und fügen Sie die Umgebungsvariablen hinzu. Diese sollten genau so sein, wie sie in der lokalen Datei .env waren, die wir erstellt haben.

Die Website sollte automatisch mit dem Erstellen beginnen.

Wir können auf den Tab „Deploys“ im Netlify-Tab klicken und den Build-Fortschritt verfolgen, obwohl er ziemlich schnell geht. Wenn er abgeschlossen ist, ist unsere glänzende neue App für die Welt sichtbar!

Willkommen im Jamstack!

Der Jamstack ist ein unterhaltsamer neuer Ort, an dem man sein kann. Ich liebe ihn, weil er das Erstellen und Hosten voll funktionsfähiger, vollständiger Full-Stack-Anwendungen wie dieser ziemlich trivial macht. Ich liebe, dass Jamstack uns mächtige, allmächtige Frontend-Entwickler macht!

Ich hoffe, Sie sehen die gleiche Kraft und Einfachheit mit der hier verwendeten Technologiekombination. Wieder einmal erfordert Jamstack nicht, dass wir Airtable, React oder Netlify verwenden, aber wir können, und sie sind alle kostenlos verfügbar und einfach einzurichten. Schauen Sie sich Chris' Serverless-Website für eine ganze Reihe weiterer Dienste, Ressourcen und Ideen für die Arbeit im Jamstack an. Und Sie können gerne Fragen und Feedback in den Kommentaren hinterlassen!