21

Laravel ships with a package.json file for npm.

The default package.json only ships with devDependencies.

npm run development is used to bundle all dependencies with web pack into a single file on local development, which is then pushed via version-control to production.

What do I need npm run prod for?

Adam
  • 25,960
  • 22
  • 158
  • 247
  • 3
    I'm not sure about the specifics of Laravel's scripts, but generally `development` does a development build and you do NOT put these build files under version control. `production` likewise would do a production build -- you deploy the files that it builds to your server, but you don't need to run the script itself in prod. – mpen Nov 26 '19 at 19:39
  • @mpen do you mean `npm run production` should not be run on the production server? – Kerkouch Nov 26 '19 at 19:45
  • 1
    @Kerkouch I agree completely with mpen's answer. You run them locally, not on the server. – nakov Nov 26 '19 at 19:48
  • 3
    @Kerkouch Correct. If your app is PHP only, you don't even need node or npm installed on your production server. package.json [non-dev] `dependencies` is really more for node applications, where half the dependencies are only needed for development, and you actually need the other half installed on the production server to run your app. But Laravel/PHP apps typically pre-compile all the assets before deploying. – mpen Nov 26 '19 at 21:38
  • The link to the Laravel package json doesn't work (any more). Here is the one for Laravel 8: https://github.com/laravel/laravel/blob/8.x/package.json – Frank Lämmer Feb 19 '21 at 16:55
  • 1
    in Laravel 9: `npm run dev` is working but `npm run prod` or `npm run production` is not working. so we should run `npm run build` – Raskul Aug 31 '22 at 18:02

3 Answers3

12

What I usually do is use npm run dev or npm run watch which just watches for changes and still does development compiling, which means any console.log that I use, and the output is not minified, so this is good for development purposes as the scripts says :) . Before I push to production I ran npm run prod which then minifies the output and I version the output for caching purposes:

https://laravel.com/docs/master/mix#versioning-and-cache-busting

And I forgot to mention about the installing part.. if you run npm install on production it will install the devDependencies as well. So check this answer

https://stackoverflow.com/a/9276112/1457270

nakov
  • 13,938
  • 12
  • 60
  • 110
  • So the only `npm` command you run on the production server is `npm install --production`, right? – Adam Nov 26 '19 at 20:09
  • 1
    @Adam, I don't run even that one, as I compile the assets locally. So I usually compile one `libs.js` scripts which includes most of the third party libraries used, and then `app.js` which is my own scripts/components. And I push them minified to my repository as well, so the team shares the same versions. – nakov Nov 26 '19 at 20:28
  • My problem with compiling everything locally is that ```npm run dev``` and ```npm run prod``` produce different outputs (as expected). Minifying for production before pushing makes sense, but the problem is that git sees the minified ```app.js``` as different than the non-minified one. So, git always thinks ```app.js``` has changed. How do you handle this? – Andy White Dec 11 '20 at 19:05
  • 1
    @AndyWhite I am never pushing the version compiled by `npm run dev` into the repository, always the minified one. So while developing locally I always have `npm run watch` running, before I am ready to push I run `npm run prod` and that's it. – nakov Dec 11 '20 at 20:55
  • @nakov, that makes sense and I appreciate the follow up. With ```npm run watch```, it will compile for dev which will be different than the minified one that is in the repo. I guess it's a personal preference, but I don't like seeing 'changed' files in git that aren't really changed. My solution was to add an ```npm run watch-prod``` command which compiles for production. That removes the entire point of having a dev build, but I couldn't think of anything else. – Andy White Dec 13 '20 at 02:26
0

My understanding is you should commit production js and css files to source code control.

Once you wish to push to production you will need to make sure that all your dependencies are retrieved by running

npm install

this only needs to be run once though.

You then need to run

npm prod

on your dev machine and commit both app.js and app.css to git and then it should work fine, no need to run npm prod on your production server.

Toby Allen
  • 10,997
  • 11
  • 73
  • 124
0

First, npm run dev should only be used for development. You should not push those files to production. It can be really slow, but it provides mayn development features like source maps, hot module replacement or debugging tools. The focus is on providing a convenient and efficient development experience rather than optimizing for performance.

The command npm run prod will compress your js/css files, remove comments, and exclude development-specific features or config.

On local development you need to install all dependencies like this:

npm install
npm run dev

When working with Vue I usually call npm run hot instead of npm run dev so changes take effect without the need to refresh the page.

What most recommend here is to call

npm run prod

and then add those files to git and move to production server.

While this works, it will be messy because git control always shows you a lot of changed files in your public directory when you run npm run dev although these changes should not be commited. Its also a risk that you accidentally commit dev files instead of prod files. Also its a pain for the developer to run npm run prod every time he changes in the fron-end before the commit.

Thus, I prefer to gitignore my public directory, meaning I don't track those files with git at all. Instead, I run npm install --production and npm run prod to scaffold all files on my CI to production. You should make sure though, that you have a zero downtime deploy script, as the process of installing production js/css may take time if you have to install npm dependecies (see https://deployer.org/). The folder node_modules can be removed after npm run prod is finished.

Adam
  • 25,960
  • 22
  • 158
  • 247