在 Typescript React 项目和 Typescript Express 项目之间共享代码

Question

I have been trying to come up with an elegant solution to share code between two projects that are closely related to each other.
I have a React web app which simply includes all of the client code and I have an Express app which serves the React web app, but it also acts as an API. Because I use Typescript for both projects, I want to reuse some types. To accomplish that, I created a shared project.

My current folder structures is as follows:

• web-app
• shared
• server

Now I want to link the web-app and server projects with my shared project, but there are some restrictions:

1. This shared folder should not be uploaded to npm.
2. I have to be able to still deploy everything with Heroku (which rules out npm link I believe).
3. I would prefer not to eject my React project.

I am not sure whether my current structure of projects allows the functionality I need, so feel free to also suggest other folder structures.

Answer 1

If you are using create-react-app to create the web-app then you can easily use NODE_PATH environment variable to do absolute imports without creating node modules.

1. Create a .env file at the root level (same level as package.json of web-app directory)
2. Set an environment variable, NODE_PATH to shared/ ( NODE_PATH=shared/ )

Now instead of doing something like

import { editUser } from '../../../shared/actions';

you can use

import { editUser } from 'shared/actions';

Fixing ESLint

Install eslint-plugin-import to prevent eslint from throwing import errors. And update your .eslintrc file as

{
    "settings": {
        "import/resolver": {
            "node": {
                "moduleDirectory": ["node_modules", "shared/"]
            }
        }
    }
}

Fixing Flow

Add the following content to your .flowconfig file

[options]
module.system.node.resolve_dirname=node_modules
module.system.node.resolve_dirname=shared

Answer 2

You can use yarn workspaces for that kind of purpose, There's a minimal working boilerplate I have created exactly for that kind of configuration: https://github.com/rok-tel/ts-express-react

take a look at ./packages/shared folder which is consumed both by server (express) and client (react)

Answer 3

Consider use Nx - https://nx.dev/

This is an awesome framework to manage monorepos.

• Use their React application boilerplate for the client side project
• Use their express project boilerplate to create the API
• Use their shared code package boilerplate to create shared code package

Docs for creating the shared code package:

https://nx.dev/l/r/tutorial/07-share-code