New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

dev-server usage within vagrant #126

Closed
scuben opened this Issue Aug 1, 2017 · 2 comments

Comments

Projects
None yet
3 participants
@scuben
Copy link

scuben commented Aug 1, 2017

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:

fonts
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

This comment has been minimized.

Copy link

loceric commented Aug 2, 2017

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

This comment has been minimized.

Copy link
Member

weaverryan commented Aug 5, 2017

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment