MERN Stack सीखने का 44वाँ दिन

मेरा Express.js सर्वर पहले केवल JSON डेटा भेजता था। आज मैंने उसे बदल दिया।

मैंने सीखा कि अपने बैकएंड से सीधे HTML, CSS और इमेज कैसे सर्व (serve) किए जाते हैं। यह मेरे प्रोजेक्ट को एक साधारण API से एक फुल-स्टैक एप्लिकेशन में बदल देता है।

मैंने फ़ाइल राउटिंग (file routing) में महारत हासिल करने के लिए Complete Coding बैकएंड ट्रैक का पालन किया।

एक वास्तविक प्रोडक्शन एनवायरनमेंट (production environment) में, आपको फ्रंटएंड फ़ाइलों को डिलीवर करने के लिए एक कुशल तरीके की आवश्यकता होती है। आपको फ़ाइलों को पढ़ने के लिए कस्टम लूप (custom loops) नहीं लिखने चाहिए।

यहाँ वह सेटअप है जिसका मैंने आज उपयोग किया:

  • express.static() Middleware Express में express.static() नामक एक इन-बिल्ट टूल शामिल है। यह आपको ब्राउज़र को सर्व करने के लिए public या assets जैसा कोई फोल्डर चुनने की अनुमति देता है।

  • path.join() मैंने Node.js path मॉड्यूल और __dirname वेरिएबल का उपयोग किया। यह सुनिश्चित करता है कि मेरा सर्वर बिना किसी त्रुटि के Windows, Linux, या Mac पर फ़ाइलें ढूँढ ले।

यहाँ कोड है:

const express = require("express");
const path = require("path");
const app = express();
const PORT = 8000;

app.use(express.static(path.join(__dirname, "public")));

app.get("/", (req, res) => {
    res.sendFile(path.join(__dirname, "public", "index.html"));
});

app.listen(PORT, () => {
    console.log(`Server running on http://localhost:${PORT}`);
});

इन बुनियादी चीज़ों को बनाने से मुझे यह समझने में मदद मिलती है कि वेब कैसे काम करता है।

Source: https://dev.to/ali_hamza_589ec7b3eb6688d/day-44-of-learning-mern-stack-3c0m