Symfony and webpack for live reloading PHP applications

In this article, I’m going to explain to you, how you can use webpack along with the Symfony framework to create a live reloading web app with SASS and ESNext support.

What is the goal?

In the end, you will have a Symfony project, be able to use SASS and ESNext and see script and style changes directly in the browser due to the power of webpack-dev-server.

What do you need?

1. Basic knowledge of the Symfony framework
2. The Symfony installer or composer
3. PHP installed on your computer or a VM having it installed
4. NodeJS + npm

1. Creating the Symfony project

The first step is to create a basic Symfony project. I am using version 2.8.* of Symfony, but this guide is likely to work with other versions.

Go ahead and run the following command, to setup a new project.

$ symfony new demoproject 2.8

2. Setting up webpack

Webpack along with its dev-server with service our script files and style sheets. Since we are aiming to use SASS for styling and ESNext for scripting, there are quite a few node packages to install.

Run the following commands in your project’s root directory to get all the packages you need.

$ npm init -y
$ npm i -D webpack webpack-dev-server babel-core babel-loader babel-preset-es2015 sass-loader css-loader style-loader node-sass extract-text-webpack-plugin

Having these packages installed, we need to set up the webpack and babel config files. So go ahead and create a the files .babelrc and webpack.config.babel.js in the root directory. The configs should look like this:

The .babelrc is needed to tell the babel transpiler which modules it should use to transpile the code to ECMAScript 5.

Note
You can add more presets in order to use additional language features, like async/await or decorators. Visit http://babeljs.io for more information.

The webpack config is meant to be used with webpack 1.x. Since version 2 of webpack is on the verge of being released, you should either make sure, you install version 1.x or even better: migrate the config to 2.x when it is released.

Since it would be too much if I explained the entire config, here are some things to pay attention to:

• The entry point script is <project_root>/web/js/index.js
• The bundled files are served from <project_root>/web/assets
• The dev-server is accessible via http://localhost:9000/
• The stylesheets are extracted from the script bundle and hosted alongside the javascript

3. Creating scripts and styles

Since our environment is ready, we can start creating script and style files for our application.

First create the stylesheet <project_root>/web/scss/main.scss and put some basic styles into it, e.g. body { background: red; }

Next create the file <project_root>/web/js/index.js and put the following content into it.

The script only loads up the stylesheet and outputs a basic info message.

Now you can run your webpack-dev-server by typing webpack-dev-server into the console and access your dev server on localhost:9000/assets/bundle.js to see your script or localhost:9000/assets/style.css to view the stylesheet.

4. Wiring things up with Symfony

With your dev server up and running, we can now use the served files in the Symfony project.

The first file you need to edit is the <project_root>/app/config/config.yml

Make your it contains the following lines to tell Symfony where to look for assets. In our case, it will be our dev server.

framework:
  templating:
    assets_base_url: "http://localhost:9000"

Next, open up <project_root>/app/Resources/views/base.html.twig to load the scripts and styles.

In the head-section, add the stylesheet:

<link rel="stylesheet" href="{{ asset('assets/style.css') }}"/>

The script files need to go to the end of the body-section to load the hot reloading script from webpack-dev-server as well as the bundled javascript.

<script src="{{ asset('webpack-dev-server.js') }}"></script>
<script src="{{ asset('assets/bundle.js') }}"></script>

That’s it! Let’s move on to the best part.

5. Running the project

Make sure the webpack server is running, then run your Symfony project by typing php app/console server:run in the console.

Your server should start and be available at localhost:8000.

Open the URL in your favorite web browser and open the console. You should see a notification from webpack, that it is waiting for changes made to scripts or styles as well as an info message from the console that tells you the project works.

Making any changes to the js and scss files will cause webpack to rebuild and the web browser to automatically refresh the page.

Let me know, if there are any questions in the comments below and have a good time with your new, productive environment!

RH