This is a starter / skeleton / boilerplate template for a Foundation site running on top of Express as the backend server technology. The initial demo layout is based on the portfolio theme as demonstrated on Foundation's HTML Templates page.
It allows you to quickly setup a starting Foundation based site with reasonable defaults as well as typical server-side configurations when building Express-based sites.
Sample site running on Azure Websites - http://express-foundation-template.azurewebsites.net
npm install -g jspm npm install -g gulp
How to use
Clone this repo:
git clone https://github.com/lyphtec/express-foundation-template <your-site-name>
cd <your-site-name> npm install jspm install
(Optional) Remove git bindings as you typically would want to push to your own repo. Alternatively, you can have this upstream repo on a separate branch if you are interested in tracking changes.
rm -rf .git
Make changes! Typically, the following files:
- jspm for browser package management
- Sass (SCSS to be exact) via gulp-sass based on Foundation's libsass workflow
- Vash as default view-engine in Express
- markdown-serve for serving of website content stored as Markdown
- winston as logging framework. Includes a custom logger that logs each log type in a separate file per day in the
- Gulp tasks:
- default (i.e.
gulpwithout any arguments) - builds, runs nodemon, BrowserSync, starts up browser pointing to https://localhost:3000, and watches for changes
- watch - same as
defaultbut without the
- build - removes
/client/app*files, then runs
csstask to compile
/client/scss/app.scss& minify resulting CSS file to
/client/css/app.min.css, also runs the
jstask to transpile as single bundled ES5
/client/app.jsfile & minifies to
- default (i.e.
- BrowserSync - automatic browser reloads when changes are detected during development
Other Notable Files
web.config- For production hosting with iisnode on Windows or Azure Websites (not used on Linux). Refer to this cheat sheet for some useful options when hosting on Azure.
common/common.js- Used by the gulp task in bundling & minifying CSS/JS files to inject header information. Change this to your details.
For production environment, a self-executing bundle is created by transpiling into a single ES5 JS file (
/client/app.min.js). This file is referenced in the
/server/views/layout.vash layout view and will be used when
It is assumed that the contents of the repo will be deployed on a server that doesn't have
gulp available so no gulp tasks will be run after deployment on the target server - thus no bundling or minifying. All jspm packages & npm dev dependencies will not be installed (equivalent to
npm install --production). Therefore, it is best to run
gulp build to update all CSS & JS resources before pushing to production.
(The MIT License)
Copyright © 2015 Nguyen Ly
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.