frontend-bundle

A modern frontend development workflow for Symfony apps.

DEPRECATED

This project is deprecated. Use Webpack Encore instead.

Webpack Encore is a simpler way to integrate Webpack into your Symfony application. It wraps Webpack, giving you a clean & powerful API for bundling JavaScript modules, pre-processing CSS & JS and compiling and minifying assets.

There used to be a time where Symfony had no first-class support for a modern frontend development workflow, which was the problem this bundle was trying to solve. With Webpack Encore that is no longer the case so there is no reason for this bundle to continue to exist. Webpack Encore does it better and is the officially recommended way to integrate frontend technologies into Symfony applications.

---

Symfony comes packaged with Assetic for managing frontend assets like CSS, JavaScript or images. Assetic is great to quickly start a project but, as applications grow, its limitations start to show.

It has thus become more and more common to integrate tools native to frontend development into Symfony projects (bower, gulp, webpack, livereload, etc). However, setting up a seamless frontend development workflow is not easy and developers must repeat themselves every time they start a new project.

There are several tools out there that make it easier to do this but they come with their own limitations and many are wrappers for the native frontend development tools. Developers should be able to use the native tools directly and have them just work within their Symfony projects.

This bundle attempts to be the go-to solution for quickly, easily and cleanly setting up a tailored frontend development workflow in Symfony projects.

Supports PHP 5.4+, Symfony 2.7+

Features

• Asset pipeline
  • Automatically generate the build file for your preferred asset pipeline
  • Supports Gulp (Webpack, Broccoli and others on the way)
  • Sensible defaults that work with most Symfony projects
  • You can easily adapt it for your use case
• Use Symfony's native calls to reference assets
  • <script src="{{ asset('js/foo.js') }}"></script>
  • No need to clutter your Twig templates with boundaries for the asset pipeline
  • Assets are automatically cache-busted in production
• Fast development
  • Fast rebuilds make for an efficient workflow
  • Only changed files are processed
  • No more slow refreshes due to Assetic
• Livereload
  • Browser updates when you save a file
  • Change the CSS, the browser instantaneously updates, without a page reload
• Bower
  • Frontend dependencies are a bower install away
  • No more vendor code in your repository
  • Automatically generates vendor.js and vendor.css files from your bower.json
• Cache busting
  • Automatically add a version to assets when in production
  • No more need to set a version on every deploy
  • An asset's version only changes if its content changed

Documentation

View Documentation

Contributing

CONTRIBUTING