如何构建 Express+React TypeScript 项目？

Question

I am currently trying to set up a project that uses Express for the backend and React for the frontend. I also want to use TypeScript for both parts. For easy setup, I used npx create-react-app client --template typescript and npx express-generator-typescript server , resulting in the following directory structure:

myProjectRoot/
|_ server/
   |_ src/
   |_ node_modules/
   |_ package.json
   |_ tsconfig.json
   |_ ...
|_ client/
   |_ src/
   |_ node_modules/
   |_ package.json
   |_ tsconfig.json
   |_ ...

Now I configured React's development server in client/package.json with a line "proxy": "http://localhost:3001" and let the Express server listen on port 3001 to handle API requests. So far, so good; for development, this is perfectly fine imho.

However, I am a bit confused how to best set up the commands for a production build. I wanted to change the default-configured build directories to avoid having client and server build each in an isolated directory:

myProjectRoot/
|_ server/
   |_ ...
   |_ src/
   |_ dist/
      |_ compiled_backend_code
|_ client/
   |_ ...
   |_ src/
   |_ build/
      |_ compiled_frontend_code

Instead, I aimed for something like this because it seems much cleaner to me:

myProjectRoot/
|_ server/
|_ client/
|_ dist/
   |_ server/
      |_ compiled_backend_code
   |_ client
      |_ compiled_frontend_code

To get there, I changed the outDir of the server's tsconfig.json to ../dist/server and the build script in the client's package.json to react-scripts build && mv build../dist/client (as explained here ).

The problem with this now is that the compiled code does not find its dependencies any more because the server's and client's node_modules folders are not located in the dist/ directory or a parent directory any more. I'm not sure what a good solution to this problem is, so I'd appreciate any input, even if it means a completely different project structure. Thanks!

Answer 1

You can achieve this in two ways that I know of:

1. Keeping client build folder inside client root, and then addressing it like in this example .

2. Use Yarn Workspaces , where node_modules are mainly in the root folder (except for when packages are using different versions of the same dependency)

BTW, this repo is a boilerplate I've created for a full stack Express + React Web application in Typescript using Yarn Workspaces .