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!
You can achieve this in two ways that I know of:
Keeping client build folder inside client root, and then addressing it like in this example .
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 .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.