feat: externalize images and sass to own asset pipeline to azure blob…

… storage

Merge branch 'feat/assets-pipeline'

* feat/assets-pipeline:
  style(pipeline-yaml): move pool obj to root
  pipeline: add upload assets to blob storage account
  compile-sass: fix source path, adjust writes, move outside assets/
  test: re-enable all tests. match homepage against heading
  style: use strict
  sass-middleware: use only in DEV. Other envs use static files or cdn/storage
  force-https: only in prod
  dockerfile: add assets dir
  assets-url: use app service hostname as failback before localhost
  express: use static assets in prod too - in case CDN fails
  healthcheck: add ASSETS_BASE_URL and NODE_ENV
  pass css file as variable to view
  add compile sass script
  style: rename ASSETS_DIR to assetsDir
  ignore compiled css files
  app: use sass instead of plain css
  dep: add node-sass and node-sass-middleware
  move assets dir up 1 level

.gitignore

@@ -1,4 +1,7 @@
 coverage/
 node_modules/
 .DS_Store
-*.azcli
+*.azcli
+
+# Compiled CSS
+assets/css/*.css

Dockerfile

@@ -7,6 +7,7 @@ WORKDIR /workspace
 COPY ["package.json", "package-lock.json", "./"]
 RUN npm install --production
 
+COPY ["assets/", "/workspace/assets/"]
 COPY ["app/", "/workspace/app/"]
 
 EXPOSE ${PORT:-80}

app/app.js

@@ -11,8 +11,39 @@ const forceHttps = require('./middleware/force-https')
 const bodyParser = require('body-parser')
 const healthcheck = require('standard-healthcheck')
 
+const PORT = process.env.PORT || '3000'
+const IS_DEVELOPMENT = process.env.NODE_ENV === 'development'
+const AZURE_APP_SERVICE_HOSTNAME = process.env.WEBSITE_HOSTNAME
+	? `https://${process.env.WEBSITE_HOSTNAME}`
+	: false
+const ASSETS_BASE_URL = process.env.ASSETS_BASE_URL
+	|| AZURE_APP_SERVICE_HOSTNAME
+	|| `http://localhost:${PORT}`
+
 let app = express()
 
+// --- Static Assets ---
+
+const assetsDir = path.join(__dirname, './../assets')
+const cssFile = IS_DEVELOPMENT
+	? 'styles.css'
+	: `styles-${process.env.npm_package_version}.css`
+const cssFileUrl = `${ASSETS_BASE_URL}/css/${cssFile}`
+
+if (IS_DEVELOPMENT) {
+	const sassMiddleware = require('node-sass-middleware')
+	app.use(sassMiddleware({
+		src: `${assetsDir}/css`,
+		dest: `${assetsDir}/css`,
+		debug: true,
+		outputStyle: 'compressed',
+		prefix:  '/css'
+	}))
+}
+
+app.use('/css', express.static(`${assetsDir}/css`))
+app.use('/images', express.static(`${assetsDir}/images`))
+
 // --- Middleware ---
 
 app.use(forceHttps)
@@ -22,15 +53,16 @@ app.use(monitor)
 
 // --- Views ---
 
-app.use(express.static(path.join(__dirname, 'assets')))
 app.set('views', path.join(__dirname, '/views'))
 app.set('view engine', 'hbs')
 app.set('view options', { layout: 'layout' })
 
 app.get('/', (req, res) => {
 	res.render('home', {
 		title: 'Node.js on Azure Demo',
-		version: 'v' + process.env.npm_package_version
+		version: 'v' + process.env.npm_package_version,
+		cssFileUrl: cssFileUrl,
+		assetsBaseUrl: ASSETS_BASE_URL
 	})
 })
 
@@ -49,7 +81,7 @@ app.post('/webhooks/test', bodyParser.json(), (req, res) => {
 app.get('/health', healthcheck({
 	version: process.env.npm_package_version,
 	description: process.env.npm_package_description,
-	includeEnv: ['WEBSITE_HOSTNAME', 'WEBSITE_INSTANCE_ID']
+	includeEnv: ['WEBSITE_HOSTNAME', 'WEBSITE_INSTANCE_ID', 'ASSETS_BASE_URL', 'NODE_ENV']
 }))
 
 app.use((req, res, next) => {

app/app.test.js

@@ -4,8 +4,6 @@
 const app = require('./app')
 const request = require('request')
 const http = require('http')
-const path = require('path')
-const fs = require('fs')
 
 const port = process.env.PORT || 3001
 
@@ -21,9 +19,9 @@ describe ('app', () => {
   })
 
   describe ('GET /', () => {
-    fit (`returns 'Hello World!`, (done) => {
+    it (`returns Homepage`, (done) => {
       const url = getUrl('/')
-      const content = fs.readFileSync(path.join(__dirname, '/views/home.hbs')).toString()
+      const content = 'Node.js on Azure Demo'
       request.get(url, (error, response, body) => {
         expect(response.statusCode).toBe(200)
         expect(response.body.includes(content)).toBe(true)

app/middleware/force-https.js

@@ -1,7 +1,7 @@
 'use strict'
 
 function isDeployed () {
-	return process.env.NODE_ENV !== 'development' && process.env.NODE_ENV !== 'test'
+	return process.env.NODE_ENV === 'production'
 }
 
 function https (req, res, next) {

app/views/home.hbs

@@ -1,6 +1,6 @@
 <div class="logos">
-	<img src="/images/nodejs-logo.svg" class="img-logo img-logo--nodejs">
-	<img src="/images/msft-azure-logo.svg" class="img-logo img-logo--azure">
+	<a href="https://nodejs.org/" target="_blank"><img src="{{ assetsBaseUrl }}/images/nodejs-logo.svg" class="img-logo img-logo--nodejs"></a>
+	<a href="https://azure.com" target="_blank"><img src="{{ assetsBaseUrl }}/images/msft-azure-logo.svg" class="img-logo img-logo--azure"></a>
 </div>
 
 <div class="row">

app/views/layout.hbs

@@ -4,108 +4,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
 	<title>{{ title }}</title>
-	<style>
-		body {
-			font-family: Helvetica, sans-serif;
-			line-height: 1.3;
-			color: #333;
-		}
-
-		a:link, a:visited {
-			color: #044b7f;
-		}
-
-		section {
-			width: 50%;
-			max-width: 1000px;
-			margin: 1em auto;
-			border: 1px solid transparent;
-		}
-
-		h1 {
-			margin: 1em 0;
-			font-size: 2rem;
-			color: #222;
-		}
-
-		h1 .version {
-			color: #999;
-			font-weight: normal;
-		}
-
-		h2 {
-			margin: 2em 0 1em 0;
-		}
-
-		h3 {
-			font-weight: 500;
-		}
-
-		ul {
-			padding: 0;
-			margin: 0;
-		}
-
-		li {
-			margin-bottom: 1em;
-			list-style-type: none;
-		}
-
-		.row {
-			display: flex;
-			flex-direction: row;
-			flex-wrap: wrap;
-			width: 100%;
-			margin-left: auto;
-			margin-right: auto;
-
-		}
-
-		.column {
-			display: flex;
-			flex-direction: column;
-			flex-basis: 100%;
-			flex: 1;
-		}
-
-		.logos {
-			margin-bottom: 3em;
-		}
-		.img-logo {
-			display: inline-block;
-			vertical-align: top;
-		}
-
-		.img-logo--nodejs {
-			height: 70px;
-		}
-
-		.img-logo--azure {
-			margin-left: 20px;
-			margin-top: 5px;
-			height: 40px;
-		}
-
-		footer {
-			margin: 3rem auto;
-			padding-top: 1rem;
-			border-top: 1px solid #dcdcdc;
-			font-size: 0.85rem;
-			line-height: 1.6em;
-			color: #999;
-			text-align: left;
-		}
-
-		footer p {
-			margin: 1em 0 2em;
-		}
-
-		footer a:link,
-		footer a:visited {
-			color: #999;
-		}
-
-	</style>
+	<link rel="stylesheet" href="{{ cssFileUrl }}">
 </head>
 <body>
 	<section>

assets/css/styles.scss

@@ -0,0 +1,103 @@
+$light-text-color: #999;
+
+body {
+	font-family: Helvetica, sans-serif;
+	line-height: 1.3;
+	color: #333;
+}
+
+a:link, a:visited {
+	color: #044b7f;
+}
+
+section {
+	width: 50%;
+	max-width: 1000px;
+	margin: 1em auto;
+	border: 1px solid transparent;
+}
+
+h1 {
+	margin: 1em 0;
+	font-size: 2rem;
+	color: #222;
+
+	.version {
+		color: $light-text-color;
+		font-weight: normal;
+	}
+}
+
+h2 {
+	margin: 2em 0 1em 0;
+}
+
+h3 {
+	font-weight: 500;
+}
+
+ul {
+	padding: 0;
+	margin: 0;
+}
+
+li {
+	margin-bottom: 1em;
+	list-style-type: none;
+}
+
+.row {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	width: 100%;
+	margin-left: auto;
+	margin-right: auto;
+
+}
+
+.column {
+	display: flex;
+	flex-direction: column;
+	flex-basis: 100%;
+	flex: 1;
+}
+
+.logos {
+	margin-bottom: 3em;
+}
+.img-logo {
+	display: inline-block;
+	vertical-align: top;
+}
+
+.img-logo--nodejs {
+	height: 70px;
+}
+
+.img-logo--azure {
+	margin-left: 20px;
+	margin-top: 5px;
+	height: 40px;
+}
+
+footer {
+	margin: 3rem auto;
+	padding-top: 1rem;
+	border-top: 1px solid #dcdcdc;
+	font-size: 0.85rem;
+	line-height: 1.6em;
+	color: $light-text-color;
+	text-align: left;
+}
+
+footer {
+	p {
+		margin: 1em 0 2em;
+	}
+
+	a:link,
+	a:visited {
+		color: $light-text-color;
+	}
+}