DEV Community

Cover image for MERN FOLDERS & FILES STRUCTURE
Vishwanath
Vishwanath

Posted on • Updated on

MERN FOLDERS & FILES STRUCTURE

This article tells about MERN Stack folders and files structure, How to name folders and files! first, know that. Lots of beginner developers' mistakes were backend and frontend folders were created in different locations which was a big mistake. When you deploy your project problem will come, First we create the folder and the folder name is MERN-STRUCTURE. Inside the folder create two sub-folders Backend and frontend folders.

MERN FOLDER STRUCTURE

we use backend and frontend separate folders, and the backend folder was the server connection and database connection and controls the data and rest APIs. The frontend folder was UI components and .env files were environment variables using server and help to secret port number and database name and secret keys. .gitignore file was ignored in the node_modules folder and .env files, why use gitignore files? The gitignore file helps to store particular files and folders in the GitHub repository.

BACKEND FOLDERS STRUCTURE

Backend Folder Structure

Backend folder inside the lots of sub-folders like this, Config folder was database configuration. The controller folder was the control data and the rest APIs. Middleware folder was authenticated middleware and error middleware, routes folder was rest APIs and router the location. server file important to all files is a configuration in the server file.

FRONTEND FOLDER STRUCTURE

Frontend Folder Stucture

The frontend folder was UI components and easy to display the data and easy way to understand the client. I have used React for the frontend library and React is reduce your code and reusability. Redux is a tool for state management using reactjs.


THANKS FOR READING THIS ARTICLE ❤️

Top comments (0)