4

First of all, I have it wired and working, but I am somewhat discontent with the result and have a feeling it can be improved.

(The current result can be found here - https://github.com/MarkKharitonov/Angular2WebpackNodeExpress/tree/v0.0.1.)

The directory structure is:

C:.
│   .gitignore
│   package.json
│   tsconfig.json
│   tslint.json
│   typings.json
│   webpack.config.js
│
├───dist
│   └───server
│           api.js
│           api.js.map
│           main.js
│           main.js.map
│
└───src
    ├───client
    │       app.component.ts
    │       index.html
    │       main.ts
    │       polyfills.ts
    │       tsconfig.json
    │       vendor.ts
    │
    └───server
            api.ts
            main.ts
            tsconfig.json

Right now the dist folder has only the server side files compiled from ./src/server. They are placed there by the IntelliJ IDEA, because ./src/server/tsconfig.json requests compilation on save.

The client side bundling occurs in memory courtesy of webpack-dev-server. The ./src/client/tsconfig.json does not request compilation on save.

The things I dislike about my current setup are described here - https://github.com/MarkKharitonov/Angular2WebpackNodeExpress/tree/v0.0.1#problems, namely:

  1. webpack is going to take care of any plain .js files under ./src/client - they would be bundled and placed under ./dist/client automatically. But what about plain .js files under ./src/server ? Do I need a task runner for that (gulp, grunt, whatever ...) or is there a solution within webpack?
  2. I have three tsconfig.json files - ./src/client/tsconfig.json, ./src/server/tsconfig.json and ./tsconfig.json. The three files share most of the options, but not all. Right now I copy them in each of the three files - not very good.
  3. In addition, because the typings folder is at the root I have to start all the top level TypeScript files (.\src\client\main.ts, .\src\client\polyfills.ts, .\src\client\vendor.ts and .\src\server\main.ts) with /// <reference path="../../typings/index.d.ts" />.

Hence the questions:

  1. Can webpack also handle the server side files, but differently from the client side ones? I.e. transpile - yes, copy to dist - yes, bundle - no? Please, bear in mind I am using webpack-dev-server.
  2. Is it possible to inherit tsconfig.json configuration so that I could avoid duplicating many options across the three files I have?
  3. Is it possible to avoid the inclusion of /// <reference path="../../typings/index.d.ts" /> in the top level TypeScript files when the file layout is similar to mine ?

I know these are three questions instead of one, but I feel they are all closely related and the answer to one could also be the answer to another.

1 Answer 1

1
  1. I don't think you need/want webpack to handle server-side files. Transpiling and copying over of the server side files to /dist is handled by Typescript compiler (via outDir config), already. There will be no bundling of server-side files since no server files were indicated as entry points in the webpack config.
  2. Is not currently possible. However, looks like there is an issue to track this: https://github.com/Microsoft/TypeScript/issues/9876
  3. Unsure, related to #3 in a way (but not really). I'd imagine no as long as you want to keep the client and server files truly seperate.
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.