Charles Sanquer

Symfony2 avec npm, bower et assetic

Fri, 27 Jun 2014 14:34:00 +0200

Petit tutoriel pour combiner composer, npm (nodejs), bower et assetic afin de gérer toutes vos dépendances CSS, JS, PHP sur un projet symfony2.

Prérequis

Vous avez besoin de : * PHP >= 5.3 (évidement) * nodejs >= 0.10 * Git pour le téléchargement des dépendances * composer

Configurer Composer

Il faut ajouter la commande npm install au niveau des hooks post-install et post-update de la section scripts du fichier composer.json

{
    "scripts": {
        "post-install-cmd": [
            "npm install"
        ],
        "post-update-cmd": [
            "npm install"
        ]
    },
}

Configurer NPM

Créez un fichier packages.json (vous pouvez utiliser notamment la commande npm init). Le point important est de renseigner la section scripts - postinstall avec la commande bower.

{
    "name": "my-sf2-project",
    "author": "Martin Durand martin.durand@example.com",
    "private": true,
    "dependencies": {
        "less": "~1.7",
        "uglify-js": "~2.4",
        "uglifycss": "~0.0",
        "bower": "~1.3"
    },
    "scripts": {
        "postinstall" : "node_modules/.bin/bower install"
    }
}

Ici, NPM est configuré de la façon suivante :

l’application symfony2 est privée (elle ne doit pas être publié sur www.npmjs.org)
on utilise les dépendances nodejs suivante less , uglify-js , uglifycss, et bien sur bower.

Less, uglify-js et uglifycss seront utilisé par les filtres assetic par la suite.
à la fin de l’installation npm, on lance l’installation des packages front par bower : on utilise l’executable bower local du projet qui a été installé dans node_modules/.bin/bower

Configurer bower

Créez tout d’abord un fichier .bowerrc afin de définir où les packages front vont être installé :

{
    "directory": "web/bower_components"
}

Ici on configure bower pour installer les dépendances front dans le dossier bower_components dans le dossier web de symfony2. On pourrait aussi les installer dans le dossier Resources/public/bower_components d’un bundle.

Ensuite il faut créer le fichier bower.json (éventuellement avec la commande bower init ou plutôt node_modules/.bin/bower init car on utlise une version de bower installé de façon locale par npm).

{
  "name": "my-sf2-project",
  "authors": [
    "Martin Durand <martin.durand@example.com>"
  ],
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "public/bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "bootstrap": "v3.1.1",
    "jquery": "~2.1.1",
    "jquery-migrate": "~1.2.1",
    "font-awesome": "~4.1",
    "modernizr": "2.6.2"
  }
}

Ici, Bower est configuré pour rendre privé le projet symfony2 ( pas de publication accidentelle sur bower.io) et on utilise les dépendances suivantes : twitter bootstrap, jquery, font-awesome et modernizr.

Configuration d’Assetic et Symfony2

Modification de la config d’assetic :

app/config/config.yml

assetic:
    debug: "%kernel.debug%"
    use_controller:
        enabled: false
    node: "/usr/local/bin/node" # chemin vers l'executable nodejs
    node_paths:
        # chemin vers les modules nodejs installés localement pour le projet par npm
        - "%kernel.root_dir%/../node_modules"  
        # chemin vers les modules nodejs du systeme, sert de fallback
        - "/usr/local/lib/node_modules"
    filters:
        less:
            apply_to: "\\.less$"
            # on utilise le lessc installé localement
            bin: "%kernel.root_dir%/../node_modules/.bin/lessc"
        cssrewrite:
            apply_to: "\\.css$"

app/config/config_prod.yml

assetic:
    filters:
        less:
            apply_to: "\\.less$"
            # on utilise le lessc installé localement
            bin: "%kernel.root_dir%/../node_modules/.bin/lessc"
        cssrewrite:
            apply_to: "\\.css$"
        uglifycss:
            # on utilise le uglifycss installé localement
            bin: "%kernel.root_dir%/../node_modules/.bin/uglifycss"
            apply_to: "\\.css$"
        uglifyjs2:
            # on utilise le uglifyjs installé localement
            bin: "%kernel.root_dir%/../node_modules/.bin/uglifyjs"
            apply_to: "\\.js$"

Utilisation des assets dans twig

Desormais vous pouvez utiliser les balises assetic de twig pour compiler les fichiers less et rassembler et minifier tous les fichiers js et css


{% stylesheets
   'bower_components/bootstrap/less/bootstrap.less'
    output='css/compiled/main.css'
%}
    <link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="screen" />
{% endstylesheets %}

{% javascripts
        'bower_components/modernizr/modernizr.js'
        'bower_components/jquery/dist/jquery.js'
        'bower_components/jquery-migrate/jquery-migrate.js'
        'bower_components/bootstrap/js/affix.js'
        'bower_components/bootstrap/js/alert.js'
        'bower_components/bootstrap/js/button.js'
        'bower_components/bootstrap/js/carousel.js'
        'bower_components/bootstrap/js/collapse.js'
        'bower_components/bootstrap/js/dropdown.js'
        'bower_components/bootstrap/js/modal.js'
        'bower_components/bootstrap/js/tooltip.js'
        'bower_components/bootstrap/js/popover.js'
        'bower_components/bootstrap/js/scrollspy.js'
        'bower_components/bootstrap/js/tab.js'
        'bower_components/bootstrap/js/transition.js'
        output='js/compiled/main.js'
    %}
    <script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}

On installe tout

Maintenant on peut tout installer :

php composer.phar install
php app/console assetic:dump --env=prod --no-debug

et voila !

Installation Gitolite

Wed, 19 Jun 2013 16:12:00 +0200

Préparation

Au préalable, vous devez installer git et gitweb :

sudo aptitude install git gitweb

et créer un compte unix git qui va heberger gitolite et les dépots git :

sudo adduser --system --shell /bin/bash --gecos 'git version control' --group --disabled-password --home /home/git git

Ensuite vous devez copier votre clé publique ssh (pour administrer gitolite et utiliser git) sur le serveur dans /home/git et la renommer en VotrePrenom.VotreNom.pub

Installation de gitolite

On supprime les eventuelles clés SSH déjà autorisées et on prepare le PATH de l’utilisateur git

sudo su git
rm $HOME/.ssh/authorized_keys
mkdir -p $HOME/bin
echo 'PATH=$HOME/bin:$PATH' >> $HOME/.bashrc
source .bashrc

puis on installe gitolite depuis github :

git clone git://github.com/sitaramc/gitolite
cd gitolite
git co v3.5.3.1
cd ~
gitolite/install -ln $HOME/bin
gitolite setup -pk VotrePrenom.VotreNom.pub

Configuration de Gitweb pour gitolite

Gitweb ne fonctionne pas avec gitolite par defaut: On va adapter sa configuration en remplaçant le contenu du fichier /etc/gitweb.conf par celui-ci :

# debian gitweb conf with manual gitolite install
# handle gitolite 3 acl in gitweb

# path to git projects (<project>.git)
$projectroot = "/home/git/repositories";

# directory to use for temp files
$git_temp = "/tmp";

# target of the home link on top of all pages
#$home_link = $my_uri || "/";

# html text to include at home page
#$home_text = "indextext.html";

# file with project list; by default, simply scan the projectroot dir.
#$projects_list = $projectroot;

# stylesheet to use
#@stylesheets = ("static/gitweb.css");

# javascript code for gitweb
#$javascript = "static/gitweb.js";

# logo to use
#$logo = "static/git-logo.png";

# the 'favicon'
$favicon = "static/git-favicon.png";

# ----------------------------------------------------------------------

# Per-repo authorization for gitweb using gitolite v3 access rules
# Read comments, modify code as needed, and include in gitweb.conf

# Please note that the author does not have personal experience with gitweb
# and does not use it.  Some testing may be required.  Patches welcome but
# please make sure they are tested against a "github" version of gitolite and
# not an RPM or a DEB, for obvious reasons.

# ----------------------------------------------------------------------

# First, run 'gitolite query-rc -a' (as the gitolite hosting user) to find the
# values for GL_BINDIR and GL_LIBDIR in your installation.  Then use those
# values in the code below:

BEGIN {
    $ENV{HOME} = "/home/git";   # or whatever is the hosting user's $HOME
    $ENV{GL_BINDIR} = "/home/git/bin";
    $ENV{GL_LIBDIR} = "/home/git/bin/lib";
}

# Pull in gitolite's perl API module.  Among other things, this also sets the
# GL_REPO_BASE environment variable.
use lib $ENV{GL_LIBDIR};
use Gitolite::Easy;

# Set projectroot for gitweb.  If you already set it earlier in gitweb.conf
# you don't need this but please make sure the path you used is the same as
# the value of GL_REPO_BASE in the 'gitolite query-rc -a' output above.
#$projectroot = $ENV{GL_REPO_BASE};

# Now get the user name.  Unauthenticated clients will be deemed to be the
# 'gitweb' user so make sure gitolite's conf file does not allow that user to
# see anything sensitive.
#
# for nginx add this to nginx config
# fastcgi_param   REMOTE_USER     $remote_user;
#
$ENV{GL_USER} = $cgi->remote_user || "gitweb";

$export_auth_hook = sub {
    my $repo = shift;
    # gitweb passes us the full repo path; we need to strip the beginning and
    # the end, to get the repo name as it is specified in gitolite conf
    return unless $repo =~ s/^\\Q$projectroot\\E\\/?(.+)\\.git$/$1/;

    # call Easy.pm's 'can_read' function
    return can_read($repo);
};

$feature{'highlight'}{'default'} = [1];
$feature{'highlight'}{'override'} = 1;

# git-diff-tree(1) options to use for generated patches
#@diff_opts = ("-M");
@diff_opts = ();

Puis il faut configurer gitolite pour gerer les mots de passe pour gitweb et les droits UNIX sur les dépots. Il suffit de modifier le fichier /home/git/.gitolite.rc en ajoutant ou modifiant les variables de config suivante:

%RC = (
    # ....
    UMASK                       =>  0027, #les depots doivent pouvoir être lu par le group git
    GIT_CONFIG_KEYS             =>  'gitweb\\..*', #
    HTPASSWD_FILE               =>  '/home/git/git_users.passwd', # pour pouvoir editer son mot de passe gitweb
    # ....
    COMMANDS                    =>
        {
            # ....
            'htpasswd'          =>  1, # pour pouvoir editer son mot de passe gitweb
            # ....
        },
    # ....
);

On change les droits des dépots (drwxr-x--- pour les dossiers et -rw-r----- pour les fichiers ) afin qu’ils soient lisibles et modifiable par l’utilisateur git et lisibles uniquement par le groupe git.

chmod -R u=rwX,g=rX,o= /home/git/repositories/*

on crée un nouveau fichier de mot de passe pour gitweb (via la commande apache htpasswd)

htpasswd -c /home/git/git_users.passwd VotrePrenom.VotreNom

Configuration du serveur Web (apache ou nginx)

D’abord, ajoutez l’utilisateur apache (ou nginx) www-data au groupe git:

sudo adduser www-data git

puis créez un fichier vhost pour gitweb ( ex git.mydomain.example)

Configuration Apache 2

créez le fichier /etc/apache2/sites-available/gitweb-ssl :

<IfModule mod_ssl.c>
<VirtualHost *:443>
  ServerName git.mydomain.example
  DocumentRoot "/usr/share/gitweb"
  DirectoryIndex index.cgi

  <Location />
      # try anonymous access first, resort to real
      #Satisfy Any
      # authentication if necessary.
      Require valid-user

      SSLRequireSSL

      # how to authenticate a user
      AuthType Basic
      AuthName "Gitweb : Depots git"
      AuthUserFile /home/git/git_users.passwd
   </Location>

   <Directory /usr/share/gitweb>
      Options FollowSymLinks +ExecCGI
      AddHandler cgi-script .cgi
   </Directory>

   CustomLog /var/log/apache2/gitweb.access.log combined
   ErrorLog /var/log/apache2/gitweb.error.log

   SSLEngine on
   SSLCertificateFile    /etc/ssl/certs/<my-ssl-certificate-pem>.pem
   # Add this once there is a real (non self-signed) certificate.
   SSLCertificateKeyFile /etc/ssl/private/<my-ssl-certificate-key>.key
</VirtualHost>

<VirtualHost *:80>
  ServerName git.mydomain.example

  Redirect / https://git.mydomain.example/
</VirtualHost>
</IfModule>

Enfin activez le vhost et redémarrez apache :

a2enmod rewrite actions headers ssl vhost_alias
a2ensite gitweb-ssl
service apache2 restart

Configuration Nginx

créez le fichier /etc/nginx/sites-available/gitweb-ssl :

server {
    listen 80 ;

    server_name git.mydomain.example;
    rewrite ^ https://git.mydomain.example$request_uri permanent;
}

# HTTPS server
#
server {
    listen 443;
    server_name git.mydomain.example;

    root /usr/share/gitweb;

    ssl on;
    ssl_certificate /etc/ssl/localcerts/<my-ssl-certificate-pem>.pem;
    ssl_certificate_key /etc/ssl/localcerts/<my-ssl-certificate-key>.key;

    ssl_session_timeout 5m;

    ssl_protocols SSLv3 TLSv1;
    ssl_ciphers ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv3:+EXP;
    ssl_prefer_server_ciphers on;

    access_log /var/log/nginx/gitweb.access.log;
    error_log /var/log/nginx/gitweb.error.log;
    charset utf-8;

    auth_basic           "RESTRICTED ACCESS";
    auth_basic_user_file /home/git/git_users.passwd;

    try_files $uri @gitweb;
    location @gitweb {
        fastcgi_pass unix:/var/run/fcgiwrap.socket;
        fastcgi_param SCRIPT_FILENAME   /usr/share/gitweb/gitweb.cgi;
        fastcgi_param PATH_INFO         $uri;
        fastcgi_param GITWEB_CONFIG     /etc/gitweb.conf;
        fastcgi_param REMOTE_USER     $remote_user;
        include fastcgi_params;
   }
}

Enfin activez le vhost et redémarrez nginx :

ngxensite gitweb-ssl
# ou ln -s /etc/nginx/sites-available/gitweb-ssl /etc/nginx/sites-enabled/gitweb-ssl
service nginx restart