CODEWITHSUNDEEP
node.jsreactjscreate-react-app
enp4yne
enp4yne

Reputation: 646

Best practices: Folder structure for client and server using create-react-app

Recently I've done a few small projects with a Node backend and a React frontend using create-react-app. Although I've spent quite a bit of time researching best practices for folder structures I haven't been able to come up with a satisfying solution without having to eject the react app. I wonder if there are solutions out there that I just haven't found yet.

The folder structure I am trying to aim for looks something like this:

package.json
src/
   client/
     app.js
     ...
   server/
   index.js (node.js main file, could just as well be in server/)

This layout would allow me to run all scripts from the root folder and I can put all configurations in one package.json. For example, I would like to be able to just run npm test from the root folder which would then use jest to run both the client and the server tests.

As far as I can tell create-react-app is hardwired to expect a src/index.js when using npm start, which prevents me from using this folder structure - if I just move all the boilerplate generated by create-react-app into the client folder I have an ugly src/client/src folder which again contains it's own package.json. I guess I could split it differently, creating a client/src and server/src, but I still have separate package.json files in each directory.

Would love the hear about your experiences with this, maybe I am missing the obvious solution.

Upvotes: 3

Views: 5881

Answers (1)

Sagar Acharya
Sagar Acharya

Reputation: 1871

   mainDir/
      app/
        src/
          index.js
        package.json
      api/
        src/
          index.js
        package.json

I follow this pattern for developing applications in microservice architecture.

This structure is for mono-repos.

You also can divide the front end and backend into different repositories.

Upvotes: 11

Related Questions