CODEWITHSUNDEEP
javascriptnode.jsreactjs
Zett
Zett

Reputation: 1031

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

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?

Upvotes: 41

Views: 92299

Answers (5)

Henrik Heino
Henrik Heino

Reputation: 395

Just in case anybody else wants to do this with Linux commands only, here is one solution:

inotifywait -r -m -e modify,create,delete DIRECTORY_WHERE_YOUR_SOURCE_FILES_ARE | while read path action file; do npm run build; done

The only downside I noticed is that it runs it twice, but that is okay with me, so I'm not going to improve it right now...

Upvotes: 0

Zett
Zett

Reputation: 1031

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 -

  1. Install watch by

    npm install watch

  2. When watch is installed, add

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

  3. Run

    npm run watch

Upvotes: 45

Kipruto
Kipruto

Reputation: 857

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

Upvotes: 3

J.K.
J.K.

Reputation: 303

Use this command:

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

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

Upvotes: 9

Harish Dhami
Harish Dhami

Reputation: 1086

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.

Upvotes: 0

Related Questions