Run Webpack + Vue in a Local VirtualServer

Question

Operating System: Mac OSX High Sierra
Node Version: v10.15.0
NPM Version: 6.13.6
webpack Version:
webpack-dev-server Version:
Browser: Chrome

my virtual server is http://lab.local this point to xampp/htdocs/lab

i have the project in xampp/htdocs/lab/vue/

when i tried to run npm run dev, this is my log

    test-vue-project@1.0.0 dev /Applications/XAMPP/xamppfiles/htdocs/lab/vue/
    cross-env NODE_ENV=development webpack-dev-server --open --hot

{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
Hash: 263046f8f5530a383160
Version: webpack 3.12.0
Time: 2140ms
Asset Size Chunks Chunk Names
build.js 1.9 MB 0 [emitted] [big] main
[1] (webpack)/hot/log.js 1.04 kB {0} [built]
[4] (webpack)/hot/emitter.js 77 bytes {0} [built]
[5] ./node_modules/vue/dist/vue.esm.js 326 kB {0} [built]
[9] multi (webpack)-dev-server/client?http://lab.local:80 webpack/hot/dev-server ./src/main.js 52 bytes {0} [built]
[10] (webpack)-dev-server/client?http://lab.local:80 7.93 kB {0} [built]
[11] ./node_modules/url/url.js 23.3 kB {0} [built]
[18] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
[20] ./node_modules/loglevel/lib/loglevel.js 8.56 kB {0} [built]
[21] (webpack)-dev-server/client/socket.js 1.08 kB {0} [built]
[23] (webpack)-dev-server/client/overlay.js 3.67 kB {0} [built]
[28] (webpack)/hot nonrecursive ^./log$ 170 bytes {0} [built]
[30] (webpack)/hot/dev-server.js 1.61 kB {0} [built]
[31] (webpack)/hot/log-apply-result.js 1.31 kB {0} [built]
[32] ./src/main.js 134 bytes {0} [built]
[35] ./src/App.vue 1.81 kB {0} [built]
+ 27 hidden modules
webpack: Compiled successfully.
events.js:167
throw er; // Unhandled 'error' event
^

Error: listen EACCES: permission denied 127.0.0.1:80
at Server.setupListenHandle [as _listen2] (net.js:1273:19)
at listenInCluster (net.js:1338:12)
at GetAddrInfoReqWrap.doListen [as callback] (net.js:1471:7)
at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:62:10)
Emitted 'error' event at:
at emitErrorNT (net.js:1317:8)
at process._tickCallback (internal/process/next_tick.js:63:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! test-vue-project@1.0.0 dev: cross-env NODE_ENV=development webpack-dev-server --open --hot
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the test-vue-project@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
My-iMac:lesson22 my-user $ npm run dev

i have this in webpack.config.js

devServer: {
        contentBase: 'dist',
        host: 'lab.local',
        port: 80,
        overlay:{
            warnings: true,
            errors: true
        },
        proxy: {
            '/vue': {
                target: 'http://lab.local',
                pathRewrite: {'^/vue/' : ''}
            }
        },
    },

any help ?

how i can configure webpack in my localhost (virtual server http://lab.local) for work ?

i want execute npm run build and npm run dev and this allow to browser show http://lab.local/vue/ optional (port: 8080)

you specified port 80. To run on port 80, you would have to run it with administrator privileges (aka `sudo`). That's why you get a permission denied on :80. Try to run it on :8080 in web pack.config.js — cello, Jan 10 '20 at 20:32
if you have xampp already, why are you using webpack-dev-server? just run the webpack cli in watch mode and serve the assets from xampp — Jhecht, Jan 10 '20 at 21:21

Ahmet Zeybek · Accepted Answer · 2020-01-10T21:18:25.893

Open /Applications/XAMPP/xamppfiles/etc/httpd.conf file in any editor and look for the following lines.

# Virtual hosts
# Include /Applications/XAMPP/etc/extra/httpd-vhosts.conf

Remove # from second line to enable virtual host
Open /Applications/XAMPP/xamppfiles/etc/extra/httpd-vhosts.conf file, remove everything and write below code.

<VirtualHost *:8080>    
  ServerName myweb.site
  ServerAlias myweb.site
  <Location />
    ProxyPass "/" "http://localhost:3000/"
    ProxyPassReverse "/" "http://localhost:3000/"
  </Location>
</VirtualHost>

Open /etc/hosts and add 127.0.0.1 myweb.site to bottom
Restart Apache Server from XAMPP Control Panel

myweb.site should be same in both file, this will be your URL for your Vue app and http://localhost:3000 is your app url, port should be same with port of your development server

Open any browser and enter http://localhost:8080 or http://myweb.site

yes! thank you @ahmet-zeybek , this is the solution. i created a new virtual server ! — apositivo, Jan 16 '20 at 17:36

Run Webpack + Vue in a Local VirtualServer

1 Answers1