title: Trying to run npm run serve (vue-cli app) inside Laravel Homestead (VirtualBox + Vagrant)
body: <p>I have a <code>vue-cli</code> app, trying to run it inside Laravel Homestead.</p>
  
  <p><strong>What I have</strong>:</p>
  
  <p>My <code>hosts</code> on host machine:</p>
  
  <pre><code>127.0.0.1   localhost
  127.0.1.1   PC
  192.168.2.10 myvueapp.local
  </code></pre>
  
  <p><code>hosts</code> inside VM:</p>
  
  <pre><code>127.0.0.1       localhost
  127.0.0.1       myvueapp.local
  127.0.1.1       homestead       homestead
  </code></pre>
  
  <p>Vagrant version: 2.2.4, Homestead: v8.3.2, <code>vue --version</code>: 3.7.0</p>
  
  <p><code>npm run serve</code> executes without problems inside VM, but I get</p>
  
  <blockquote>
    <p>We're sorry but myvueapp doesn't work properly without JavaScript
    enabled. Please enable it to continue.</p>
  </blockquote>
  
  <p>as a response body from request:</p>
  
  <pre><code>//response headers
  Request URL: https://myvueapp.local/
  Request Method: GET
  Status Code: 200 
  Remote Address: 192.168.2.10:443
  Referrer Policy: no-referrer-when-downgrade
  </code></pre>
  
  <p>Browser page is blank.</p>
  
  <p>Also there is one <code>favicon</code> request:</p>
  
  <pre><code>Request URL: https://myvueapp.local/%3C%=%20BASE_URL%20%%3Efavicon.ico
  Request Method: GET
  Status Code: 400 Bad Request
  Remote Address: 192.168.2.10:443
  </code></pre>
  
  <p>Somehow <code>BASE_URL</code> doesn't compile in <code>index.html</code>:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;link rel="icon" href="&lt;%= BASE_URL %&gt;favicon.ico"&gt;
  </code></pre>
  
  <p>My <code>vue.config.js</code>:</p>
  
  <pre class="lang-js prettyprint-override"><code>module.exports = {
    devServer: {
      host: 'myvueapp.local',
      https: true
    }
  }
  </code></pre>
  
  <p><code>Homestead.yaml</code>:</p>
  
  <pre><code>ip: "192.168.2.10"
  #...
  sites:
      - map: myvueapp.local
        to: /home/vagrant/path/to/myvueapp.local/public
  #...
  ports:
      - send: 8080
        to: 80
  </code></pre>
  
  <p>Port, where Vue is served (inside VM, 8080) is listening.</p>
  
  <pre><code>lsof -i :8080
  COMMAND  PID    USER   FD   TYPE DEVICE SIZE/OFF NODE NAME
  node    3022 vagrant   22u  IPv4  31440      0t0  TCP localhost:http-alt (LISTEN)
  </code></pre>
  
  <p>Nginx config:</p>
  
  <pre><code>server {
      listen 80;
      listen 443 ssl http2;
      server_name .myvueapp.local;
      root "/path/to/myvueapp.local/public";
  
      index index.html index.htm index.php;
  
      charset utf-8;
  
  
  
      location / {
          try_files $uri $uri/ /index.php?$query_string;
  
      }
  </code></pre>
  
  <p>P. S. It runs ok when I'm serving it from my host machine.</p>
  
  <p><strong>What I've tried</strong>:</p>
  
  <p><a href="https://stackoverflow.com/a/33467145/9506712">change <code>host</code></a></p>
  
  <pre class="lang-js prettyprint-override"><code>module.exports = {
    devServer: {
      host: '0.0.0.0', //&lt;-- here
      https: true
    }
  }
  </code></pre>
  
  <p>, didn't helped.</p>
  
  <hr>
  
  <h3>Edit #1</h3>
  
  <p>I moved a bit further, this Nginx config now allowes me to access Vue app, served inside VM, using host machine:</p>
  
  <pre><code>   location / {
          try_files $uri $uri/ /index.html =404;
          proxy_pass http://localhost:8080; #&lt;-- this might be the output from npm run serve, without last slash
          #  App running at:
          #  - Local:   http://localhost:8080/
          #             ^^^^^^^^^^^^^^^^^^^^^
     }
  </code></pre>
  
  <p>But there is still a problem: hot-reload doesn't work.</p>