monkeycode/microsite-template

Microsite Template for Silex

, _(*1)

A bootstrapped Silex/Javascript setup. Targeted at small sites and for use as a JS playground., _(*2)

The purpose of this template is mainly to provide preconfigured Javascript, Less, and Testing toolchains along with a basic Silex/Twig setup. While you can easily remove, add, or modify individual features, it may make sense to take a look at other approaches that are more focused on Silex itself if you are not planning to use at least some of these tools., _(*3)

The main components are:, _(*4)

• Silex to tie everything together and to provide Twig support.
• gulp.js as a JS build system
• browserify to handle JS components
• AngularJS as a JS Framework (can be easily removed if not needed)
• Less for CSS handling
• Behat configured to use PhantomJS for functional testing

Requirements

To install, build, and test the project, you will need the following tools:, _(*5)

• Composer
• Node.js
• npm
• Bower
• A global install of gulp
• PhantomJS (optional)

Installation

$ composer create-project monkeycode/microsite-template myProject
$ cd myProject
$ npm install
$ bower install

Where to find what

All non-PHP code is located in /resources, all PHP files in src., _(*6)

• /resources/js: Javascript application files (note that library files are under /node_modules because of the napa install).
• /resources/less: Less files. Already includes imports for Bootstrap v3.
• /resources/views: Twig templates.
• /src/app.php: Silex application setup.
• /src/controllers.php: Controllers & routing.
• /config: Silex application configuration.
• /web: Document root. Front controllers and generated JS/CSS assets.

Building

The provided basic gulpfile.js lets you run the following tasks:, _(*7)

• gulp: Default task - watch both Less and Javascript sources for changes and rebuild assets on the fly for dev use.
• gulp prod: Compile & minify Less and Javascript for production use.

Some additional tasks are available, but will generally be called implicitly as dependencies of the two previous tasks:, _(*8)

• gulp less: Compile Less to CSS in /web/css/main.css.
• gulp lint: Run JSHint on the Javascript files.
• gulp js-dev-lib: Concatenate all vendor libraries separately from the application JS for dev use.
• gulp js-dev-app: Concatenate all scripts separately from the vendor libraries for dev use.
• gulp dev: Runs less, js-dev-lib, and js-dev-lib.

Testing

A sample test is provided in Behat, and configured for use with PhantomJS. The suite can be run locally by calling ./testlocal.sh., _(*9)