e-Commerce L'actualité AdFab

Magento Fuse

Ou Magento sous dopamine.

Dans cet article, je vais vous présenter Magento Fuse : https://github.com/AdFabConnect/magentofuse

Un Magento dopé à Composer & Grunt pour accélérer vos devs et vous rendre encore plus efficace !

Magento Management Driven by Composer & Grunt

This project is directly inspired by http://en.wikipedia.org/wiki/AppFuse

  • I wanted Magento
  • I wanted Magento to be fast
  • I wanted Magento to be fast and easy to install
  • I wanted Magento to be fast and easy to unit test
  • I wanted Magento to be fast and easy to extend
  • I wanted Magento to be fast and easy to skin
  • I wanted Magento to be fast and easy to embed new features

Here you have adfab/magento, a Magento CE rocketed with the best modules and extensions ever created by fabulous people.

This project aims to ease your life as a Magento dev :

  • With Magento Fuse, you install a CE version of Magento in 1 line. The installation includes the database creation and sample upload (if you want).

For the version 1.8.1.0, here is what has been modified in the core (yes : core !) of Magento :

############################################
## Dev Environment if host = *.local or *.dev
## TODO: ini_set('display_errors', 1);
## 

    SetEnvIf Host .*\.dev MAGE_IS_DEVELOPER_MODE=1
    SetEnvIf Host .*\.local MAGE_IS_DEVELOPER_MODE=1

Composer

Grunt

Much much more to come !

Usage

Create a new project

composer create-project adfab/magento new-project 1.8.1.0-dev

(Check available branches to know which versions of Magento are available)

This command will :

  • download the Magento version 1.8.1.0
  • Install the PHPUnit module
  • Install the Magento Bootstrap 3 boilerplate
  • Install the Grunt config
  • Enter the installation process : Answer each question including database config.

Once done, update your /etc/hosts file + your web server configuration. Relaunch the web server, and you’re ready to go !

Redo the Magento config + database install

If you want to launch specific Magento install, check first that there is no app/etc/local.xml file so that the Magento install can be launched. Then :

composer run-script post-install-cmd

This will run the composer post-install script specifically.

Create a new theme

Once the projet is installed you’ll be able to dev the frontend directly from Chrome DevTools while keeping updated ALL browsers (incuding mobiles) connected to your magento website.

You have to have NodeJS and Grunt installed on your machine.

  1. Copy / paste the ready to develop skin theme from var/vendor/webcomm/magento-boilerplate/skin/frontend/mytheme to skin/frontend/youtheme
  2. Copy / paste the ready to develop design theme from var/vendor/webcomm/magento-boilerplate/app/design/frontend/boilerplate to app/design/frontend/yourtheme
  3. Log in to the Magento Admin and change the design package from default to yourtheme

You now have a Bootstrap responsive base theme ready to be themed.

But it’s not over : Magento Fuse brings tools to help front dev. The Grunt config will give you opportunity to modify your Less files from Chrome DevTools and automatically compile and synchronize the browsers (IE, FF, Chrome, Safari) even on your mobile.

The Grunt config use grunt-contrib-watch to watch the changes during your dev, grunt-contrib-less to compile your Less files and create the map file of your CSS for Chrome to display your Less files in Chrome Devtools (amazing) and grunt-browser-sync to synchronize the CSS, JS and HTML on all your browsers (and no only chrome).

To achieve this, just launch Grunt from your project root :

sudo grunt

TDD CSS

This feature is a WiP feature I’m working on : I want to apply the same work process as for back dev : Test Driven Development.

This is now possible to achieve this goal for CSS dev. We’ll use the KSS documentation http://warpspire.com/kss/ with the NodeJS KSS-node project and the grunt-styleguide.

During your dev, a live styleguide is created at /styleguide/index.html address (http://yourproject.local/styleguide/index.html).

With the dynamic update on save, you then can work directly on html templates of your doc to create the « unit blocks » of your design.

To benefit from this feature, just launch grunt :

sudo grunt

Enjoy 😉

Ce projet s’inspire de http://en.wikipedia.org/wiki/AppFuse du monde Java que j’ai utilisé et utilise encore : Merci Matt Raible.

  • Je veux Magento
  • Je veux que Magento soit rapide
  • Je veux Magento facile à installer
  • Je veux Magento facile à tester
  • Je veux Magento simple à étendre
  • Je veux Magento aisé à skinner
  • Je veux Magento et lui ajouter de nouvelles fonctionnalités facilement

Et voici Magento Fuse, un Magento en version Fusée intégrant les meilleurs modules et extensions jamais créés par de grands développeurs.

Ce projet à pour objectif de vous simplifier la vie de dev Magento :

  • Avec Magento Fuse, vous installez une version Community en 1 ligne de commande. Cette installation inclue même l’install de la BDD et de la BDD sample (si vous le souhaitez).

Composer et Grunt viennent à la rescousse de Magento. Voici les développeurs avec les modules et plugins utilisés entre dans la composition de Magento Fuse :

Composer

Grunt

Utilisation

Créer un nouveau projet

composer create-project adfab/magentofuse new-project 1.8.1.0-dev

Allez sur Github pour voir quelles branches (donc quelles versions de Magento) sont disponibles.

Voici ce que réalise la commande précédente :

  • download la version 1.8.1.0 de Magento CE
  • Installe le module PHPUnit
  • Installe Bootstrap 3 boilerplate pour Magento
  • Installe la config Grunt
  • initie le process d’installation : Répondez aux questions pour une install automatisée de Magento et de sa BDD.

Une fois ceci fait, il ne vous reste plus qu’à mettre à jour votre fichier /etc/hosts file et votre configuration Apache ou Ngninx. Vous êtes prêt à travailler en 5 minutes chrono !

Relancer la config Magento et l’install de BDD

Si vous voulez relancer cette partie, vérifiez d’abord qu’il n’y ait pas de fichier app/etc/local.xml file puis :

composer run-script post-install-cmd

Seul le script Composer de post-install sera lancé. Il correspond à la config + install de BDD de Magento.

Créer un nouveau thème

Once the projet is installed you’ll be able to dev the frontend directly from Chrome DevTools while keeping updated ALL browsers (incuding mobiles) connected to your magento website.

You have to have NodeJS and Grunt installed on your machine.

  1. Copy / paste the ready to develop skin theme from var/vendor/webcomm/magento-boilerplate/skin/frontend/mytheme to skin/frontend/youtheme
  2. Copy / paste the ready to develop design theme from var/vendor/webcomm/magento-boilerplate/app/design/frontend/boilerplate to app/design/frontend/yourtheme
  3. Log in to the Magento Admin and change the design package from default to yourtheme

You now have a Bootstrap responsive base theme ready to be themed.

But it’s not over : Magento Fuse brings tools to help front dev. The Grunt config will give you opportunity to modify your Less files from Chrome DevTools and automatically compile and synchronize the browsers (IE, FF, Chrome, Safari) even on your mobile.

The Grunt config use grunt-contrib-watch to watch the changes during your dev, grunt-contrib-less to compile your Less files and create the map file of your CSS for Chrome to display your Less files in Chrome Devtools (amazing) and grunt-browser-sync to synchronize the CSS, JS and HTML on all your browsers (and no only chrome).

To achieve this, just launch Grunt from your project root :

sudo grunt

TDD CSS

This feature is a WiP feature I’m working on : I want to apply the same work process as for back dev : Test Driven Development.

This is now possible to achieve this goal for CSS dev. We’ll use the KSS documentation http://warpspire.com/kss/ with the NodeJS KSS-node project and the grunt-styleguide.

During your dev, a live styleguide is created at /styleguide/index.html address (http://yourproject.local/styleguide/index.html).

With the dynamic update on save, you then can work directly on html templates of your doc to create the « unit blocks » of your design.

To benefit from this feature, just launch grunt :

sudo grunt

Enjoy 😉

21/11/2014 72 MIN READ BY: Grégory BESSON 0 COMMENT
LIRE LA SUITE

Grégory BESSON