Magento FUSE
Magento Management Driven by Composer & Grunt, (*1)
This project is directly inspired by http://en.wikipedia.org/wiki/AppFuse, (*2)
- 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/magentofuse, a Magento CE rocketed with the best modules and extensions ever created by fabulous people., (*3)
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)., (*4)
Composer
- ivanchepurnyi (https://github.com/EcomDev/EcomDev_PHPUnit)
- stof (https://github.com/Incenteev/ParameterHandler)
- mmenozzi https://github.com/webgriffe/magento-installer)
- Vinai (https://github.com/magento-hackathon/magento-composer-installer)
Grunt
- shama (https://github.com/gruntjs/grunt-contrib-watch)
- tkellen (https://github.com/gruntjs/grunt-contrib-less)
- sindresorhus (https://github.com/gruntjs/grunt-contrib-compass)
- hughsk (https://github.com/hughsk/kss-node)
- indieisaconcept (https://github.com/indieisaconcept/grunt-styleguide)
- shakyShane (https://github.com/shakyShane/grunt-browser-sync)
Much much more to come !, (*5)
Usage
Create a new project
composer create-project -s dev adfab/magentofuse new-project
BEWARE : Your Mysql account must have a password, (*6)
BEWARE : In windows, open your command window as administrator (it is mandatory for the symbolic links creation), (*7)
This command will :
- Ask the Magento version you want to install then download it (be patient, Magento download servers are even slower than composer updates).
- Install the PHPUnit module
- Install the Grunt config
- Enter the installation process : Answer each question including database config., (*8)
Once done and only if needed, update your /etc/hosts file + your web server configuration. Relaunch the web server, and you're ready to go !, (*9)
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 :, (*10)
composer run-script post-install-cmd
This will run the composer post-install script specifically., (*11)
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., (*12)
NodeJS, Grunt and Compass have to be installed on your computer., (*13)
As described in Magento documentation, (*14)
- Create two subdirectories in app/design/frontend/rwd/custom_theme and skin/frontend/rwd/custom_theme
- Change watched theme and domain inside Gruntfile.js in the two first variables
- Log into the Magento admin and change the design theme from default to custom_theme
- Copy only needed files to override
You now have a responsive base theme ready to be customized., (*15)
But it's not over : Magento Fuse brings tools to help front dev.
The Grunt config will give you opportunity to modify your Less / Sass files from Chrome DevTools and automatically compile and synchronize the browsers (IE, FF, Chrome, Safari) even on your mobile., (*16)
The Grunt config use grunt-contrib-watch to watch the changes during your dev, grunt-contrib-less, grunt-contrib-compass 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)., (*17)
To achieve this, just launch Grunt from your project root :, (*18)
grunt dev
Don't forget to script grunt command line when deploying in order to refresh less / sass / css / images, (*19)
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., (*20)
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., (*21)
During your dev, a live styleguide is created at /styleguide/index.html address (http://yourproject.local/styleguide/index.html)., (*22)
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., (*23)
To benefit from this feature, just launch grunt :, (*24)
grunt dev
HOW-TO DEVELOP A NEW MODULE
Introduction
With Magento, a module is split into many directories making its development and maintenance difficult., (*25)
Thanks to Magento Fuse, we'll fix this and simplify the development of a module : You'll only version your module stuff. Nothing more !, (*26)
The skeleton
A new tool fully inspired by Mtool from Daniel Kocherga (https://github.com/dankocherga/MTool) will be added to Magento Fuse soon. In the meantime, organize your module skeleton this way :, (*27)
/app/etc/modules/MyNamespace_MyModule.xml
/app/code/community/MyNamespace/Monmodule/*
/app/design/frontend/base/default/layout/mynamespace/mymodule/*
/app/design/frontend/base/default/template/mynamespace/mymodule/*
/skin/frontend/base/default/css/mynamespace/mymodule/*
/skin/frontend/base/default/js/mynamespace/mymodule/*
/skin/frontend/base/default/images/mynamespace/mymodule/*
/js/mynamespace/mymodule/*
/lib/mynamespace/mymodule/*
Dev process
Create the module skeleton
Add a composer.json to define the project as a Magento module ("type" : "magento-module") + describe the installation mapping :, (*28)
{
"name": "adfab/avatar",
"description": "Social commerce is on its way",
"version": "1.0.0",
"type": "magento-module",
"keywords": [
"magento", "avatar", "social commerce", "adfab"
],
"homepage": "http://www.adfab.fr",
"license":"OSL-3.0",
"authors": [
{
"name": "Grégory Besson",
"email": "gregory.besson@adfab.fr",
"homepage": "http://www.adfab.fr"
}
],
"require": {
"magento-hackathon/magento-composer-installer": "@stable"
},
"extra": {
"map": [
["app/etc/modules/Adfab_Avatar.xml", "app/etc/modules/Adfab_Avatar.xml"],
["app/code/community/Adfab/Avatar/", "app/code/community/Adfab/Avatar/"],
["app/design/frontend/base/default/layout/adfab/avatar/layout.xml", "app/design/frontend/base/default/layout/adfab/avatar/layout.xml"],
["app/locale/en_US/Adfab_Avatar.csv", "app/locale/en_US/Adfab_Avatar.csv"],
["app/locale/fr_FR/Adfab_Avatar.csv", "app/locale/fr_FR/Adfab_Avatar.csv"],
["skin/frontend/base/default/css/adfab/avatar/", "skin/frontend/base/default/css/adfab/avatar/"],
["skin/frontend/base/default/images/adfab/avatar/", "skin/frontend/base/default/images/adfab/avatar/"],
["skin/frontend/base/default/js/adfab/", "skin/frontend/base/default/js/adfab/"]
]
}
}
Version this module
Use Git or SVN as you wish, (*29)
Install a Magento version with Magento Fuse
Once done, declare the SVN or Git repository in the Fuse composer.json (following example for SVN) :, (*30)
"require": {
"adfab/avatar": "dev-trunk"
},
"repositories": [
{
"type": "vcs",
"url": "http://myrepository.com/svn/MAGENTO/AVATAR"
}
],
Launch composer update (your module will be installed in your vendor directory), (*31)
BE CAREFUL, (*32)
Don't forget to activate the symlinks in System/configuration/Developer/Allow Symlinks, (*33)
If you forget to do that, the render of your templates will fail silently :P, (*34)
If you want to reapply your symlinks, just do :, (*35)
./vendor/bin/composerCommandIntegrator.php magento-module-deploy, (*36)
Add this module directory in your IDE
Add the module directory as a project in your IDE (For Eclipse : New->PHP Project from existing directory)., (*37)
That's it, You can now develop your Magento module with no adherence with the Magento core files :), (*38)
Each modification is directly testabe on your Fuse environment. And the versioning will only contain the files from your module., (*39)
Enjoy ;), (*40)
Wallogit.com
