MERN stack oo ah mid ka mid ah stacks ugu fiican ugu caan ah ee la isticmaalo ay ka kooban MongoDB, Express.js, React, iyo Node.js, waa qaab-dhismeedka ugu caansan ee loogu isticmaalo sameynra Web Applications-ka. Waxa uu qofka developer-ka uu sameyn karaa websites waxtar leh iyadoo la adeegsanayo Luuqada JavaScript Frontend iyo backend intaba. Waxaa Web Applicationkaan soo geliyaa waxyaalo loo baahan yahay in la qariyo markaas waxaa la isticmaalaayaa Environment Variables wax loo yaqaan.

Environment variables waa loogu talagalay in lagu kaydiyo configuration setting iyo waxyaalaha secret-ka ah. Bloggaan, waxaan ku falaanqayndoonna muhiimadda Environment Variables gaar ahaan MERN stack, sida loo isticmaalo iyo Qaabka ugu isticmaalaysid backend iyo frontend.

Waxyaalaha Loo Isticmaalaa Environment Variables?

Marka aad sameyneysid fullstack web application waxaad u baahantahay waxyaalo qaar ah inay secret ahaadaan waxaad dhex gelinaysaa Environment Variables. Waxyaalaha ugu caansan waxaa kamid ah.

• Ku Xerida Database (data connection string)
• APIs-ka Externalka ah ee aad u isticmaalaysid website-kaaga sida
• Waxyaalaha u gaar-ka ah websiteka sida JW Secret Key.
• Port Number ee server-ka backend
• URLs-ka aad u isticmaashay frontend-ka iyo backend-ka

Environment Variables wax ay kuu ogalaanaysaa inaad waxyaalahaas aadan code-kaaga kusoo darin oo aad gelisaa Enviroment Variables. Waxa ayna leedahay Faa`iidooyin dhowr ah oo ay kamid tahay.

1. Security: Xogaha xasaasiga ah sida APIs-ka ma ahan in lagu daro code-ka la saarayo githubka sidaa awgeeda environment variables waxa kusiinaysaa qaabkii aad u habeyn lahayd adigoon ku dhex darin code-kaaga taas oo sare u qaadaysaa Amniga(Security).
2. Easy to Update: Madaama aad isticmaashay Environment Variables waxaa ku qortay dhowrshey oo aad muhiim ugu ah web application-kaaga taas oo aad sidoo kale ku isticmaashay meelo kala duwan marka waxa aad u fudud inaad wax ka basho qeybtii aad u baahantahay oo waxa ay ku jiraan hal file .env ah.

Sida Loo Sameeyaa Environemt Variables Marka La Joogo MERN Stack

1. Backend (Node.js/Express)

Marka la joogo MERN stack backend waxaa la isticmaalayaa Node.js, Marka Enviroment Variables waxaa lagu keediyaa file loo yaqaan .env. Faylkaani waxa uu yahay qiimayaasha aad u isticmaal lahayd key-value pairs-ka ee backendkaaga.

Sidaan u isticmaal Enviroment Variables.

Marka koowaad soo Deji Package loo yaqaan dotenv.

Si aad u isticmaasho file-ka .env ugu dhex isticmaasho Node Js Backend-kaaga, Waxaad u baahan tahay inaad soo dejiso Package-ka loo yaqaan dotenv. Si aad usoo dejiso isticmaal sidaan:

Qor commend-kaas si aad folderka backend aad isugu aadiso
-> cd backend

kadib soo install karey package-ka
-> npm install dotenv

Samey File-ka .env

Qaabka aad usameyneysid file-kaan waa geliya inaad dhahdo .env oo kama hormarinaysid wax magac ah file sidaas ayaa loo sameeyaa, Waxaad gelinaysaa waxyaalaha aad u baahantahay inaad geliso.

Waxyaalaha aad ku qoraysid file-ka .env

D_URI= mongodb://localhost:27017/mydatabase
PORT= 8000
SECRET_KEY= mysecretkeyhere
JWT_SECRET= jwtsecret

Qaabka aad u isticmaalaysid

Marka la joogo Code-ka Node.js-ka, Waxaad u isticmaali kartaa si fudud oo ah process.env. Tusaalaha arintaasna waa tan:

require('dotenv').config(); // config-kareynta environment variables si aan u isticmaalno.


const express = require('express');
const mongoose = require('mongoose');
const app = express();

// Helidda enviroment variable
const dbURI = process.env.DB_URI;
const port = process.env.PORT || 5000; // Haddii PORT la'aan jiro, waxay noqonaysaa 5000

// Ku xidh MongoDB
mongoose.connect(dbURI)
  .then(() => console.log("Connect to MongoDB"))
  .catch(err => console.error("error for connecting MongoDB:", err));

// Start the server
app.listen(port, () => {
  console.log(`Server is running on ${port}`);
});

Qaabka, process.env.DB_URI wuxuu soo saaraayaa URL-ka MongoDB ee ku jira file-ka.env. Habkaas waxaad ku ilaalinaysaa Database String-kaaga.

Ka Reebista File.env Marka aad github Saaraysid

File-ka.env waa inaad ka reebtaa code-ka aad saaraysid github, sababtoo ah wuxuu ka kooban yahay xogo xasaasi ah. Si aad u hubiso in aan si khaldan ugu darin, ku dar .env file-kaaga .gitignore:

# .gitignore
.env

2. Frontend (React)

Marka la joogo frontend gaar ahaan react waxa ay leedahay qaab aad u sameyneysid environment variable-ka oo waa mid iyada aad u fudud.

Qaabka aad u sameyneysid

React wuxuu leeyahay qaab gaar ah oo lagu sameeyo Environment variable-ka, dhamaan environment variables marka react-ka aad ku dhex isticmaalaysid waa inaad magacyadooda ka bilowdaa REACT_APP_. ka aad qortaa magaca waxaa aad geedinaysid.

Samey file.env kuna samey folderka Frontend-ka

cd frontend
.env file

REACT_APP_API_URL= http://localhost:3000/api

Qaabka aad u isticmaalaysid React

Marka aad sameyso .env, waxaad ku isticmaali kartaa React-kaaga sida oo kale:

const apiUrl = process.env.REACT_APP_API_URL;

console.log("API URL:", apiUrl);

Vite for React

Marka aad isticmaalaysid Vite waxaad u isticmaalaysaa .env file-kaaga sidaan

const apiUrl = import.meta.env.VITE_REACT_APP_API_URL;

console.log("API URL:", apiUrl);

---

Waxaa rajaynaayaa inaad bloggaan aad wax baddan aad ka faa`iideen. marka wixii suaal ah qeybta comment-ka inoogu reeb.