README

A bootstrapped Silex/Javascript setup. Targeted at small sites and for use as a JS playground.

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.

The main components are:

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:

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.

/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:

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:

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.

monkeycode / microsite-template

Maintainers

Details