any working sample of encore dev-server?

[Alymbek]

Hi, dear comrades!

dos someone successfully worked with encore dev-server?

I just try to use it, the web browser automatically open with this config, but always get error: Cannot GET /

webpack.config.js

my var Encore = require('@symfony/webpack-encore');

////////////////////////////////////////////////////////////////////////////////
Encore
  .setOutputPath('public/build/')
  .setPublicPath('/build')
  .cleanupOutputBeforeBuild()
  .addEntry('full', './assets/js/full.js')
  .enableLessLoader()
  .enableBuildNotifications()
  .enableSourceMaps(!Encore.isProduction())
  .enableVersioning(Encore.isProduction())
  .enableSingleRuntimeChunk()

  .configureFilenames({
    css: 'css/[name]-[hash:6].css',
    js: 'js/[name]-[hash:6].js'
  })


const fullConfig = Encore.getWebpackConfig();
fullConfig.name = 'full';
fullConfig.watchOptions = {
  poll: true,
  ignored: /node_modules/
};
fullConfig.devServer = {
  host: 'localhost',
  port: 8080,
  contentBase: ('/public/'),
  publicPath: 'localhost:8080/build/',
  watchContentBase: false,
  compress: true,
  open: true,
  disableHostCheck:true,
  hot: true,
  progress:true,
};

module.exports = fullConfig;

[Alymbek]

I have change contentBase to absolute path, in this case I get list of files inside the browser.
seems like index.php not running...

var path = require('path');

var Encore = require('@symfony/webpack-encore');

////////////////////////////////////////////////////////////////////////////////
Encore
  .setOutputPath('public/build/')
  .setPublicPath('/build')
  .cleanupOutputBeforeBuild()
  .addEntry('full', './assets/js/full.js')
  .enableLessLoader()
  .enableBuildNotifications()
  .enableSourceMaps(!Encore.isProduction())
  .enableVersioning(Encore.isProduction())
  // .splitEntryChunks()
  .enableSingleRuntimeChunk()
  // .setManifestKeyPrefix('full')

  .configureFilenames({
    css: 'css/[name]-[hash:6].css',
    js: 'js/[name]-[hash:6].js'
  })


const fullConfig = Encore.getWebpackConfig();
fullConfig.name = 'full';
fullConfig.watchOptions = {
  poll: true,
  ignored: /node_modules/
};
fullConfig.devServer = {
  host: '127.0.0.1',
  port: 8000,
  contentBase: path.join(__dirname, 'public/'),
  publicPath: 'localhost:8080/build/',
  watchContentBase: true,
  compress: true,
  open: true,
  disableHostCheck:true,
  hot: true,
  progress:true,
};

module.exports = fullConfig;

[Alymbek]

finally I find solution!

following config work, but not automatically reload after changing js or css files.
so, new issue: how to automatically reload page?

var path = require('path');

var Encore = require('@symfony/webpack-encore');

////////////////////////////////////////////////////////////////////////////////
Encore
  .setOutputPath('public/build/')
  .setPublicPath('/build')
  .cleanupOutputBeforeBuild()
  .addEntry('full', './assets/js/full.js')
  .enableLessLoader()
  .enableBuildNotifications()
  .enableSourceMaps(!Encore.isProduction())
  .enableVersioning(Encore.isProduction())
  .enableSingleRuntimeChunk()

  .configureFilenames({
    css: 'css/[name]-[hash:6].css',
    js: 'js/[name]-[hash:6].js'
  })


const fullConfig = Encore.getWebpackConfig();
fullConfig.name = 'full';
fullConfig.watchOptions = {
  poll: true,
  ignored: /node_modules/
};
fullConfig.devServer = {
  public: 'myhost.loc:80',
  allowedHosts: ['myhost.loc:80'],
  contentBase: path.join(__dirname, 'public/'),
  watchContentBase: true,
  compress: true,
  open: true,
  disableHostCheck: true,
  progress: true,
  watchOptions: {
    watch: true,
    poll: true
  }
};

module.exports = fullConfig;

ps. myhost.loc:80 configured as vhost

[Kocal]

Normally you don't have to have to configure the dev-server so much.
In fact, you don't even have to configure it to get it working (if you are not inside a virtual machine).

Given your Symfony app is running on http://localhost:8000.

First, make sure you can build your assets with yarn encore dev. Use your assets with encore_entry_script_tag() and encore_entry_link_tags() Twig functions, and open http://localhost:8000 to check if you have working assets.

Then run yarn encore dev-server --hot, your assets will be server on http://localhost:8080 (by default), but this is not the link you should access.
Stay on http://localhost:8000, open the console and refresh, and normally you will see some messages with [WDS] in them.

Then you can modify your assets, they will be re-built and be updated on your page without refreshing it.

Further reading: https://symfony.com/doc/current/frontend/encore/dev-server.html

[seyfer]

@Kocal I use encore_entry_script_tag() and encore_entry_link_tags() Twig functions from the bundle.
But I have multi build config.
when I do encore watch - all works
when I do encore dev-server --hot - I have an error that entrypoints.json not found.
Any ideas?

[Kocal]

Nope I don't have any ideas, I don't know how webpack-encore works internally.
Maybe wait for @weaverryan or @Lyrkan 🤷‍♂️

[weaverryan]

Hmm, so the physical entrypoints.json file DOES need to be written to the physical system, but I thought we had config to guarantee that. When you run encore dev-server --hot, do you not see a physical entrypoints.json file?

[Alymbek]

hi, dear @weaverryan !
yes, there are entrypoints.json file after running yarn encore dev-server.

now getting No route found for "GET /sockjs-node/info" (from "http://myhost.loc/") in ajax request in debug panel

[mareksuscak]

Yup, there's a bug! Just created a new project and set up webpack-encore by following the official guide and I ran into the same problem @Alymbek is describing — i.e. the dev server tries to connect to the symfony app host instead of the dev-server host.

Explicitly specifying the port fixes the issue:

$ yarn dev-server --port 8080

or 

$ yarn encore dev-server --port 8080

[Lyrkan]

@blachawk That's because you are using npm, not yarn, to run your scripts.

As I said in #673 (comment) you need to add another -- before custom arguments or they won't be passed to the script.

[blachawk]

@mareksuscak I have tried all of the following combinations below from my terminal:

npm run dev-server -- --port 8080
npm run dev-server -- --port 8080 --host symf.train04.wip
npm run dev-server -- --port 8000 --host symf.train04.wip

They all lead to the following error in my browser:

Yet, I can easily access http://symf.train04.wip directly from my browser to view my Symfony project.

[ajv-developer]

I got "Cannot GET /" while trying to reach the server through localhost. But when I let Symfony open the webpage with the command
symfony open:local
it opened on https://127.0.0.1:8000

[claytron5000]

I'm a little confused by this discussion. Is the intended behaviour of the encore dev-server to serve one part of the app, while the symfony-server serves the other?

[versedi]

I'm a little confused by this discussion. Is the intended behaviour of the encore dev-server to serve one part of the app, while the symfony-server serves the other?

@claytron5000 AFAIK yes. You need a web server (either simple php server, nginx or apache), dev-server only proxies the changes and triggers auto-reload. Dev-server has no capability of processing PHP code.

Edit: Gist with config that has auto-reload and is working: (you access the page via app.local:9001 which has to be setup on your server as app.local and has to be pointed in /etc/hosts to 127.0.0.1)

https://gist.github.com/versedi/6b216f2135a6d686601066e674752418

index.php is served from subdirectory public