MERN Stack શીખવાનો ૪૪મો દિવસ

મારો Express.js સર્વર પહેલા ફક્ત JSON ડેટા જ મોકલતો હતો. આજે મેં તે બદલી નાખ્યું.

મેં મારા બેકએન્ડમાંથી સીધા HTML, CSS અને ઈમેજીસ કેવી રીતે સર્વ કરવા તે શીખ્યું. આ મારા પ્રોજેક્ટને એક સાદા API થી ફૂલ-સ્ટેક એપ્લિકેશનમાં ફેરવે છે.

ફાઇલ રાઉટિંગમાં નિપુણતા મેળવવા માટે મેં Complete Coding બેકએન્ડ ટ્રેક અનુસર્યો.

વાસ્તવિક પ્રોડક્શન એન્વાયરમેન્ટમાં, તમારે ફ્રન્ટએન્ડ ફાઇલો પહોંચાડવા માટે એક કાર્યક્ષમ રીતની જરૂર હોય છે. તમારે ફાઇલો વાંચવા માટે કસ્ટમ લૂપ્સ લખવા જોઈએ નહીં.

આજે મેં જે સેટઅપનો ઉપયોગ કર્યો છે તે અહીં છે:

  • 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}`);
});

આ પાયાની બાબતો બનાવવાથી મને વેબ કેવી રીતે કામ કરે છે તે સમજવામાં મદદ મળે છે.

સ્ત્રોત: https://dev.to/ali_hamza_589ec7b3eb6688d/day-44-of-learning-mern-stack-3c0m