MERN Stack கற்றலில் 44-வது நாள்

எனது Express.js சர்வர் முன்பு JSON தரவை மட்டுமே அனுப்பும். இன்று நான் அதை மாற்றினேன்.

எனது backend-லிருந்து நேரடியாக HTML, CSS மற்றும் படங்களை (images) எவ்வாறு வழங்குவது என்பதைக் கற்றுக்கொண்டேன். இது எனது திட்டத்தை ஒரு சாதாரண API-யிலிருந்து ஒரு முழுமையான full-stack பயன்பாடாக மாற்றுகிறது.

file routing-ல் தேர்ச்சி பெற நான் Complete Coding backend track-ஐப் பின்பற்றினேன்.

ஒரு உண்மையான production சூழலில், frontend கோப்புகளை வழங்க உங்களுக்கு ஒரு திறமையான வழி தேவைப்படும். கோப்புகளைப் படிக்க நீங்கள் தனிப்பயனாக்கப்பட்ட (custom) loops-களை எழுதக்கூடாது.

இன்று நான் பயன்படுத்திய அமைப்பு இதோ:

  • express.static() Middleware Express-ல் express.static() என்ற ஒரு built-in கருவி உள்ளது. இது உலாவியில் (browser) காண்பிப்பதற்காக public அல்லது assets போன்ற ஒரு கோப்புறையை (folder) தேர்ந்தெடுக்க அனுமதிக்கிறது.

  • path.join() நான் Node.js path module மற்றும் __dirname மாறியைப் (variable) பயன்படுத்தினேன். இது எனது சர்வர் Windows, Linux அல்லது Mac ஆகியவற்றில் பிழையின்றி கோப்புகளைக் கண்டறிவதை உறுதி செய்கிறது.

இதோ அந்தத் குறியீடு (code):

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

இந்த அடிப்படை விஷயங்களைக் கட்டமைப்பது இணையம் (web) எவ்வாறு செயல்படுகிறது என்பதைப் புரிந்துகொள்ள எனக்கு உதவுகிறது.

ஆதாரம்: https://dev.to/ali_hamza_589ec7b3eb6688d/day-44-of-learning-mern-stack-3c0m