3

I have a project with the following structure

project
├── client
│   └── src
│       ├── index.js
│       ├── and.js
│       ├── some.js
│       ├── other.js
│       └── files.js
├── public
├── server
│   ├── out
│   │   ├── index.js
│   │   └── any.other.dependency.js
│   ├── src
│   │   ├── index.ts
│   │   └── foo.js
│   └── templates
├── shared
│   └── constants.js
└── mutliple.config.files.json

My goal is to have a server with all the server logic inside server/src, which serves different html files from server/templates. I want the server code to use Typescript, and the compiled output should go to server/out.

There's also the client side of the application, which lives in client/src. The logic there is complex enough that I decided to use webpack for bundling. I might even add some react in the future. All this code is compiled by webpcak and the resulting files live in /public.

I also share some constants between the client and server logic, and I decided to put them in ./shared. I might want to add some utilities there in the future, so let's assume it's not just constants.

At some point in the future I'd like to migrate the whole project to TS, but I'm not close to that yet.

How can I achieve this with Typescript?

I have the webpack side sorted out. My problem comes with the TS compiler. I can't manage to get it working because shared is out the compilerOptions.outDir, but if I set it as the whole project folder I end up with a crazy server/out folder structure. Something like server/out/server/src/index.js

My tsconfig.json looks like this:

{
  "extends": "@tsconfig/node12/tsconfig.json",
  "include": ["server/src/*", "shared/*"],
  "exclude": ["node_modules"],
  "compilerOptions": {
    "allowJs": true,
    "noImplicitAny": false,
    "outDir": "./server/out/",
    "rootDir": "./server/src"
  },
}
Daniel Reina
  • 5,764
  • 1
  • 37
  • 50
  • This would be a simple task, if it was not for the shared folder. My guess would be to still go with two seperate folder, one for the server and one for the client. Your shared folder could come as a dependency. There is a way to require a dependency from NPM that does not come from the NPM repo. This way, you can import it in both project just like any other dependencies. – Nicolas Aug 21 '20 at 11:46
  • Having two seperates projects would also have the benefit of having two `tsconfig.json` file. Changes are, your configuration for your Front-end are not going to be the same as for your Back-end. Same goes for your NPM packages. – Nicolas Aug 21 '20 at 11:50
  • Look into project references – Aluan Haddad Aug 21 '20 at 14:13
  • @AluanHaddad but how are deployments handled? How will it work with docker for example? – Nikola-Milovic Aug 15 '21 at 08:53

0 Answers0