A fixture to improve Webpack-Encore with hot reload assets files : css, scss & js, for the ease of local development. I made a server in order to work alongside independtly with Webpack-Encore by ensuring asset hot reloading. I wanted to host this repository as a contrib recipe. This recipe is working only with Symfony v4.0 or greater.
- It assumes that you've just installed a new Symfony project
composer create-project symfony/skeleton my_project
OR
symfony new --full my_project
- First of all, installing webpack encore is required. ( From the documentation )
composer require symfony/webpack-encore-bundle
yarn install
- Install the package via composer
composer require sachaamm/encoreHotAssetReloader
- Install server dependencies
cd server/ && yarn install
- Launch webpack encore in watch mode ( at the ⌂ home folder of your project )
yarn watch
- You need to configure assets entries that you are watching in server/encoreHar.js
...
// Define your assets entries. It relies on your webpack config. I just left the default app.js & app.css files for simplification purposes
let transpiledEntries = [
{ entry:"/assets/js/app.js" , transpiled:"/app.js" },
{ entry:"/assets/css/app.css" , transpiled:"/app.css" }
];
...
-
You need to edit your webpack.config.js file, located in your project ⌂ home folder. A ready-to-use sample config of is included in server/webpack.sample.config.js folder. Replace ./webpack.config.js content by ./server/webpack.sample.config.js content
-
Launch encoreHotAssetReloader. By default, it is running on port 8081
cd server/ && node encoreHar.js
- This is how looks like my base.html.twig file. I followed instructions for setting up webpack encore from here. Notice that Jquery is required for Encore HAR
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
{% block title %}Welcome!
{% endblock %}
</title>
{% block stylesheets %}
{{ encore_entry_link_tags('app') }}
{% endblock %}
</head>
<body>
{% block javascripts %}
{{ encore_entry_script_tags('app') }}
{% endblock %}
{% block body %}
<script src="/encoreHAR/encoreHARJquery/jquery-2.2.4.min.js" ></script>
{% endblock %}
</body>
</html>
- Launch symfony Web server ( at the ⌂ home folder of your project )
php bin/console server:run
- Now, go to http://localhost:8000/encore/hot/asset/reloader/example and you will get an asset hot reload example. You can try to edit /assets/app.css or /assets/app.js file to see the hot reload process. The hot reload process is happening by including "ehar/ehar.html.twig"
{% extends 'base.html.twig' %}
{% block title %}Hello HelloController!
{% endblock %}
{% block body %}
{% include "ehar/ehar.html.twig" %} {# Use this include to add the asset hot reloading in your templates ! #}
TODO : Install without Encore