0

tl;dr: How can I create a project with React on the front-end and Express on the back-end and have only one package.json and node_modules folder?

When creating an application with a React front-end and Express back-end, I'd like to have a structure like this:

  • client
    • client stuff
  • server
    • server stuff
  • .gitignore
  • package.json
  • etc...

Note that the React front-end is built with create-react-app

Where "client stuff" and "server stuff" is purely front- and back-end code. However the best solution(only solution?) I have been able to find is something like this. Where the client and server are running on two separate servers and client requests are proxied to the server. This solution is fine except for the fact that it requires 2 if not 3 package.json. I'd like to keep the client and server code separated as they should be, but still within the same project and repo with a single package.json and node_modules folder.

I understand the separation of concerns between client and server and I think what I'm shooting for satisfies that but if not please let me know.

  • What exactly is the problem with having one package.json file in your case? – rishat Feb 07 '18 at 23:12
  • @Rishat Well, having only one package.json is my goal. If you meant _more_ than one, then I guess it is personal preference. I've also heard it is good practice to have only one. If it turns out there is no better solution I'll be fine to go with something like the article I linked I guess. Just preference :) –  Feb 07 '18 at 23:22
  • From my understanding it's more common to only have one package.json and one node_modules folder. I have a react app with an express server set up that way. I also use a proxy for the express server and still only have one package.json file. Maybe there is confusion somewhere with this setup? – Matthew Moran Feb 07 '18 at 23:44
  • @mtmoran I'd love to know what you did to accomplish this. Maybe you could write an answer with details or hit me with a link? –  Feb 07 '18 at 23:54

2 Answers2

0

I have a sample project in github: https://github.com/jmaister/babel-express-webpack-starter

It only has one package.json to download client and server dependencies.

Also, it has a build for the client:

npm run webpack

and start for the server:

npm run start
jordiburgos
  • 5,964
  • 4
  • 46
  • 80
  • This is great, thanks! I guess I was looking or a perfect scenario where I could use create-react-app with express and have only 1 package.json but it seems that isn't possible. Thanks again for your sample :) –  Feb 08 '18 at 00:55
0

Here is glossa, a project that utilizes the setup you are looking for.

In src I have my create-react-app. (now I have ejected my projects but don't let that confuse you.) In that same directory I have my express server.

If you don't want to have the in the same directory, the options are to create a symlink or eject your create-react-app and remove ModuleScopePlugin from your webpack config. This answer has more details for that scenario.

You will have to add a proxy in your package.json. Currently mine is set up like this on the master branch.

"proxy": "http://localhost:8080",

My express server runs on 8080

Matthew Moran
  • 1,457
  • 12
  • 22
  • 1
    Thanks for the example, I think this is probably as close as I'm gonna get. Initially I was hoping for something as simple as using create-react-app, slapping an express server next to it and somehow being able to live off one package.json. It seems to have that kind of configuration I would need to manually setup webpack, babel, etc., as you did with glossa. –  Feb 08 '18 at 03:10
  • Well, I did not manually setup webpack, though I did with babel so I could write the express server in es6. All the files you see with webpack is what you'd see if you `eject` your create-react-app. It's running 'under the hood' when you run you create-react-app So if you eject your app you'd see the same thing. But I'm also not sure where you are seeing multiple packagae.json files? – Matthew Moran Feb 08 '18 at 03:13
  • Without ejecting create-react-app, I'm fairly certain you can't move node_modules or package.json without running into issues with react-scripts (correct me if I'm wrong). Assuming that is the case, I have a package.json in client for the client dependencies, proxy, scripts, etc. and a package.json in server for server dependencies, scripts, etc. I also have a top level package.json for running both client and server concurrently, running them seperately, etc. these are the scripts I actually interact with. –  Feb 08 '18 at 03:35
  • I just spun up an example of what I'm trying to explain [here](https://github.com/jolaleye/react-express). Little to no substance but you should be able to see the structure. –  Feb 08 '18 at 03:36
  • Hmmm. I see it I guess i just don't understand fully why you believe you're limited to creating all three package.json files. Maybe I'm missing something, but what issues are running into when you install all the dependencies in the root directory? In your scripts I dont think you need to cd into those directories, I believe you can provide the relative file path `"server": "nodemon ./src/server/express/ ."` for example. – Matthew Moran Feb 08 '18 at 03:46
  • The top level package.json could be removed but it is useful for controlling the client and server from outside. As for removing the client package.json, are you suggesting I do something like create a server folder in the app generated by create-react-app? If so, that is a possibility I haven't considered, but then my client and server code will be a little more integrated and I won't have distinct "client" and "server" folders. It sounds super petty but it's a separation of concerns and preference issue. –  Feb 08 '18 at 04:00
  • 1
    Conceivably, you could have your server outside of your client directory, however, you WOULD have to eject your create-react-app and modify the webpack.config file (or create a symlink). Or you'd need to have your express app in your `src` directory as the limitations on create-react-app inherently have defined. – Matthew Moran Feb 08 '18 at 04:07
  • 1
    My decision to was to move my express server into `src` as that would assist me in using es6 and would not require modification of the webpack configuration. Ideally, I would have them more distinct, but in either way, you'd still only need one package.json file. – Matthew Moran Feb 08 '18 at 04:09
  • Alright, I think I understand what you're saying now. I was overlooking some things in your glossa example because I was too focused on naming. Thanks for all your help in this :) –  Feb 08 '18 at 04:13
  • You're welcome. Let me know if you need anything else. – Matthew Moran Feb 08 '18 at 04:19