TypeScript Shared codebase with two output directories

Question

I faced a problem :/ I want the shared codebase "shared" to be in both directories. Is this possible with typescript itself or do I need some extra build-tasks? Is there a better solution?

Important: The "shared" folder needs to be generated in srv and app, otherwise our core system would break.

I've got following src directory, where client contains a client.ts, server a server.ts and shared contains a index.ts. Now I want to use shared in client.ts and server.ts.

src
   - client
     - client.ts
     - tsconfig.json
   - server
     - server.ts
     - tsconfig.json
   - shared
     - index.ts
     - tsconfig.json

If I'm compiling my TypeScript, the following output should be generated.

app
   - client
     - client.js
   - shared
     - index.ts
srv
   - server
     - server.js
   - shared
     - index.ts

Here are my configs for each directory client/tsconfig.json

{
    "compileOnSave": true,
    "compilerOptions": {
        "target": "es2018",
        "module": "commonjs",
        "noImplicitAny": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "outDir": "../../app",
        "sourceMap": true,
        "diagnostics": true,
    },
    "include": [
        "client.ts"
    ],
    "references": [
        { "path": "../shared"}
    ]
}

server/ts.config.json

{
    "compileOnSave": true,
    "compilerOptions": {
        "target": "es2018",
        "module": "commonjs",
        "noImplicitAny": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "outDir": "../../srv",
        "sourceMap": true,
        "diagnostics": true,
    },
    "include": [
        "server.ts"
    ],
    "references": [
        {
            "path": "../shared"
        }
    ]
}

shared/tsconfig.json

{
    "compilerOptions": {
      "declaration": true, 
      "declarationMap": true,
      "composite": true,     
    },
    "include": [
      "*.*"
    ],
    "references": []
}

PS: If there is a better solution to solve this issue. Please let me know :)

Kind regards, Sebastian

Drake Boley · Accepted Answer · 2019-04-18 14:20:10Z

1

You could try potentially turning the /shared folder into a separate npm package and then using npm link / npm install to join them together in each individual project? I did something similar with React and React Native using TypeScript.

answered Apr 18, 2019 at 14:20

Drake Boley

413 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Doğancan Arabacı · Accepted Answer · 2019-04-18 14:20:38Z

1

Typescript compilation process will not move or append files for you. It's just creating .js files for .ts files. With only tsc, there is no way to create bundles.

You should use a bundler like webpack Here is a link which might help: https://webpack.js.org/guides/typescript/

This being said, I think what you want to do is not correct. I assume your client is a single page application and server is a node server to serve those files? If so, you will run your server in node environment and serve client.js.

You can bundle client.js (with webpack or other cli tools) and serve it directly from server.js. Server.js won't need shared.js or client.js to be in the same directory unless you only copy server directory to somewhere.

EDIT: PS: There are monorepo approaches for such use cases in big scale projects. I'd suggest to take a look at 'yarn workspaces' and 'lerna'

answered Apr 18, 2019 at 14:20

Doğancan Arabacı

3,9822 gold badges19 silver badges27 bronze badges

4 Comments

Sebastian Waldbauer Over a year ago

My node server isnt serving client files, its seperated from each other. Thats why I need this "shared" directory in both directories.

Doğancan Arabacı Over a year ago

I don't understand what you exactly mean by 'need directory'. If you have this structure and if you'd only run 'node-ts server/server.ts', it'll just work. Are you separating them when you are publishing/running?

Sebastian Waldbauer Over a year ago

Another HTTP Server is serving the client files and our server files will be run via nodejs.

Doğancan Arabacı Over a year ago

Ok, clear. You need a bundler or symlinks for sure. A bundler would do the trick more cleaner and error proof

Collectives™ on Stack Overflow

TypeScript Shared codebase with two output directories

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related