DEV Community

loading...

Web App - MERN Stack

ayushmxn profile image Ayushman Chhabra ・1 min read

I've recently been playing around with React, Express and Mongoose. You can view my GitHub repo here.

Current Project structure:

/back/config/
/back/models/
/back/node_modules/
/back/routes/
/back/package.json
/back/server.js

/front/build/
/front/node_modules/
/front/public/
/front/src/
/front/package.json

/node_modules
/package.json
Enter fullscreen mode Exit fullscreen mode

By running npm run front, npm run back and npm run full (using concurrently) I respectively run the front end, back end and full stack web app. You can see what exactly each command does in my package.json.

As an experiment, I want to try to structure my project slightly differently.

Proposed Project structure:

/back/config/
/back/models/
/back/routes/
/back/server.js
/front/build
/front/public
/front/src
/node_modules
/package.json
Enter fullscreen mode Exit fullscreen mode

The npm run back and npm run full would not change. The problem lies in npm run front and the use of react-scripts. For react-scripts start to work, the node_modules and a package.json have to be in the same directory.

Is there any way around this? Any advice/suggestions on what to use or where to look would be awesome.

Discussion

pic
Editor guide
Collapse
kojikanao profile image
Koji (he/him)

you can use github.com/kimmobrunfeldt/concurre...

or you can use a shell script

cd frontend_path && npm start
cd backend_path && npm start
Collapse
ayushmxn profile image
Ayushman Chhabra Author

I actually meant one /package.json file with two folders /front/ and /back/ which only contain the source code - no config files or node_modules. You can look at the source code to better understand what I mean. The reason I ask this is I want to know how flexible React is.

Collapse
kojikanao profile image
Koji (he/him)

I guess that is not a good way to use package.json since package.json's main role is to manage dependencies.

Thread Thread
ayushmxn profile image
Ayushman Chhabra Author

Hmm, didn't think of it from that perspective.

Thread Thread
kojikanao profile image
Thread Thread
ayushmxn profile image
Ayushman Chhabra Author

I've re worded my post to better convey the question I was trying to ask :)

Collapse
ayushmxn profile image
Ayushman Chhabra Author

True, that makes sense.

Collapse
yhuakim profile image
Joachim

Do you mean, you used the command "npm start" and dev environment didn't load?

Collapse
ayushmxn profile image
Ayushman Chhabra Author

I already made it work using npm start. What I mean to say is I want to change my project file and folder structure in such a way so that the front, back and full commands work.

Collapse
yhuakim profile image
Joachim

If what you mean is running everything simultaneously, then use "concurrently"... It runs your front and back simultaneously with one command

Thread Thread
ayushmxn profile image
Ayushman Chhabra Author

I've re worded my post to better convey the question I was trying to ask :)

Collapse
fanatic75 profile image
Prateek Banga

Just add a script in package.json with key as front and give the execution command as value, and do npm run front(key)

Collapse
ayushmxn profile image
Ayushman Chhabra Author

I've re worded my post to better convey the question I was trying to ask :)

Collapse
ayushmxn profile image