get my TypeScript code into the "dist" folder when transpiling with a well-defined folder structure

[frank vessel]

Hello everyone!

I'm working on a TypeScript project with a well-defined folder structure, and I'm trying to transpile my code so that it ends up in the "dist" folder.

- src/
  - index.ts
  - folder1/
    - file1.ts
    - file2.ts
  - folder2/
    - file3.ts
- dist/

Unfortunately, After running the tsc command, I would expect the resulting JavaScript files to be placed in the "dist" folder, while preserving the same folder structure as the TypeScript source code.

my tsc.config:

{
  "compilerOptions": {
    "outDir": "./dist",
    "rootDir": "./src",
    "target": "ESNext",
    "module": "CommonJS",
    // Other compilation options...
  },
  // Other settings...
}

Instead, I'm getting a rather confusing output, and all the JavaScript files seem to be placed together in the same "dist" folder, disregarding the original folder structure.

how can i obtain the same folder structure ?

thx in advance

get my TypeScript code into the "dist" folder when transpiling with a well-defined folder structure

[rapid glacier]

how are you compiling your code? what commland do you type?

@frank vessel

[frank vessel]

tsc

[rapid glacier]

alright, just making sure, since calling the compile with a file uses the default options

but yeah, based on your settings, it should be working as expected

the compiler re-uses the source folder structure for the output

it will never flatten it

what other options do you have that could change the way code is emitted?

[frank vessel]

let me see, give a second i'll back to you asap

[frank vessel]

ok 'ive made this changes
my package.json:

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "dev:start": "tsc && node .dist/services/index.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^20.4.5",
    "typescript": "^5.1.6"
  }
}

my ts.config:

{
  "compilerOptions": {
    "outDir": "./.dist", // changed this line
    "rootDir": ".", // changed this line
    "target": "ESNext",
    "module": "CommonJS",
    // Other compilation options...
  },
  // Other settings...
}

my actual folder structure:

- client/
- server/
  - src/
    - tsconfig.json
    - package.json
    - package-lock.json
    - services/
    - node_modules/
    - .dist/

finally now when i run npm run dev:start it create the right folder structure.

[rapid glacier]

yeah, it's because of how rootDir works
would recommend not using it, since it can be a bit confusing

instead, I'd recommend using include it's much more flexible and easier to understand

https://www.typescriptlang.org/tsconfig#include

wait, are you sure about your folder structure

- client/
- server/
  - src/
    - tsconfig.json
    - package.json
    - package-lock.json
    - services/
    - node_modules/
    - .dist/

looks a bit odd to me

src should be for source code and source code only

all the other files and folders listed in that src directory should be there

they should be at the same level as the src dir

see the usual folder structure for TS projects mentionned in the docs for the "include" property

[rapid glacier]

it's not the only place it's mentionned or the best place for those kinds of info, it just hapens to be there to explain the setting

[frank vessel]

the truth and that in many ways I'm still groping in the dark. from what I understood, was that src/ must contain the ts configuration file, so in a situation where I have two parent folders for example client/ and server/ I would have created two different ts configuration files, one for the client and one for the server. but is this wrong?

[rapid glacier]

yeah, not exactly

rule of thumb, src is for source code (and notthing else)

if you need multiple smaller/separate projects (like a "client" and a "server"), then there are other solutions:

monorepos (3rd party tool like "nx"), git submodules (from "git"), or project references (TS's way of doing it)

project references is a bit more involved than a simple TS project

https://www.typescriptlang.org/docs/handbook/project-references.html

[frank vessel]

this is exactly what I'm trying to achieve

solutions like monorepos

[rapid glacier]

https://github.com/RyanCavanaugh/project-references-demo
here is a good example repo for project references in TS

[frank vessel]

looks cool, i think i will start from this https://www.typescriptlang.org/docs/handbook/project-references.html and also this https://github.com/RyanCavanaugh/project-references-demo

thanks Ascor, your help was providential