Webpack-encore: dev-server usage within vagrant

[scuben]

I have troubles getting dev-server command working. While production and dev arguments work like expected and the assets being build correctly I do have troubles with dev-server.

My setup is a vagrant machine with virtualbox. I can access the vm by ip 172.16.23.10 or hostname (e.g. website.company.dev). So far, so good! Problem arises when I try to use dev-server within my vm (not on my local machine!). Here are my steps I already tried to make it working:

1. run node_modules/.bin/encore dev-server. The output is:
   Running webpack-dev-server ...
   Content not from webpack is served from /vagrant
   404s will fallback to /index.html
   DONE Compiled successfully in 12873ms

Due tu the fact that the server within my vm is binding itself to 127.0.0.1:8080 I cant access it from my local machine. next try:

1. run node_modules/.bin/encore dev-server --host 0.0.0.0. Same output as in my first try. But now the server within my vm is bind to 0.0.0.0:8080.

Now I can access the server from my local machine using my browser to request http://website.company.dev:8080. Now I get a Invalid Host header Response. next try:

1. run node_modules/.bin/encore dev-server --host 0.0.0.0 --public website.company.dev. Same output as in my first try. I could als have used --disable-host-check option but I like to just set the hostname right. Browsing the site with http://website.company.dev:8080 now gives me the error I cant get around:

Cannot GET /

According to my nginx access logfile it doesn't even hit the underlying webserver at all to serve my site (not the assets). Accessing http://website.company.dev:8080/webpack-dev-server is showing me by build files:

glyphicons-halflings-regular.eot
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
glyphicons-halflings-regular.woff2
images
glyphicons-halflings-regular.svg
app.js
app (magic html for app.js) (webpack-dev-server)
main.css
manifest.json

What else ist there to say? I dont know why its not working. I'll post my config and dependency files to give you an overview on how I use encore. Any help or hints are much appreciated!

package.json

{
  "devDependencies": {
    "@symfony/webpack-encore": "^0.12.0",
    "bootstrap-sass": "^3.3.7",
    "jquery": "^3.2.1",
    "node-sass": "^4.5.3",
    "postcss-loader": "^2.0.6",
    "sass-loader": "^6.0.6"
  },
  "browserslist": [
    "last 2 version"
  ],
  "scripts": {
    "build": "webpack"
  }
}

webpack.config.js

var Encore = require('@symfony/webpack-encore');
Encore
    .setOutputPath('frontend/build/')
    .setPublicPath('/frontend/build')
    .cleanupOutputBeforeBuild()
    .addEntry('app', './frontend/assets/js/app.js')
    .addStyleEntry('main', './frontend/assets/scss/main.scss')
    .enableSassLoader(function(sassOptions) {}, {
        resolve_url_loader: false
    })
    .enablePostCssLoader()
    .autoProvidejQuery()
    .enableSourceMaps(!Encore.isProduction())
;

// export the final configuration
var config = Encore.getWebpackConfig();
config.watchOptions = { poll: true, ignored: /node_modules/ };
module.exports = config;

Btw: When running dev-server with host and public option the variable config.devServer holds this content:

devServer:
   { contentBase: '/vagrant',
     publicPath: 'http://0.0.0.0:8080/frontend/build/',
     headers: { 'Access-Control-Allow-Origin': '*' },
     hot: false,
     quiet: true,
     compress: true,
     historyApiFallback: true,
     watchOptions: { ignored: /node_modules/ },
     https: undefined }

As you can see from the webpack.config.js I use an app which has its front controller (index.php) in the project root (not in /web like symfony has). My assets are in /frontend/assets/(css|js) and the build files should go to /frontend/build/.

Big thank you for everyone kept reeding until the very end of this (long) issue I encounter! 🙏

[loceric]

Hi @scuben,

I'm not quite familiar with vagrant. But if you get the Cannot GET error when trying to access http://website.company.dev:8080, maybe you can try the following:

1. put an index.html in your build path, and see if you can access it at http://website.company.dev:8080;
2. if you can, remove that index.html, and add a rewrites option to your devServer.historyApiFallback.

Good luck :)

[weaverryan]

Hey @scuben!

Nice job debugging. I think you're closer than you think :). Basically, even when using the dev-server, you should keep accessing your site via http://website.company.dev (i.e. port 80). Only your assets should point to http://website.company.dev:8080. If you're using Symfony JSON manifest strategy, then that should all happen automatically). If you're not, you'll need to somehow rewrite all your link/script tags to the dev server (the manifest.json file will have the dev server URL in its values while its running).

In other words, I think the dev-server IS working properly. You see a Cannot GET / because there's no index.html file in your web directory. But, try something like http://website.company.dev:8080/favicon.ico and you should see that the dev server is serving your assets. Or, try http://website.company.dev:8080/frontend/build/app.js to see one of your built assets.

This IS a bit different than you might read in the docs. A lot of people are creating static index.html files with webpack, so the docs seem to suggest that you should just go to http://website.company.dev:8080 and it will work. But, if your backend is PHP, then you still need to point at your Nginx web server. Even if you tried going to http://website.company.dev:8080/index.php, it would download it, not process it.

I'm going to add a note in the doc about the setup - the options you discovered should be noted there.

If it's still not working, let us know!

Cheers!