MERN Stack నేర్చుకోవడంలో 44వ రోజు

నా Express.js సర్వర్ కేవలం JSON డేటాను మాత్రమే పంపేది. ఈరోజు నేను దానిని మార్చాను.

నా బ్యాకెండ్ నుండి నేరుగా HTML, CSS మరియు imagesలను ఎలా అందించాలో నేర్చుకున్నాను. ఇది నా ప్రాజెక్ట్‌ను ఒక సాధారణ API నుండి ఫుల్-స్టాక్ అప్లికేషన్‌గా మారుస్తుంది.

ఫైల్ రూటింగ్ (file routing) లో నైపుణ్యం సాధించడానికి నేను Complete Coding backend track ను అనుసరించాను.

నిజమైన ప్రొడక్షన్ ఎన్విరాన్మెంట్‌లో (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