Search code examples
vue.jswebpackdevserver

Run Webpack + Vue in a Local VirtualServer

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

    [email protected] 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! [email protected] dev: cross-env NODE_ENV=development webpack-dev-server --open --hot
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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)

Solution
    1. 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

    1. Remove # from second line to enable virtual host

    2. 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>
    1. Open /etc/hosts and add 127.0.0.1 myweb.site to bottom
    2. 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

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