Skip to content

Instantly share code, notes, and snippets.

@Stuk

Stuk/README.md

Last active December 11, 2015 11:08
Show Gist options
  • Save Stuk/4591160 to your computer and use it in GitHub Desktop.
Save Stuk/4591160 to your computer and use it in GitHub Desktop.
Download ZIP
Montage app template
Raw
README.md

{{name}}

This is the Montage app template.

Note: Before working on your app you will need to add montage to it.

npm install .

Layout

The template contains the following files and directories:

  • index.html
  • package.json – Describes your app and its dependencies
  • README.markdown – This readme. Replace the current content with a description of your app
  • ui/ – Directory containing all the UI .reel directories.
    • main.reel – The main interface component
  • core/ – Directory containing all core code for your app.
  • node_modules/ – Directory containing all npm packages needed, including Montage. Any packages here must be included as dependencies in package.json for the Montage require to find them.
  • assets/ – Assets such as global styles and images for your app
  • test/ – Directory containing tests for your app.
    • all.js – Module that point the test runner to all your jasmine specs.
  • run-tests.html – Page to run jasmine tests manually in your browser
  • testacular.conf.js – This is the testacular configuration file. You can start testacular by running node_modules/testacular/bin/testacular start

Create the following directories if you need them:

  • locale/ – Directory containing localized content.
  • lib/ – Directory containing other JS libraries. If a library doesn’t support the CommonJS "exports" object it will need to be loaded through a <script> tag.

Layout

Raw
all.js
require("montage-testing").run(require,[
// Please keep in alphabetical order
]);
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hello</title>
<link rel="stylesheet" href="assets/style/style.css" />
<script src="node_modules/montage/montage.js"></script>
<script type="text/montage-serialization">
{
"owner": {
"prototype": "montage/ui/loader.reel"
}
}
</script>
</head>
<body>
<div class="loading">Loading</div>
</body>
</html>
Raw
main.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Main</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/montage-serialization">
{
"owner": {
"properties": {
"element": {"#": "main"}
}
},
"exampleText": {
"prototype": "montage/ui/dynamic-text.reel",
"properties": {
"element": {"#": "exampleText"}
},
"bindings": {
"value": {"<-": "@owner.thing"}
}
}
}
</script>
</head>
<body>
<div data-montage-id="main" class="Main">
Hello, <span data-montage-id="exampleText"></span>
</div>
</body>
</html>
Raw
main.js
/**
@module "ui/main.reel"
@requires montage
@requires montage/ui/component
*/
var Montage = require("montage").Montage,
Component = require("montage/ui/component").Component;
/**
Description TODO
@class module:"ui/main.reel".Main
@extends module:ui/component.Component
*/
exports.Main = Montage.create(Component, /** @lends module:"ui/main.reel".Main# */ {
thing: {
value: "World"
}
});
Raw
package.json
{
"name": "hello",
"version": "0.1.0",
"dependencies": {
"montage": "*",
"montage-testing": "~0.1.1"
},
"devDependencies": {
"testacular": "~0.5.7"
}
}
Raw
run-tests.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<script src="node_modules/montage-testing/support/jasmine.js"></script>
<script src="node_modules/montage-testing/support/js-beautify/beautify.js"></script>
<link href="node_modules/montage-testing/reporter/style.css" rel="stylesheet" type="text/css" >
<script src="node_modules/montage-testing/reporter/trivial-html.js"></script>
<script src="node_modules/montage-testing/jasmine-additions.js" ></script>
<script src="node_modules/montage/montage.js" data-module="test/all"></script>
</body>
</html>
Raw
style.css
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 18px;
color: #222;
}
Raw
testacular.conf.js
// Testacular configuration
// Minit version:
// base path, that will be used to resolve files and exclude
basePath = '';
// list of files / patterns to load in the browser
files = [
JASMINE,
JASMINE_ADAPTER,
"node_modules/montage-testing/jasmine-additions.js",
"node_modules/montage-testing/testacular-adapter.js",
//
// edit this section to include more files to be served
//
{pattern: 'assets/**/*', included: false},
{pattern: 'ui/*', included: false},
{pattern: 'ui/**/*', included: false},
//{pattern: 'core/*', included: false},
//{pattern: 'core/**/*', included: false},
//
// end
//
{pattern: 'package.json', included: false},
{pattern: 'test/*', included: false},
{pattern: 'test/**/*', included: false},
{pattern: 'node_modules/montage-testing/*', included: false},
{pattern: 'node_modules/montage/*.js', included: false},
{pattern: 'node_modules/montage/**/*.js', included: false},
{pattern: 'node_modules/montage/*.html', included: false},
{pattern: 'node_modules/montage/**/*.html', included: false},
{pattern: 'node_modules/montage/*.css', included: false},
{pattern: 'node_modules/montage/**/*.css', included: false},
{pattern: 'node_modules/montage/*.json', included: false},
{pattern: 'node_modules/montage/**/*.json', included: false}
];
// list of files to exclude
exclude = [
];
// test results reporter to use
// possible values: 'dots', 'progress', 'junit'
reporters = ['progress'];
// web server port
port = 8080;
// cli runner port
runnerPort = 9100;
// enable / disable colors in the output (reporters and logs)
colors = true;
// level of logging
// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
logLevel = LOG_INFO;
// enable / disable watching file and executing tests whenever any file changes
autoWatch = true;
// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
browsers = ['Chrome'];
// If browser does not capture in given timeout [ms], kill it
captureTimeout = 5000;
// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun = false;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment