1

I'm currently new to the MERN stack, and whole nodejs scene. I'm just wondering how you can reference a package.json file from a sibling directory.

So far, my organization of folders look like this

currently, my backend package.json looks like:

"name" : "backend",
"main" : "server.js",
"scripts": {
  "start" : "node server.js",
  "backend": "nodemon server.js" ,
  "frontend" : "npm run start --prefix client",
  "dev": "concurrently \"npm run backend\" \"npm run frontend\""
},
...
...
"dependencies": {
  "concurrently": "^5.1.0",
  "cors": "^2.8.5",
  "dotenv": "^8.2.0",
  "express": "^4.17.1",
  "mongoose": "^5.7.8",
  "nodemon": "^2.0.2"
 }
...

Also, my frontend package.json looks like:

"name": "client",
 ...
 ...
 "dependencies": {
   "bootstrap": "^4.4.1",
   "react": "^16.11.0",
   "react-dom": "^16.11.0",
   "react-scripts": "3.2.0"
  },
"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
 },
 ...
 ...

What I'm trying to do here is get into the client folder, and run the package.json on that. Is it possible to do so? Or am I going about this whole idea wrong? Or is it a bad way to organize my folders and I should do it differently?

Also, I used this post:

How to organise file structure of backend and frontend in MERN

for a possible solution for this but it doesn't seem like it is working for me.

1 Answers1

0

I built my file structure the same way when I was first taught the MERN stack. The problem is: your front end isn't supposed to be a separate entity. You seem to be using the package create-react-app which runs a server for you so you can focus on developing the front end, but in the end you're meant to run the build script and it will give you static files to serve from your back end. So you would use

server.js:

app.use(express.static(__dirname + '/build'))

command line in folder 'client':

npm build

drag 'build' directly within 'cue-card'

Sydney Y
  • 2,912
  • 3
  • 9
  • 15
  • So do I have to restructure my folders, and how would I "build" it. Do I put this in my server.js script? thanks. –  Feb 02 '20 at 21:48
  • Run 'npm build' in your front end, then put my above code in your server.js and change the '/build' string to the path to the build folder that the build process made for you. – Sydney Y Feb 02 '20 at 22:11
  • I ran 'npm build' in my front end. And i put the code in my server.js accordingly. however, when i start it on my server.js it doesnt work? –  Feb 04 '20 at 01:18
  • Is the build folder in the cue-cards folder? The URL might be localhost:[port]/index.html – Sydney Y Feb 04 '20 at 02:53
  • Yeah, it is. and ive tried that URL. For some reason it doesnt work. –  Feb 04 '20 at 04:21
  • https://create-react-app.dev/docs/deployment/#other-solutions Try adding the root path from their example. – Sydney Y Feb 04 '20 at 04:24