Te damos la bienvenida a nuestra página, en este lugar vas a hallar la resolución a lo que estabas buscando.
Solución:
La estructura más básica sería tener un root carpeta que contiene frontend y backend carpetas Ya que estás hablando de la MERN pila, usted tendría un package.json dentro de tu NodeJS entorno backend y un package.json para tu React lado de las cosas. El servidor backend y el cliente frontend son dos cosas totalmente separadas, así que sí, ambos tienen sus propias carpetas node_modules. En el backend, probablemente habrá instalado algo como Express para su tiempo de ejecución de Node, Mongoose para una manera más conveniente de hablar con su MongoDBetc, y en su interfaz, tendrá su React como su marco frontend, Redux para la gestión del estado, etc. Además, dependiendo de lo que ya haya incluido dentro de sus archivos package.json, cuando ejecute npm installpor separado se instalará en esas dos carpetas. Si desea instalar paquetes adicionales, simplemente ejecute npm install + "the name of the package" (sin el ‘+’ y sin las comillas) dentro de esa carpeta en particular donde lo necesites (backend o/y frontend).
Espero que esto haya sido útil. Mira las fotos, especialmente la segunda.
Estructura de la aplicación
Estructura de carpetas
ACTUALIZAR:
En desarrollo, sugiero instalar dos cosas adicionales:
npm i -D nodemonnpm i -D concurrently
Nota la -D flag los instalará como devDependencies.
nodemon hará un seguimiento de cada cambio de archivo y reiniciará el servidor back-end por usted. Entonces, es obvio que debe instalarse dentro de la carpeta “backend”. Todo lo que tienes que hacer es entrar en el package.json archivo (backend) y agregue un nuevo script. Algo como esto:
"scripts":
"start": "node app.js", // in production
"dev": "nodemon app.js", // in development
concurrently le permite iniciar su frontend y backend al mismo tiempo. Sugiero inicializar un nuevo proyecto de Nodo dentro del nivel superior raíz carpeta -[folder which contains both, your frontend and backend]. Lo harías con el npm init comando, y después de eso, instale el concurrently paquete allí.
Ahora, ve a abrir tu recién creado package.json archivo dentro de su raíz carpeta y edite la sección de inicio, así:
"scripts":
"dev": "concurrently "cd backend && npm run dev" "cd frontend && npm start" "
Lo que esto hará es ir dentro de la back-end carpeta y ejecute el dev comando (el mismo que acabamos de configurar), por lo que comenzará nodemon. Además, también irá dentro del Interfaz carpeta y ejecutar el predeterminado start comando, que es exactamente lo que queremos.
Si mantuvo la estructura de carpetas, instaló todas las dependencias (incluidas las dos adicionales que mencioné anteriormente), cambió el package.json archivo dentro de su root carpeta, podrá iniciar ambos con un simple comando:
npm run dev // asegúrese de estar dentro de la carpeta raíz al hacerlo 🙂
Además de la respuesta aceptada, la división de la estructura de carpetas dentro del frontend y el backend es más útil si se basa en la lógica comercial en lugar de la lógica tecnológica.
Dividir toda la pila en componentes autónomos que preferiblemente no comparten archivos entre ellos es la mejor manera de hacer que su aplicación sea más comprobable y fácil de actualizar. Esto de la forma más pequeña posible es lo que comúnmente se conoce como arquitectura de microservicios.
Mal diseño: difícil de actualizar y probar:
Buen diseño: fácil de actualizar y probar:
Te mostramos las comentarios y valoraciones de los lectores
Si guardas algún titubeo y forma de reaccionar nuestro post puedes dejar una crónica y con mucho gusto lo leeremos.