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.

Posted on by:

ayushmxn profile

Ayushman Chhabra

@ayushmxn

Currently a little amazed and obsessed with designing algorithms.

Discussion

pic
Editor guide
 

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

or you can use a shell script

cd frontend_path && npm start
cd backend_path && npm start
 

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.

 

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

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

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

 

True, that makes sense.

 

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

 

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.

 

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

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

 

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

 

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