MERN Stack പഠനത്തിന്റെ 44-ാം ദിവസം

എന്റെ Express.js സെർവർ മുമ്പ് JSON ഡാറ്റ മാത്രമേ അയച്ചിരുന്നുള്ളൂ. ഇന്ന് ഞാൻ അത് മാറ്റി.

എന്റെ ബാക്കെൻഡിൽ നിന്ന് നേരിട്ട് HTML, CSS, ചിത്രങ്ങൾ എന്നിവ എങ്ങനെ നൽകാം എന്ന് ഞാൻ പഠിച്ചു. ഇത് എന്റെ പ്രോജക്റ്റിനെ ഒരു ലളിതമായ API എന്ന നിലയിൽ നിന്ന് ഒരു ഫുൾ-സ്റ്റാക്ക് ആപ്ലിക്കേഷനിലേക്ക് മാറ്റുന്നു.

ഫയൽ റൂട്ടിംഗിൽ (file routing) വൈദഗ്ധ്യം നേടുന്നതിനായി ഞാൻ Complete Coding ബാക്കെൻഡ് ട്രാക്ക് പിന്തുടർന്നു.

യഥാർത്ഥ പ്രൊഡക്ഷൻ എൻവയോൺമെന്റിൽ (production environment), ഫ്രണ്ട്‌എൻഡ് ഫയലുകൾ നൽകാൻ നിങ്ങൾക്ക് കാര്യക്ഷമമായ ഒരു മാർഗ്ഗം ആവശ്യമാണ്. ഫയലുകൾ വായിക്കാൻ നിങ്ങൾ സ്വന്തമായി ലൂപ്പുകൾ (custom loops) എഴുതേണ്ടതില്ല.

ഇന്ന് ഞാൻ ഉപയോഗിച്ച സെറ്റപ്പ് ഇതാ:

  • express.static() മിഡിൽവെയർ (Middleware) Express-ൽ express.static() എന്ന പേരിൽ ഒരു ഇൻബിൽറ്റ് ടൂൾ ഉണ്ട്. ബ്രൗസറിലേക്ക് നൽകുന്നതിനായി public അല്ലെങ്കിൽ assets പോലുള്ള ഒരു ഫോൾഡർ തിരഞ്ഞെടുക്കാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു.

  • path.join() ഞാൻ Node.js path മോഡ്യൂളും __dirname വേരിയബിളും ഉപയോഗിച്ചു. ഇത് വിൻഡോസ്, ലിനക്സ് അല്ലെങ്കിൽ മാക് എന്നിവയിൽ പിശകുകൾ കൂടാതെ ഫയലുകൾ കണ്ടെത്താൻ എന്റെ സെർവറിനെ സഹായിക്കുന്നു.

കോഡ് ഇതാ:

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