React + backend - project structure when sharing code

Question

I really like the folder structure as can be seen here when dealing with a React frontend and a some backend with express:

root
├── backend
|   ├── node_modules
         


        

Answer 1

I think it's perfectly reasonable to want to share code between your front and back end. It's one of the reasons we code in javascript instead of Ruby or PHP.

You can accomplish exactly what you want by using yarn instead of npm and yarn workspaces: https://yarnpkg.com/lang/en/docs/workspaces/. At the top level you set up three modules/packages in your package.json (make sure you name the workspaces correctly in their respective package.json files):

"workspaces": {
    "packages": [
        "backend",
        "frontend",
        "shared"
    ]
},

Once you do, you can import shared code in your CRA app or your back end simply like this:

import { myFunction } from 'shared/src/myFile';

The only drawback is that you can't import react components from the shared directory into frontend as long as you are using CRA. This won't affect you now since you only have one react app. Should you need to share react components among multiple projects, look into some on the suggestions above like bit.dev.

This is not the only way, but it's among the simplest and most straight forward.

Answer 2

1. Having separate sub-projects for frontend and backend makes perfect sense due to vastly different dependencies. Mixing it up increases disk space consumption in production deployments and goes against security guidelines. Your folder structure is reasonable (except for public/ subfolders I'm unsure about, maybe I'm missing something).

2. The approach import { myFunction } from @shared/myFile; is fine. Just don't use CRA.

3. For a project with a single frontend and a single backend there is no need for a shared\ top-level folder because the frontend is the only source of 'UI truth' (e.g. the source of types and components related to UI) that is consumed by the frontend and the backend is the only source of 'API truth' consumed by both frontend and backend. With this arrangement only @backend/api_shared_stuff needs to be shared.

4. Some links to trustful resources where project structures for full-stack React development are explained would be really helpful. On the one hand, usually project authors have to explain plenty of other things and on the other hand keep the documentation (typically a README) reasonably concise. You may find that providing a justification/explanation why the subdirectory structure is this and not that was not the top priority.

Answer 3

Architecture is a tricky one, everyone has a different opinion and every option has pro and cons.

Personally I believe its best to separate the backend and frontend into sperate projects and keep them that way. Now as JavaScript/React/Node encourage component-based approaches a really nice way of sharing code between them is Bit.dev.

https://bit.dev

I am currently using it to share components and functions between three web apps and a few Node microservices.

A good structure for React app can be found here, this one works well and scales nicely:

https://hackernoon.com/fractal-a-react-app-structure-for-infinite-scale-4dab943092af

As for Express, there are so many ways to structure the project but personally recommend a folder for your Routes, a folder for your Controllers, this is where the logic for Routes live. Then go from there. Check this link out:

https://www.freecodecamp.org/news/how-to-write-a-production-ready-node-and-express-app-f214f0b17d8c/

Depending on what your building you may not even need a full backend you can check out the JAMStack here for more info:

https://jamstack.org

I would consider separating them though as the project scales it makes it much easier to manage. You can release your front end on something like Netlify and then use something like AWS or Azure to host your Node/Express server.