styfle/react-server-example-tsx

Is there a way to run everything in watch mode?

Closed this issue ยท 1 comments

grug commented

Hi there,

Is there a way to run this project with one command that does the following:

  • Builds everything
  • Runs the node service
  • Watches the client side code for changes and triggers a build when changes are detected
  • Watches the server side code for changes and triggers a build when changes are detected

Good question! ๐Ÿ‘

The goal of this project is to demonstrate React SSR with TypeScript and try to keep the dependencies to the bare minimum. Earlier this year I switched from browserify to webpack since that's what seems to be used more in the wild.

I do have a npm run watch that will almost work because the code will rebuild but it won't automatically restart the server. So you will get react warnings that the server side does not match the client side.

However, you can get really close to what you want with no warnings using nodemon.

  1. Opening a terminal and exec npm run watch
  2. Open another terminal and exec npx nodemon (assuming latest npm that ships with npx)
  3. Editing a file and save
  4. Refresh browser
  5. It should pick up the changes, woohoo ๐ŸŽ‰

Now there are tools to skip step 4 and auto-refresh the browser for you such as webpack dev server with hot module reloading (HMR). This example might work. Also npm-run-all might work.

I would be happy to accept a PR if you would like to implement ๐Ÿ˜ƒ ๐Ÿ’ฏ