This is meant to be used as a base/example starting point for a FootworkJS web application. It includes several things pre-scaffolded and setup, including:
- Uses Bower for frontend dependencies
- Uses Gulp for tasks
- Uses RequireJS + text plugin (so Footwork can automatically load assets)
- Includes r.js for optimization and includes example working build.js
- Includes example viewModel, and component which are resolved and bootstrapped dynamically at run-time
- Includes the Karma test runner, all pre-configured and ready to run out of the box.
- Jasmine testing framework
- jasmin-jquery for DOM validations
- Includes Bootstrap3 via Bower
- CSS concatentation and minification
- CSS prefixing during build
Files/directories of note:
public/index.html- Main index HTML filepublic/app/main.js- Application main starting modulepublic/app/router.js- router modulepublic/app/config/assets-config.js- Footwork viewModel/component/etc asset registrationspublic/app/config/require-config.js- RequireJS configurationpublic/app/app/component/navigation- Navigation componenttests- Unit tests
Note that steps 1 and 2 are not necessary if you installed via Yeoman.
- Clone the repo from here:
git clone git@github.com:footworkjs/skeleton-app.git
cd skeleton-app- Acquire npm and bower (javascript) dependencies:
Make sure you have node.js and bower installed in your environment, then run the following:
npm install && bower install- Run the local webserver: (if necessary)
If you are not running this on a pre-existing server which already has an HTTP provider (Apache, nginx, etc) then you will need to run the local webserver in order to view the application. First off, make sure you have Gulp installed, then run:
gulp webserverYou can now access the site at: http://localhost:8000 (or whatever host you have it running on, this assumes localhost)
The included test runner is Karma, to run the unit tests you can either:
Run them via Karma directly (recommended). Note that you need to have Karma CLI installed:
# If you need to install Karma CLI, use the following command
sudo npm install -g karma-cli# Once Karma CLI is installed, you can run the tests with:
karma startRun them manually via Gulp:
# Run the unit tests under /tests
gulp testsRun the watch-and-test task which compiles everything and runs the tests everytime a change is detected:
gulp watch-and-testNOTE: If you get a 'No binary for PhantomJS browser on your platform' error, do the following:
sudo npm install -g phantomjs
export PHANTOMJS_BIN=`which phantomjs`The gulpfile.js included in this repository has several runnable tasks included with it, they are as follows:
# (default task) Compile the LESS into CSS, and bundle/compile/optimize the javascript
gulp# Watch the styles and Javascript files for changes and recompile as needed
gulp watch# Watch the styles files for changes and recompile as needed
gulp watch-styles# Watch the Javascript files for changes and recompile as needed
gulp watch-js# Compile the LESS into CSS
gulp build-styles# Bundle/optimize the javascript (the RequireJS config is located in public/scripts/require-config.js)
gulp build-js