CODEWITHSUNDEEP
vue.jswebpack
vir us
vir us

Reputation: 10715

Vuejs + webpack - build for production but deploy to localhost

Trying to figure out how can I create a production build with webpack but first run it locally as a last test before deploying it to the server.

I was thinking of creating another command something like npm run build_local for that purpose but can't quite figure out how to do that.

I can see the following in the root package.json and I was thinking of somehow combining dev + build but can't figure out how to do that (or using config otherwise):

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
  },

Any advice on how can I run a production build in localhost with something like npm run build_local command?

EDIT

What I've tried so far is to run (manually) http-server ./dist which seem to run the folder on localhost, but the result in fact deviates from production (and dev) behavior - in my case it first renders everything as expected but as long as I press refresh, it returns 404 not found which is unexpected (on dev and server deployed versions it still renders the login page in this case):

for example if I open localhost:8080, vue redirects me to localhost:8080/login which is expected and works fine. On refresh it gives 404 though.

Ideally I'd expect it to work at least in the same way as dev build on localhost.

Any ideas?

Upvotes: 1

Views: 2014

Answers (1)

vir us
vir us

Reputation: 10715

So it was as simple as combining the dev command and providing prod config to it under the root package.json:

    "build_local": "webpack-dev-server --inline --progress --config build/webpack.prod.conf.js"
    //

Or in the package.json:

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
    "build_local": "webpack-dev-server --inline --progress --config build/webpack.prod.conf.js"
  }

Now I can do npm run build_local which runs production build on localhost

Note: as per this github thread and this doc reference to prevent 404 on refresh also add the following to your webpack.prod.conf.js (anywhere in the file, but for reference you can paste it just before plugins)

devServer: {
    contentBase: path.join(__dirname, 'dist'),
    historyApiFallback: true, //this line is requried
    compress: true,
    port: 9000
},

You can now check your production build under the localhost:9000

If anyone knows about any drawbacks give me a comment or post the corrected answer

Upvotes: 1

Related Questions