𝗠𝗘𝗥𝗡 𝗦𝘁𝗮𝗰𝗸 ਸਿੱਖਣ ਦਾ 𝟰੪ਵਾਂ ਦਿਨ
ਮੇਰਾ Express.js ਸਰਵਰ ਸਿਰਫ਼ JSON ਡੇਟਾ ਭੇਜਦਾ ਸੀ। ਅੱਜ ਮੈਂ ਉਹ ਬਦਲ ਦਿੱਤਾ।
ਮੈਂ ਸਿੱਖਿਆ ਕਿ ਕਿਵੇਂ ਮੇਰੇ ਬੈਕਐਂਡ ਤੋਂ ਸਿੱਧੇ ਤੌਰ 'ਤੇ HTML, CSS, ਅਤੇ images ਸਰਵ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ। ਇਹ ਮੇਰੇ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਇੱਕ ਸਧਾਰਨ API ਤੋਂ ਇੱਕ ਫੁੱਲ-ਸਟੈਕ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਬਦਲ ਦਿੰਦਾ ਹੈ।
ਮੈਂ ਫਾਈਲ ਰੂਟਿੰਗ (file routing) ਵਿੱਚ ਮਾਹਰ ਹੋਣ ਲਈ Complete Coding ਬੈਕਐਂਡ ਟ੍ਰੈਕ ਦੀ ਪਾਲਣਾ ਕੀਤੀ।
ਇੱਕ ਅਸਲ ਪ੍ਰੋਡਕਸ਼ਨ ਵਾਤਾਵਰਣ (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