Aufsteigen mit Node.js: Hinzufügen eines Servers zu meiner Yoga-Posen-Bibliothek

Aufsteigen mit Node.js: Hinzufügen eines Servers zu meiner Yoga-Posen-Bibliothek

Nachdem ich mich durch den Aufbau einer einfachen Yoga-Posen-Bibliothek mit React vertraut gemacht hatte, wollte ich mein Projekt auf die nächste Ebene bringen, indem ich einige Backend-Funktionalitäten hinzufügte. Hier kommt Node.js ins Spiel. Node.js ist eine Laufzeitumgebung, die es uns ermöglicht, JavaScript-Code auf der Serverseite auszuführen. In diesem Blogbeitrag erläutere ich, wie ich meiner Yoga Pose Library-App einen Node.js-Server hinzugefügt habe. Es war eine fantastische Möglichkeit, die Arbeit mit Frontend- und Backend-Technologien zu üben und mir ein viel tieferes Verständnis dafür zu vermitteln, wie Full-Stack-Anwendungen funktionieren.

Warum Node.js zu meiner React-App hinzufügen?

Die Hauptmotivation für das Hinzufügen eines Node.js-Servers zu meiner Yoga-Posenbibliothek bestand darin, die React-App bereitzustellen und sich auf spätere erweiterte Funktionen vorzubereiten, wie das Abrufen von Posendaten aus einer Datenbank oder die Handhabung der Benutzerauthentifizierung. Im Moment wollte ich mich darauf konzentrieren, den Server einzurichten und meine statischen Dateien (die React-App) von dort aus bereitzustellen. Auf diese Weise konnte ich die App so hosten, dass sie später problemlos skaliert werden konnte.

Erste Schritte mit Node.js

Bevor ich mich mit dem Code befasste, installierte ich Node.js und initialisierte mein Projekt mit npm, dem Node-Paketmanager. Wenn Sie Node.js nicht installiert haben, gehen Sie einfach zur Node.js-Website und laden Sie die neueste Version herunter. Sobald das erledigt ist, richte ich einen einfachen Node.js-Server ein.

npm init -y 
npm install express 

Ich habe Express.js verwendet, ein minimalistisches Webframework für Node.js, um das Routing zu verwalten und statische Dateien bereitzustellen. Es ist perfekt für leichte Anwendungen wie diese.

Wir stellen server.js vor

Werfen wir nun einen Blick auf server.js, das für die Einrichtung des Servers verantwortlich ist. Hier ist der fertige Code:

// Importing the Express framework
const express = require('express'); 
// Importing the path module to handle file paths
const path = require('path'); 
// Creating an Express App
const app = express(); 
// Setting the PORT
const PORT = process.env.PORT || 3000; 

// Serve static files from the React app app.use(express.static(path.join(__dirname, 'build'))); 

// For any request that doesn't match an API route 
// serve the React app's index.html. 
app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'build', 'index.html')); 
}); 

// Start the server
app.listen(PORT, () => { 
console.log(`Server is running on port ${PORT}`); 
}); 

Den Code aufschlüsseln

Lassen Sie uns nun die server.js Schritt für Schritt aufschlüsseln.

Abhängigkeiten importieren:

const express = require('express'); 
const path = require('path'); 

Hier importieren wir Express, ein Web-Framework für Node.js, und Path, ein integriertes Node.js-Modul, das uns bei der Arbeit mit Datei- und Verzeichnispfaden hilft, damit der Server die Dateien korrekt finden kann wir wollen dienen.

Erstellen einer Express-Anwendung:

const app = express();  

Wir erstellen eine Instanz einer Express-Anwendung, die unsere Serveranfragen und -antworten verarbeitet.

Port einstellen:

const PORT = process.env.PORT || 3000; 

Wir definieren die Portnummer, die unser Server abhört. Wir suchen nach einer Umgebungsvariablen PORT, die für die Bereitstellung mit einem Hosting-Dienst nützlich ist, und greifen auf Port 3000 zurück, wenn diese nicht festgelegt ist.

Statische Dateien bereitstellen:

app.use(express.static(path.join(__dirname, 'build')));

Diese Zeile weist Express an, statische Dateien aus dem Build-Verzeichnis bereitzustellen, das die kompilierten Dateien unserer React-App enthält.

Alles erfassende Route:

app.get('*', (req, res) => { 
  res.sendFile(path.join(__dirname, 'build', 
'index.html')); 
}); 

Diese Catch-All-Route stellt sicher, dass jede Anfrage, die nicht von vorherigen Routen verarbeitet wurde, mit index.html antwortet. Dies ist wichtig, damit das clientseitige Routing mit React Router ordnungsgemäß funktioniert.

Server starten:

app.listen(PORT, () => { 
console.log(`Server is running on port ${PORT}`); 
});

Zuletzt starten wir den Server, überwachen den definierten Port und protokollieren eine Nachricht an die Konsole, wenn er bereit ist.

Fazit: Eine solide Grundlage für zukünftige Funktionen

Das Hinzufügen von Node.js zu meiner Yoga Pose Library-App hat mir eine solide Grundlage gegeben, um später erweiterte Funktionen zu entwickeln. Indem ich die App von einem Node.js-Server aus bereitstelle, bin ich in der Lage, in Zukunft problemlos mehr dynamische Daten, Benutzereingaben und sogar Echtzeitfunktionen zu verarbeiten. Dies war eine großartige Übung zur Kombination von Front-End- und Back-End-Technologien, und ich freue mich darauf, im weiteren Verlauf mehr über Node.js und Express zu erfahren.

In meinem nächsten Blogbeitrag werde ich tiefer darauf eingehen, wie ich dieses Setup mit einer Datenbank erweitern kann, aber im Moment bin ich begeistert davon, wie viel ich durch die praktische Arbeit mit Node.js gelernt habe!

Das obige ist der detaillierte Inhalt vonAufsteigen mit Node.js: Hinzufügen eines Servers zu meiner Yoga-Posen-Bibliothek. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!