Understanding Package.Json

Below is dependencies in package.json file on my development server for a project. So basically these generates a package-lock.json which I have to commit on production server and which will install same dependencies on it.

Will the dependencies mentioned in "devDependencies" be included on production server? I guess no. If so then it means before I move project to production server I have to move/copy dependencies from "devDependencies" to "dependencies" and update the package-lock.json.

Please correct If my understanding is not correct and If there is any reference article which tells the correct procedure or steps for using the node packages from development to production.

 "devDependencies": {
        "axios": "^0.18.1",
        "cross-env": "^5.1",
        "laravel-mix": "^4.0.15",
        "lodash": "^4.17.15",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue-template-compiler": "^2.6.10"
    },
 "dependencies": {
        "laravel-echo": "^1.6.1",
        "pusher-js": "^5.0.2",
        "vue": "^2.6.10"
    }

azurinspire

6 years ago

Level 12

You will find plenty of answers from Laracasts discussion if you search with devDependencies. If you use Laravel Mix or Webpack in other way, it doesn't matter, all dependencies your Javascript is using is going to be in the bundle file provided to browser. Some developers like to separate dependencies which really are only for development stages, like webpack loaders, to devDependencies and and others put all in devDependencies because in the case of Webpack they are used in development only, in production there is only bundle files.

mihirpatel83

6 years ago

Level 1

Thanks for reverting. Using webpack to create bundle will even result in not installing any of the NPM packages on the server. That I understand.

But just in case, Should I choose not to use webpack then I will have to use package-lock.json to install required packages on server. But to create that file on my development server, I will first have to move all required dependencies under "dependencies" then do "npm update" which will update package-lock.json and then I can use this file on production server. I think this is the way these work but just wanted to be sure of.

audunru

6 years ago

Level 4

The «Laravel way» is to build for production locally, then commit the built JS and CSS, push and deploy to production. I’m generalizing here...

You should however commit your package-lock so that any others use the same versions of npm packages as you.

But the presence of this file does not mean that Laravel Mix runs on deploy magically. To do that you would have to add that step to your deploy, and typically you wouldn’t do that with Laravel.

Now, if we were talking about deploying to Heroku, Netlify or some serverless platform, things would be different.

If you ARE building your assets on every deploy, then I suggest you move dev dependencies to dependencies, as from the looks of it you will need all of them to build your app.

Sinnbeck

6 years ago

Level 102

Followup to @audunru

We build on production server. We simple have a folder for each build named by timestamp.

When deploying we create a new folder and build in there. Once everything is built, we symlink the /current dir to the newly created folder. This idea has been borrowed from Spatie. Take a look at their envoy scripts :)

Eg: https://github.com/spatie/freek.dev/blob/master/Envoy.blade.php

mihirpatel83

6 years ago

Level 1

@audunru - Thank you for clarifying.... I kinda get it now which is Laravel way and which is not. I think I will follow using webpack.

@sinnbeck - Didn't knew about Envoy. Seems promising. Thanks for drawing attention towards it.

Please or to participate in this conversation.