Integrate Webpack in your Symfony application with Webpack Encore

webpack + symfony

First of all, I want to mention that this is my first article in English. I’m francophone (from Benin), so be indulgent for typos! 🙄

« Symfony is a set of PHP Components, a Web Application framework, a Philosophy, and a Community — all working together in harmony. » . This is my favourite PHP Framework because Symfony provide lot of components like bundles and Symfony community is a great one!

Asset Management in Symfony is handled with the PHP based library Assetic. Sensiolabs, Symfony’s creator introduced Encore, new asset management tools which use Webpack. So what is Webpack?

Webpack is a module bundler. Webpack takes all our javascript, html, css or other files and groups them in one or more modules which you can provide to the client. According to @TheLarkInn’s article, Webpack provide:

• A better build caching;
• Better TypeScript experience
• ES6+
• Improve User Experience
• Live developement server
• And more stuff

Okay, let’s code !

“Two books on a desk near a MacBook with lines of code on its screen” by Émile Perron on Unsplash

Let’s scaffolding new project!

$ symfony new symfony-webpack
$ cd symfony-webpack

Symfony was successfully installed and you can use GIT for versionning tools. Now, we’re going to start your symfony development server.

$ php bin/console server:start

Now open your browser on http://127.0.0.1:8000.

To work with Webpack, you need to install NodeJS and Yarn Package Manager.

Then, install Encore into your project with Yarn with:

$ yarn add @symfony/webpack-encore --dev
$ yarn add sass-loader node-sass --dev

😌 Now, open your project with your favourite editor or EDI.

Let’s create a folder symfony-webpack/web/assets. It will contain all our resources (javascript, sass, css, images). Let’s create our webpack configuration file (symfony-webpack / webpack.config.js).

Compile your resource files with the command:

.$ /node_modules/.bin/encore dev

You will get a nice webpack message: DONE Compiled successfully in … ms. But as the above command is a bit long to type add scripts in our package.json file

{
  "devDependencies": {
    "@symfony/webpack-encore": "^0.8.0",
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6"
  },
  "scripts":{
    "dev": "./node_modules/.bin/encore dev"
  }
}

You can now compile your files with the command:

$ npm run dev

We’ll add an option to recompile our resources automatically when they’re changed.

{
  "devDependencies": {
    "@symfony/webpack-encore": "^0.8.0",
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6"
  },
  "scripts":{
    "dev": "./node_modules/.bin/encore dev --watch"
  }
}

Voila! You can harness the power of webpack in your Symfony project. Just insert the links to the available resource files in the symfony-webpack/web/build folder.
I created a small application that uses Webpack Encore and redirectjs library available on my github repository.

Thank you 🙇