Skip to content
This repository was archived by the owner on Sep 10, 2022. It is now read-only.

Commit 7c8ebb8

Browse files
author
Matt Gaunt
committed
Adding first version of the static page render
1 parent ed58db0 commit 7c8ebb8

21 files changed

+357
-43
lines changed

‎.eslintrc

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
2
1515
],
1616
"key-spacing": [2, {"beforeColon": false, "afterColon": true}],
17-
"max-len": [2, 80, 2, {"ignoreUrls": true}],
17+
"max-len": [2, 80, 2],
1818
"new-cap": 2,
1919
"no-console": 0,
2020
"no-else-return": 2,
@@ -46,7 +46,7 @@
4646
"browser": true,
4747
"node": true
4848
},
49-
"extends": "eslint:recommended",
49+
"extends": "eslint:recommended",
5050
"globals": {
5151
"importScripts": true
5252
}

‎gulp-tasks/scripts.js

Lines changed: 31 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -30,19 +30,21 @@ var gulpif = require('gulp-if');
3030
var streamify = require('gulp-streamify');
3131
var replace = require('gulp-replace');
3232
var license = require('gulp-license');
33+
var sourcemaps = require('gulp-sourcemaps');
34+
var rename = require('gulp-rename');
3335

3436
gulp.task('scripts:watch', function() {
35-
gulp.watch(GLOBAL.config.src + '/**/*.es6.js', ['scripts:es6']);
37+
gulp.watch(GLOBAL.config.src + '/**/*.js', ['scripts']);
3638
});
3739

3840
// Takes a set of objects defining inputs of javascript files
3941
// to run through browserify and babelify
4042
function compileES6Bundles(browserifyBundles, minify) {
4143
browserifyBundles.forEach(function(bundle) {
4244
var browserifyBundle = browserify({
43-
entries: [bundle.srcPath],
44-
})
45-
.transform(babelify);
45+
entries: [bundle.srcPath]
46+
})
47+
.transform(babelify);
4648

4749
return browserifyBundle.bundle()
4850
.on('log', gutil.log.bind(gutil, 'Browserify Log'))
@@ -51,7 +53,7 @@ function compileES6Bundles(browserifyBundles, minify) {
5153
.pipe(replace(/@VERSION@/g, GLOBAL.config.version))
5254

5355
// If this is a production build - minify JS
54-
.pipe(gulpif(GLOBAL.config.env == 'prod', streamify(uglify())))
56+
.pipe(gulpif(GLOBAL.config.env === 'prod', streamify(uglify())))
5557
.pipe(license(GLOBAL.config.license, GLOBAL.config.licenseOptions))
5658
.pipe(gulp.dest(bundle.dest));
5759
});
@@ -82,7 +84,7 @@ function generateES6Bundles(srcPath) {
8284
browserifyBundles.push({
8385
srcPath: './' + filepath,
8486
outputFilename: outputFilename,
85-
dest: path.join(GLOBAL.config.dest, relativeDirectory),
87+
dest: path.join(GLOBAL.config.dest, relativeDirectory)
8688
});
8789
});
8890

@@ -111,6 +113,25 @@ gulp.task('scripts:es6', ['scripts:eslint'], function(cb) {
111113
cb();
112114
});
113115

116+
// TODO: Add linting for es5 JS
117+
gulp.task('scripts:es5', [], function() {
118+
return gulp.src([GLOBAL.config.src + '/**/*.es5.js'])
119+
.pipe(gulpif(GLOBAL.config.env !== 'prod', sourcemaps.init()))
120+
121+
// Remove the .es5 from the end of the file name using gulp-rename
122+
.pipe(rename(function(filePath) {
123+
var fileExtensionLength = '.es5'.length;
124+
filePath.basename = filePath.basename.substr(
125+
0, filePath.basename.length - fileExtensionLength);
126+
}))
127+
128+
.pipe(replace(/@VERSION@/g, GLOBAL.config.version))
129+
.pipe(gulpif(GLOBAL.config.env === 'prod', uglify()))
130+
.pipe(license(GLOBAL.config.license, GLOBAL.config.licenseOptions))
131+
.pipe(gulpif(GLOBAL.config.env !== 'prod', sourcemaps.write()))
132+
.pipe(gulp.dest(GLOBAL.config.dest));
133+
});
134+
114135
// Delete any files currently in the scripts destination path
115136
gulp.task('scripts:clean', function(cb) {
116137
del([GLOBAL.config.dest + '/**/*.js'], {dot: true})
@@ -122,7 +143,10 @@ gulp.task('scripts:clean', function(cb) {
122143
gulp.task('scripts', function(cb) {
123144
runSequence(
124145
'scripts:clean',
125-
['scripts:es6'],
146+
[
147+
'scripts:es6',
148+
'scripts:es5'
149+
],
126150
cb
127151
);
128152
});

‎gulp-tasks/styles.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ var AUTOPREFIXER_BROWSERS = [
3434
'opera >= 23',
3535
'ios >= 7',
3636
'android >= 4.4',
37-
'bb >= 10',
37+
'bb >= 10'
3838
];
3939

4040
gulp.task('styles:watch', function() {
@@ -53,12 +53,12 @@ gulp.task('styles:sass', function() {
5353
var stream = gulp.src(GLOBAL.config.src + '/**/*.scss')
5454

5555
// Only create sourcemaps for dev
56-
.pipe(gulpif(GLOBAL.config.env != 'prod', sourcemaps.init()))
56+
.pipe(gulpif(GLOBAL.config.env !== 'prod', sourcemaps.init()))
5757
.pipe(sass())
5858
.pipe(autoprefixer(AUTOPREFIXER_BROWSERS))
59-
.pipe(minifyCSS())
59+
.pipe(gulpif(GLOBAL.config.env === 'prod', minifyCSS()))
6060
.pipe(license(GLOBAL.config.license, GLOBAL.config.licenseOptions))
61-
.pipe(gulpif(GLOBAL.config.env != 'prod', sourcemaps.write()))
61+
.pipe(gulpif(GLOBAL.config.env !== 'prod', sourcemaps.write()))
6262
.pipe(gulp.dest(GLOBAL.config.dest));
6363

6464
return stream;

‎gulp-tasks/third_party.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,5 +23,5 @@ gulp.task('third_party:watch', function() {
2323

2424
gulp.task('third_party', function() {
2525
gulp.src(GLOBAL.config.src + '/third_party/**/*.*')
26-
.pipe(gulp.dest(GLOBAL.config.dest + '/third_party'))
26+
.pipe(gulp.dest(GLOBAL.config.dest + '/third_party'));
2727
});

‎package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010
"babelify": "^6.3.0",
1111
"browserify": "^11.2.0",
1212
"del": "^2.0.2",
13+
"express": "^4.13.3",
14+
"express-handlebars": "^2.0.1",
1315
"glob": "^5.0.15",
1416
"gulp": "^3.9.0",
1517
"gulp-autoprefixer": "^3.1.0",
@@ -20,6 +22,7 @@
2022
"gulp-license": "^1.0.0",
2123
"gulp-minify-css": "^1.2.1",
2224
"gulp-minify-html": "^1.0.4",
25+
"gulp-rename": "^1.2.2",
2326
"gulp-replace": "^0.5.4",
2427
"gulp-sass": "^2.0.4",
2528
"gulp-sourcemaps": "^1.6.0",

‎server/app.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
'use strict';
2+
3+
var serverController = require('./controllers/server-controller');
4+
var StaticPageController = require('./controllers/static-page-controller');
5+
6+
serverController.addEndpoint('/*', new StaticPageController());

‎server/controllers/server-controller.js

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
var path = require('path');
2+
var express = require('express');
3+
var exphbs = require('express-handlebars');
4+
5+
function ServerController() {
6+
var expressApp = express();
7+
var expressServer = this.setUpServer(expressApp);
8+
9+
this.getExpressApp = function() {
10+
return expressApp;
11+
};
12+
13+
this.getExpressServer = function() {
14+
return expressServer;
15+
};
16+
}
17+
18+
ServerController.prototype.setUpServer = function(app) {
19+
app.set('views', path.join(__dirname, '/../views'));
20+
app.engine('handlebars', exphbs({
21+
defaultLayout: 'default',
22+
layoutsDir: path.join(__dirname, '/../layouts')
23+
}));
24+
app.set('view engine', 'handlebars');
25+
26+
// Should be set POST login auth
27+
app.use('/manifest.json',
28+
express.static(path.join(__dirname + '/../../dist/manifest.json')));
29+
app.use('/favicon.ico',
30+
express.static(path.join(__dirname + '/../../dist/favicon.ico')));
31+
app.use('/sw.js',
32+
express.static(path.join(__dirname + '/../../dist/scripts/sw.js')));
33+
app.use('/styles',
34+
express.static(path.join(__dirname + '/../../dist/styles')));
35+
app.use('/images',
36+
express.static(path.join(__dirname + '/../../dist/images')));
37+
app.use('/scripts',
38+
express.static(path.join(__dirname + '/../../dist/scripts')));
39+
app.use('/third_party',
40+
express.static(path.join(__dirname + '/../../dist/third_party')));
41+
42+
console.log('Starting server on 3123');
43+
return app.listen('3123');
44+
};
45+
46+
ServerController.prototype.addEndpoint = function(endpoint, controller) {
47+
this.getExpressApp().get(endpoint, function(req, res) {
48+
controller.onRequest(req, res);
49+
});
50+
};
51+
52+
module.exports = new ServerController();

‎server/controllers/static-page-controller.js

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
'use strict';
2+
3+
function StaticPageController() {
4+
5+
}
6+
7+
StaticPageController.prototype.onRequest = function(req, res) {
8+
switch (req.path) {
9+
case '/':
10+
res.render('index', {
11+
inlineStyles: ['/styles/core.css'],
12+
remoteStyles: [],
13+
inlineScripts: [],
14+
remoteScripts: ['/scripts/static-page.js']
15+
});
16+
break;
17+
case '/url-1':
18+
res.render('url-1', {
19+
inlineStyles: ['/styles/core.css'],
20+
remoteStyles: [],
21+
inlineScripts: [],
22+
remoteScripts: ['/scripts/static-page.js']
23+
});
24+
break;
25+
case '/url-2':
26+
res.render('url-2', {
27+
inlineStyles: ['/styles/core.css'],
28+
remoteStyles: [],
29+
inlineScripts: [],
30+
remoteScripts: ['/scripts/static-page.js']
31+
});
32+
break;
33+
default:
34+
res.status(404).send();
35+
break;
36+
}
37+
};
38+
39+
module.exports = StaticPageController;

‎server/layouts/default.handlebars

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>App Shell</title>
6+
7+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
<meta id="theme-color" name="theme-color" content="#4527A0">
10+
11+
<link rel="manifest" href="/manifest.json">
12+
<link rel="icon" href="/images/chrome-touch-icon-192x192.png" sizes="192x192" type="image/png">
13+
14+
{{#each inlineStyles}}
15+
<!-- TODO: Inline these styles -->
16+
<link rel="stylesheet" type="text/css" href="{{this}}">
17+
{{~/each}}
18+
</head>
19+
<body>
20+
21+
<header class="header">
22+
<button tabindex="-1" class="header__menu js-toggle-menu">
23+
Toggle nav menu
24+
</button>
25+
26+
<h1 class="header__title">App shell</h1>
27+
</header>
28+
29+
<main class="main js-main" aria-role="main">
30+
{{{body}}}
31+
</main>
32+
33+
<section class="side-nav js-side-nav">
34+
<div class="side-nav__content js-side-nav-content">
35+
<div class="side-nav__header">
36+
<h1 class="side-nav__title">App shell</h1>
37+
</div>
38+
39+
<div class="side-nav__body">
40+
<a tabindex="-1" class="side-nav__blog-post" href="/">Index</a>
41+
<a tabindex="-1" class="side-nav__blog-post" href="/url-1">URL 1</a>
42+
<a tabindex="-1" class="side-nav__blog-post" href="/url-2">URL 2</a>
43+
</div>
44+
45+
<div class="side-nav__version">Version @VERSION@</div>
46+
</div>
47+
</section>
48+
49+
{{#each remoteScripts}}
50+
<script src="{{this}}" async></script>
51+
{{~/each}}
52+
</body>
53+
</html>

‎server/views/index.handlebars

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<h1>Index</h1>

0 commit comments

Comments
 (0)