npm run build working but npm run dev is not about webpack

[billcolumbia]

The other thing is I'm not sure how the dev server works. It emits these new files but where do they go? They seem to be some runtime reference or something and not actually saved to the file system. Maybe the browser isn't connecting to webpack to get those modified sources?

[yyx990803]

In dev mode, no file is written to disk, everything is served directly from memory by the dev server. You should use the dev server and proxy requests to your PHP app during development.

[billcolumbia]

Ok cool that's what seemed like was happening. Here's the config.js - I am proxying all requests to it as far as I can tell and have tested:

App Structure:

- vue
  - build
  - src
  - test
  - config.js
- View
  - Layouts
    - default-source.ctp
    - default.ctp
- webroot

// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')

module.exports = {
  build: {
    index: path.resolve(__dirname, '../View/Layouts/default.ctp'),
    source: path.resolve(__dirname, '../View/Layouts/default-source.ctp'),
    assetsRoot: path.resolve(__dirname, '../webroot'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    productionSourceMap: true
  },
  dev: {
    port: 3000,
    proxyTable: {
      '/': {
        target: 'http://directory.dev',
        changeOrigin: true
      }
    }
  }
}

[yyx990803]

You should not be proxying everything - the proxys have highest priority and this would render your dev server useless. Only proxy API requests.

[billcolumbia]

Oh alright. I just get the index.html file in the vue directory when I hit localhost if I just proxy the API. So in this case do I not dev with localhost?

[yyx990803]

You do... dev server serves your frontend (index.html and static assets) at localhost, and it proxies API requests to your PHP app (which can be remote or local)

[billcolumbia]

Ok so the issue I'm having then is the default.ctp has PHP in it that needs to be rendered, so the dev server can't render that. But this is the same as how Laravel or Rails would do it. So that's why I get confused, as I have followed the directions in http://vuejs-templates.github.io/webpack/backend.html but still get output with PHP tags - how does webpack dev server account for the PHP needing to be rendered on the app? I've now set my config like this:

// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')

module.exports = {
  build: {
    index: path.resolve(__dirname, '../View/Layouts/default.ctp'),
    assetsRoot: path.resolve(__dirname, '../webroot'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    productionSourceMap: true
  },
  dev: {
    port: 3000,
    proxyTable: {
      '/api': {
        target: 'http://directory.dev',
        changeOrigin: true
      }
    }
  }
}

[yyx990803]

The config assumes your HTML file is pure. In your case you may need to instead proxy all static assets to the dev server on your PHP end!

[billcolumbia]

Ah ha crazy stuff marrying an old back end to a modern build system. Looking into this. Thanks so much :) I assumed it might be an overlook in docs - sorry for the bother.