React + backend – project structure when sharing code

It’s perfectly reasonable to want to share code between your front and back end. It’s one of the reasons to 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 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.

ADDENDUM!!! It’s now possible to use CRA and yarn workspaces to share React code, if you replace CRA with CRACO. All you do is create another workspace with the shared react code. Then create a symbolic link in each module where you want to access it:

root
├── fontend-one
|   ├── symbolic link to frontend-shared
├── frontend-two
|   ├── symbolic link to frontend-shared
├── frontend-shared

Each of the CRA front end modules modules also requires a craco.config.js file where you tell web-pack not to follow symbolic links:

module.exports = {
    // ...
    webpack: {
        configure: {
            resolve: {
                symlinks: false
            }
        }
    }
};

You import from shared-frontend normally:

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

It’s a pretty lo-fi solution but has proven robust for the year we’ve been using it.