No HMR on Symfony/Vuejs, use LiveReaload

andrelec1 commented 4 years ago

I don't know if this is the best place to tell this ... but With the Symfony => Inertia => vuejs we loose the HMR ( you can't use the webpack-encore server because you need the symfony render ... )

Today using a HMR is obvious for dev, but with this stack you can't ... So after some researche we can use a old cousin of HMR: LiveReload

3 Step to get ready :

npm install --save-dev webpack-livereload-plugin

in webpack.config.js add :

    if (!Encore.isProduction()) {
        Encore.addPlugin(new LiveReloadPlugin());
    }

in your main twig template add :

    {% if app.debug %}
        <script src="http://localhost:35729/livereload.js"></script>
    {% endif %}

rompetomp commented 4 years ago

Hmm, for me, the encore dev-server just works, I don't need anything special EDIT: This is my webpack.config.js:

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

if (!Encore.isRuntimeEnvironmentConfigured()) {
  Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev')
}

Encore
  .setOutputPath('public/build/')
  .setPublicPath('/build')
  .enableVueLoader(() => {}, {
    runtimeCompilerBuild: true
  })
  .addEntry('app', './assets/app.js')
  .splitEntryChunks()
  .cleanupOutputBeforeBuild()
  .enableSourceMaps(!Encore.isProduction())
  .enableVersioning(Encore.isProduction())
  .disableSingleRuntimeChunk()
  .configureBabelPresetEnv((config) => {
    config.useBuiltIns = 'usage'
    config.corejs = 3
  })
  .enableTypeScriptLoader()

module.exports = Encore.getWebpackConfig()

And this is my app.html.twig:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{% block title %}Welcome!{% endblock %}</title>
    {% block stylesheets %}
        {{ encore_entry_link_tags('app') }}
    {% endblock %}
</head>
<body>
{{ inertia(page) }}
{% block javascripts %}
    {{ encore_entry_script_tags('app') }}
{% endblock %}
</body>
</html>

andrelec1 commented 4 years ago

So i miss something ...

How vuejs can be serve by webpack encore if the data ( and template html ) is render in twig serve by my apache ? Webpack encore have php in it and i miss config something ?

rompetomp commented 4 years ago

Maybe this is what you're looking for? https://symfony.com/doc/current/frontend/encore/dev-server.html

andrelec1 commented 4 years ago

Ok , i have the same config as you ... but on my localhost:8080 i have a 'cannot get /' ...

So this my thinking ( tell me if i'm wrong ) :

webpack-encore transpile vuejs source into a js file ... webpack-encore serveur my '/public/' folder .... I have a index.php and .htaccess in my '/public/'... How Webpack can interprete my index.php ?

rompetomp commented 4 years ago

I think you're making it harder than it should. You don't need to go to localhost:8080. Just make sure the encore_entry_script_tags('app') is in your twig file, and then it should automatically include the javascript files. Just go to the endpoint defined in your Symfony setup

andrelec1 commented 4 years ago

My base.html.twig

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
        <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
        {% if app.debug %}
            <script src="http://localhost:35729/livereload.js"></script>
        {% endif %}
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}
            {{ encore_entry_link_tags('app') }}
        {% endblock %}
    </head>
    <body>
        {% block body %}
            {{ inertia(page) }}
        {% endblock %}
        {% block javascripts %}
            {{ encore_entry_script_tags('app') }}
        {% endblock %}
    </body>
</html>

rompetomp commented 4 years ago

Like I said, you don't need to go to localhost:8080, that's the dev server, you need to go to your symfony project's endpoint, whichever that is

andrelec1 commented 4 years ago

Hoo god ... i just understand why noting work ...

I have a silence CORS error -_-" ....

encore dev-server --disable-host-check --hot --watch and magic append :)

rompetomp / inertia-bundle

No HMR on Symfony/Vuejs, use LiveReaload #19