Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Typescript + webpack (with hot reload) + NodeJS

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

like image 590
Victor Avatar asked Feb 03 '16 21:02

Victor


People also ask

Does Webpack have hot reload?

Get Startedwebpack-dev-server supports a hot mode in which it tries to update with HMR before trying to reload the whole page. See the Hot Module Replacement guide for details.

How do I enable hot module replacement in Webpack?

To enabling HMR in your project, you need to let your application know how to handle hot updates. You can do so by implementing the module. hot API exposed by Webpack. Once the hot update is accepted, the HMR runtime and the loaders will take over to handle the update.

Is Vite better than Webpack?

Compared to Webpack 5 with lazy compilation, Vite has a slightly slower dev startup time and somewhat longer production build time even with code-splitting enabled. But one of the big reasons developers love Vite is the near-instant feedback loop between saving a file and seeing your changes in the browser.


2 Answers

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 🌹

like image 94
basarat Avatar answered Sep 21 '22 17:09

basarat


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)

like image 31
Webkadabra Avatar answered Sep 20 '22 17:09

Webkadabra