Assemble Starter

Assemble starter kit for generating static sites (landing pages, brochure sites, blogs etc).

• Use cases
• Components
• Tech stack
• Install
• Workflow
  • Project settings
  • Development
  • Production
  • Dist server

Use cases

• final product is HTML/CSS/JS files
• CMS is not required
• custom design

Components

Available at http://localhost:4001/examples.

• Sticky footer
• Grid
• Aspect ratio
• Image lazy loading
• Scroll to content
• Copyright
• Twitter card (summary large image only)
• Google Analytics tag
• Open graph markup
• Canonical URL in HTML head
• Follow buttons
• Lightbox
• Share buttons
• Google Analytics events
• Slider

Tech stack

• Assemble.io
• Grunt
• PostCSS, BEM
• Handlebars
• ES6, Babel, Browserify
• Mocha, Chai, Sinon

Install

• Install Node.js

• Install nvm if required (node version v7.3.0, npm version 3.10.10)

• Run npm install from project root to install node modules

Workflow

Project settings

Update project settings in environment config files in app/config folder.

Development config app/config/development.js should be used for developing locally.

Production config app/config/production.js should be used to compile and minify files for production use or to test locally using production settings.

Config settings can be overwritten on page level in page YAML metadata.

Development

URL: http://localhost:4001

To serve the app for development on local machine using development config app/config/development.js, run this command from project root:

npm start

To serve the app for development on local machine using production config app/config/production.js (e.g. to test production settings), run the following command:

npm run start:prod

Run tests and watch for test file changes:

npm run test:watch

Production

To compile and minify HTML files and assets into dist folder using production config app/config/production.js, run the following command from project root:

npm run dist

If required (e.g. for testing), compile using development config instead:

npm run dist:dev

Dist server

Test compiled and minified production files on local server (uses production config):

npm run dist:server

Remove examples

Removes example files.

Run npm run removeExamples from project root.