Build apps with Symfony and Webpack
Easily integrate Webpack into your Symfony application with Symfony Encore.
What is it good for ?
As you know, when you are a fullstack devoloper you have to use many frontend packages in your projects. As the number of packages increases, it becomes more difficult to keep them together.
Symfony Encore is devoloped for make our jobe easier.
Why we should it?
Encore is made by Symfony and works beautifully in Symfony applications.
Encore is a simpler way to integrate Webpack into your application. It wraps Webpack, giving you a clean & powerful API for bundling JavaScript modules, pre-processing CSS & JS and compiling and minifying assets.
Lets install.
First make sure you install Node.js and Yarn package manager.
Then, install Encore into your project with Yarn:
yarn add @symfony/webpack-encore --devThis command creates(or modifies) a package.json file and download dependencies into a node_modulesdirectory.
Now we need to a create webpack.config.js
We need to require @symfony/webpack-encore first.
// webpack.config.js
var Encore = require('@symfony/webpack-encore');Imagine you have a simple project with one CSS and one JS, organized into an assets/ directory:
assets/js/main.jsassets/css/global.scss
Configuring Encore/Webpack
let edit our webpack.config.js
Encore
// directory where all compiled assets will be stored
.setOutputPath('web/build/')We have specified the path where the compiled files will be stored.
// what's the public path to this directory (relative to your project's document root dir)
.setPublicPath('/build')// empty the outputPath dir before each build
.cleanupOutputBeforeBuild()
now we need to put our assets fields.
// will output as web/build/app.js
.addEntry('app', './assets/js/main.js')
// will output as web/build/global.css
.addStyleEntry('global', './assets/css/global.scss')Using Sass
// allow sass/scss files to be processed
.enableSassLoader()Actually, to use enableSassLoader(), you'll have to install a few more packages. But Encore will tell you exactly what you need.
Using Jquery
// allow legacy applications to use $/jQuery as a global variable
.autoProvidejQuery()Enable Mapping
You can enable source maps so you can debug easily.
.enableSourceMaps(!Encore.isProduction());Almost done!
we need to export our configuration now.
// export the final configuration
module.exports = Encore.getWebpackConfig();This is already a rich setup: it outputs 2 files, uses the Sass pre-processor and enables source maps to help debugging.
To build the assets, use the encore executable:
#compile assets once
./node_modules/.bin/encore dev# compile assets every time files changed
./node_modules/.bin/encore dev --watch
after execute one of these commands now you can add script and link tags into your view.
{# base.html.twig #}
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
<link rel="stylesheet" href="{{ asset('build/global.css') }}">
</head>
<body>
<!-- ... -->
<script src="{{ asset('build/app.js') }}"></script>
</body>
</html>Examples;
Using Jquery
Lets see how you can use jquery in your project with encore
// assets/js/main.js
// loads the jquery package from node_modules
var $ = require('jquery');
$(document).ready(function() {
$('h1').html('Hello world');
});as you can see all you have to do require jquery.
Using React.js
You want to use ReactJs? Make sure you installed react, along with the babel-preset-react:
yarn add --dev react react-dom prop-types babel-preset-reactEnable react in your webpack.config.js
// webpack.config.js
// ...
Encore
// ...
.enableReactPreset()
;then you can use Reactjs inside your project.
// base.html.twig<div id="app"></div>
// assets/js/main.jsimport React from 'react';
import {render} from 'react-dom';
class App extends React.Component {
render () {
return <p> Hello React!</p>;
}
}
render(<App/>, document.getElementById('app'));
Now you can see it works!
