MERN Stack शिकण्याचा दिवस ४४

माझा Express.js सर्व्हर फक्त JSON डेटा पाठवत असे. आज मी त्यात बदल केला.

मी माझ्या बॅकएंडमधून थेट HTML, CSS आणि इमेजेस कशा सर्व्ह करायच्या हे शिकलो. यामुळे माझा प्रोजेक्ट एका साध्या API कडून फुल-स्टॅक ॲप्लिकेशनकडे वळला आहे.

फाईल राउटिंगमध्ये प्रभुत्व मिळवण्यासाठी मी Complete Coding बॅकएंड ट्रॅक फॉलो केला.

प्रत्यक्ष प्रोडक्शन एन्व्हायरमेंटमध्ये, फ्रंटएंड फाईल्स डिलीव्हर करण्यासाठी तुम्हाला एका कार्यक्षम पद्धतीची गरज असते. फाईल्स वाचण्यासाठी तुम्ही स्वतःचे कस्टम लूप्स लिहू नयेत.

आज मी वापरलेली सेटअप खालीलप्रमाणे आहे:

  • express.static() Middleware Express मध्ये express.static() नावाचे एक इन-बिल्ट टूल असते. हे तुम्हाला ब्राउझरला सर्व्ह करण्यासाठी public किंवा assets सारखा एखादा फोल्डर निवडण्याची परवानगी देते.

  • path.join() मी Node.js चा path module आणि __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}`);
});

या मूलभूत गोष्टी शिकल्यामुळे मला वेब कसे काम करते हे समजण्यास मदत होते.

स्रोत: https://dev.to/ali_hamza_589ec7b3eb6688d/day-44-of-learning-mern-stack-3c0m