So, we want to create an application and use Symfony as backend and Angular 1.x as frontend. Here come some questions:

  • Where to put angular files (folder/structure)?
  • Ho to automate frontend workflow?

In this article we use a standard Symfony project folder structure:


To glue Symfony with Angular we will use Gulp. Next step we need to install it:

npm install --save gulp

and then some gulp additional modules:

npm install --save gulp-cli gulp-contcat gulp-sass gulp-watch

After everything will be installed we add a new gulpfile.js in the root of our project:

var gulp   = require('gulp');
var sass   = require('gulp-sass');
var concat = require('gulp-concat');
var watch  = require('gulp-watch');

gulp.task('sass', function(){

gulp.task('scripts', function(){
    var scripts = [
        // Dist
        // App


gulp.task('watch', function() {'src/AppBundle/Resources/public/js/**/*', ['scripts']);'src/AppBundle/Resources/public/sass/**/*', ['sass']);

gulp.task('default', [

Our Angular app script will be placed in the AppBundle in src/AppBundle/Resources/public/js/app.js file:

// src/AppBundle/Resources/public/js/app.js
angular.module('app', []);

And that is all! Now our application skeleton is ready. Everything related to frontend should be placed in src/AppBundle/Resources/public/js/ folder. After running gulp all project js and css files will be put in the web folder, in the web/js/app.js and web/css/style.css files accordingly.

The last step is to include them in the main application layout app/Resources/views/base.html.twig:

<!DOCTYPE html>
        <meta charset="UTF-8" />
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}
            <link rel="stylesheet" href="{{ asset('css/style.css') }}">
        {% endblock %}
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
    <body ng-app="dictionary">
        {% block body %}
            <div ng-view class="container">

        {% endblock %}
        {% block javascripts %}
            <script src="{{ asset('js/app.js') }}"></script>
        {% endblock %}