Comments (9)
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?
from webpack.
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.
from webpack.
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
}
}
}
}
from webpack.
You should not be proxying everything - the proxys have highest priority and this would render your dev server useless. Only proxy API requests.
from webpack.
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?
from webpack.
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)
from webpack.
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
}
}
}
}
from webpack.
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!
from webpack.
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.
from webpack.
Related Issues (20)
- r 403 forbidden
- Actually, you could overwrite `publicPath` in `ExtractTextPlugin` as you want. HOT 1
- HMR with express server with NodeJS API
- When load image via binding attribute, scss error occure.
- The vue project is configured with babel-polyfill but still displays a blank page in ie
- Updated Webpack 2 to 4 and faced issues while building for production
- webpack test fails because of import export error!!!
- Vuetify : "Expected newline." loading vuetify sass files HOT 1
- Laravel Vue templates won't update on shared hosting!
- npm err unexpected end of json input while parsing near '... RE----\r\n"}},"1.2.0' HOT 1
- how i solve this HOT 2
- Build error related to "@import" of styles HOT 1
- Can`t use prod.env.js variable in proxy config
- Error: Can't resolve '@fontawesone/fontawesone-free/css/all.css' in 'D:\xamppp\htdocs\laravel\laravel\VeuDemo\login1\login1\src\plugins'
- set default assetsPublicPath to './' instead of '/'
- npm ERR! Unexpected end of JSON input while parsing near '.../registry.npmjs.org/v'
- Using VueJs in .Net MVC. everything compiles fine but i am getting an empty view
- > > I run this is the console of my navigator (Chrome), and no error message anymore :
- how to fix npm run build blank display with vue-cli 3.2.45
- Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker for scope ('.firebase-cloud-messaging-push-scope') with script ('firebase-messaging-sw.js'): A bad HTTP response code (404) was received when fetching the script. (messaging/failed-service-worker-registration) , normally run on the localhost but when I am uploading on filezilla then it show this error..
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from webpack.