Do I need to run "npm run build" every time I made changes?

Question

First of all, I am really new to NPM stuffs. But I do know React and PHP. So I have figured myself to create a CMS system using PHP as a backend and React as a frontend with the help of CDNs from Babel and React(And ofc axios to make data requests and sends). However, I do want to get into more proper way with webpack with the actual website. So, I have followed along the tutorial from this article. He has explained quite extraordinarily. However, he uses HTML whilst in my case, I have a PHP. So since I am not fully aware of what I am doing. I have redirected the HTMLWebPlugin to my PHP File in webpack.config.js.

plugins: [
new HtmlWebPackPlugin({
  template: "./../index.php",
  filename: "./index.php"
})

However, when I make changes the code and refreshes it, the webpage will not adapt to the changes unless I run "npm run build" for the next time. I do know I am running it from the built app. And this is because I am rather making changes on the entry files (index.js) when the webpage is rendering the output files (dist/main.js). But is this okay to connect these two and is there a way to automatically adapt to changes I make in the entry files?

Yes, sir @aamirl! Please check it in here [link](https://ibb.co/ThTXYb7). It is my folder structure. The things in the ReactApp are the same with the article I mentioned above. The only difference would be the "plugins" of webpack.config.js. And I am not using CRA. I just followed that article, so probably npm install. — Kyi Zin, Feb 27 '20 at 01:05

score 37 · Accepted Answer · edited Mar 20 '23 at 18:10

37

So finally, I have found my solution. When you want to re-run "npm run build" every time a file changes. You need to install watch via npm. It checks all the files inside a directory and when you change something or on-save, it will re-run all the scripts inside package.json. So steps -

Install watch by
```
npm install watch
```

When watch is installed, add

"watch": "watch 'npm run build' ./directory-you-want-to-track"

Run
```
npm run watch
```

edited Mar 20 '23 at 18:10

General Grievance

4,555
31
31
45

answered Feb 29 '20 at 13:23

Kyi Zin

823
1
6
15

Thanks; this worked for me. However, it's slower than I anticipated. I wonder if https://stackoverflow.com/a/42773333/470749 would be faster, but I couldn't get `npm-watch` to work with this demo app: https://github.com/reduxjs/redux/tree/master/examples/todos – Ryan Apr 09 '20 at 22:32
Why not use the [webpack-dev-server](https://webpack.js.org/configuration/dev-server/)? – Jay Ghosh Jun 19 '20 at 14:40
I think this makes more sense as a dev dependency. – General Grievance Mar 20 '23 at 18:25
Point 2: add to where? – Anatoly Bugakov May 06 '23 at 16:15
1

You can also use watch with npx like: `npx watch 'npm run build' ./src`. This way you don't have to clutter you package.json – Sam Carlton Jul 26 '23 at 14:23

score 5 · Answer 2 · answered Sep 14 '21 at 10:15

5

Use this command:

tsc src/index.ts --watch --outDir ./lib

ref: https://www.youtube.com/watch?v=F6aHIh5NglQ

answered Sep 14 '21 at 10:15

J.K.

236
3
5

2

This should be the real solution. Somehow npm watch was using all of the memory on my computer, and it also doesn't support incremental compilation. – Jeffrey Russell May 20 '22 at 16:39
@JeffreyRussell I was facing the same issue, I found that it was due to not ignoring he build folder in watch, the watch command was going in infinite loop. I tried `https://medium.com/this-code/the-easy-way-to-watch-npm-builds-without-reloading-every-damn-time-cd1fd14393cb` but with ignore key for build and it worked – Faisal Ali Jan 12 '23 at 03:29

score 2 · Answer 3 · answered Nov 21 '22 at 20:26

2

If you are using Vite Laravel plugin open package.json install watch

npm install watch

and on scripts change it to

"build": "vite build --watch"

It should automatically update when you make changes

answered Nov 21 '22 at 20:26

Kipruto

721
6
16

score 0 · Answer 4 · answered Feb 27 '20 at 01:07

0

Yes, there is a way to solve this issue. You can use webpack's Hot Module Replacement feature. It's is just running webpack in development mode with proper set of config which you should find in webpack official documentation.

answered Feb 27 '20 at 01:07

Harish Dhami

1,016
1
7
10

It does not necessarily relate to my question as it only works for module changes, which, in my case, is not it. – Kyi Zin Feb 27 '20 at 01:27
Nope, Anything you change over code, build will rerun for that change. Is not it what you looking for? – Harish Dhami Feb 27 '20 at 01:32

Do I need to run "npm run build" every time I made changes?

4 Answers4