Typescript + webpack (with hot reload) + NodeJS

Question

Faced with problem - setup some prototype of project based on TypeScript. It contains client scripts and server part (NodeJs with ExpressJs).

I would like to have webpack as a bundler and use hot reloading feature to see changes on fly. Initially, i used react-transform-boilerplate-ts, but the problem there - entry point of development server is js file. I suppose it should be ts, because there i would like to include my configuration of express, etc.

So, Does anyone has good boilerplate (followed best practices in project structure) to create project that contains:

• client (React) and server (typescript)
• Back-end uses NodeJs and ExpressJs (typescript)
• client and server support hot reload (as i understand best choice - is webpack option for reloading, not gulp tasks that run watching).

Or maybe you could me good advices, how to configure that kind of stuff in proper way.

Thanks a lot

Answer 1

Does anyone has good boilerplate (followed best practices in project structure) to create project

Here is a project I've opensourced : https://github.com/alm-tools/alm

• client (React) and server (typescript)

Check!

• Back-end uses NodeJs and ExpressJs (typescript)

Check!

• client and server support hot reload

Check! : Here are the contributing docs https://github.com/alm-tools/alm/blob/master/docs/contributing/README.md#webpack 🌹

Answer 2

I recently released code for my project management application (nodejs / reactjs + redux / server rendering etc.) - https://github.com/Brainfock/Brainfock Give it a look (online demo available), hopefully you'll find something useful:

Namely, see webpack config to get a good example for your question: https://github.com/Brainfock/Brainfock/tree/master/webpack (i don't think copy-pasting code form Github is necessary)