Environment Configuration
Relevant source files
The following files were used as context for generating this wiki page:
The project is a full-stack application composed of three distinct services: a Node.js backend, a React frontend, and a separate Node.js socket server for real-time chat. Each service has its own environment configuration, managed primarily through .env files. This separation of configuration from code is crucial for security and portability across different environments (e.g., development, production).
The configuration system handles server ports, database connection strings, API keys for external services (Stripe, Cloudinary, OpenAI), and the URLs that link the frontend, backend, and socket services together. The dotenv library is a key dependency for loading these variables into the Node.js applications.
System Architecture and Configuration Flow
The environment variables defined in the .env files are used to configure and connect the various internal and external services.
The following diagram illustrates the high-level architecture and the role of environment configuration.
Sources: README.md
Backend Configuration
The backend service, built with Express.js, relies on a .env file located in backend/config/ for its configuration.
Sources: README.md:120-122, backend/app.js:41-45
Loading Mechanism
The dotenv package is used to load variables from the .env file into process.env. This is done conditionally, ensuring it only runs in non-production environments.
The following sequence diagram shows the backend server startup and configuration loading process.
Sources: backend/server.js:4-15, backend/app.js:41-45
Backend Environment Variables
The README.md specifies the required environment variables for the backend.
| Variable | Description | Example |
|---|---|---|
NODE_ENV | The application environment. | development |
PORT | The port on which the backend server will run. | 8000 |
DB_URI | The connection string for the MongoDB database. | your_mongodb_connection_string |
DB_HOST | MySQL database host. | localhost |
DB_USER | MySQL database user. | root |
DB_PASSWORD | MySQL database password. | |
DB_NAME | MySQL database name. | new-nodejs |
JWT_SECRET | Secret key for signing JSON Web Tokens. | your_jwt_secret_key |
JWT_EXPIRE | Expiration time for JWT. | 7d |
COOKIE_EXPIRE | Expiration time for cookies. | 5 |
CLOUDINARY_NAME | Cloudinary account name for image storage. | your_cloudinary_name |
CLOUDINARY_API_KEY | Cloudinary API key. | your_cloudinary_api_key |
CLOUDINARY_API_SECRET | Cloudinary API secret. | your_cloudinary_api_secret |
STRIPE_SECRET_KEY | Stripe secret key for payment processing. | your_stripe_secret_key |
STRIPE_API_KEY | Stripe public API key. | your_stripe_api_key |
OPENAI_API_KEY | OpenAI API key for sentiment analysis. | your_openai_api_key |
GOOGLE_APPLICATION_CREDENTIALS | Path to Google Cloud credentials file for translation. | path_to_google_credentials.json |
FRONTEND_URL | The URL of the frontend application for CORS configuration. | http://localhost:3000 |
Sources: README.md:122-140
Usage in Code
Server Port
The PORT variable is used to start the Express server.
// File: backend/server.js:13-15
const server = app.listen(process.env.PORT, () => {
console.log(`Server is running on: http://localhost:${process.env.PORT}`);
});
Sources: backend/server.js:13-15
CORS Configuration
The FRONTEND_URL is used to configure Cross-Origin Resource Sharing (CORS), allowing the frontend to make requests to the backend API.
// File: backend/app.js:12-17
app.use(
cors({
origin: process.env.FRONTEND_URL || "http://localhost:3000",
credentials: true,
})
);
Sources: backend/app.js:12-17
Frontend Configuration
The React frontend also uses a .env file, located in the frontend/ root directory, to manage its environment variables.
Sources: README.md:148-150
Frontend Environment Variables
| Variable | Description | Example |
|---|---|---|
REACT_APP_SERVER_URL | The base URL for the backend API server. | http://localhost:8000 |
REACT_APP_SOCKET_URL | The URL for the real-time socket server. | http://localhost:4000 |
REACT_APP_STRIPE_PUBLISHABLE_KEY | The publishable key for Stripe payments. | your_stripe_publishable_key |
Sources: README.md:151-155
Centralized URL Management
The frontend centralizes its backend connection URLs in frontend/src/server.js. This file exports constants that are used throughout the application to make API calls and access static assets.
// File: frontend/src/server.js
export const server = process.env.REACT_APP_SERVER_URL + '/api/v2';
export const backend_url = process.env.REACT_APP_SERVER_URL + '/';
Sources: frontend/src/server.js:1-3
This backend_url is then imported and used in components to construct full URLs for resources like product images.
// File: frontend/src/components/Products/ProductDetails.jsx:81-83
<img
src={`${backend_url}${
Array.isArray(data.images) ? data.images[select] : data.images
}`}
...
/>
Sources: frontend/src/components/Products/ProductDetails.jsx:81-85
Socket Server Configuration
The socket server is a minimal Node.js application that also uses a .env file in its root directory (socket/).
Sources: README.md:163-165
Socket Server Environment Variables
| Variable | Description | Example |
|---|---|---|
PORT | The port on which the socket server will run. | 4000 |
Sources: README.md:166-168
Summary
The project's configuration is systematically managed using .env files for each of its three main components: backend, frontend, and socket server. This approach effectively decouples sensitive information and environment-specific settings from the source code. The backend uses dotenv to load variables for database connections, API keys, and server settings. The frontend configures its connection endpoints to the backend and socket services, while the socket server itself is configured with its own port. This modular configuration is essential for maintaining and deploying the complex, multi-service application.