The reason for having a microsite in place is so we have something in place as a fallback if a server fails and the banks main site goes down. The servers that hold the microsites will then takeover so that users hitting the bank’s production URL will still see a website with the bank’s logo and their online banking login.
How To
- Pull the existing repo from Github - git@github.com:Banno/microsites.git
- Create a new branch to work on.
git checkout -b yourFIdomain-olb
- Create a folder named after the FI’s url. If their domain includes www. then your folder should also include www.
- Once finished either copy an existing index.html file from another repo or copy this HTML into a new index.html into the new project folder. {% raw %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Our website is temporarily unavailable.</title>
<meta name="viewport" content="width# device-width">
<link rel="stylesheet" href="https://s3.amazonaws.com/bannomicrosites/common/style.css">
</head>
<body>
<div class="container">
<div class="logo">
<img src="https://s3.amazonaws.com/bannomicrosites/www.foldername.com/logo.png">
<h1>Our website is temporarily unavailable.</h1>
<hr>
<h2>Internet Account Access</h2>
<div class="olb-container">
</div>
</div>
</div>
</body>
</html>
{% endraw %} 5. Change the file path to the logo
- Note - With the logo, ALL you need to change is the folder name, and possibly the image filename. The rest of the src# "" tag NEEDS to stay as-is. it will appear broken at first when you test in your browser, but once everything gets pushed live it will show up, if done correctly.
- Grab the logo.png file that should have been created in the sites repo, paste that into the same folder as the index.html
- Add the form code or iframe into the .olb-container div.
- Add any javascript that is needed
- View the code index.html file in a browser to be sure all looks good and is working correctly (again the logo will appear broken when local testing, just checking that the olb code works).
- Git add, commit, push files to Github.
- Create Pull Request - DO NOT merge the microsite. Take the link for the PR and put it on the Trello card–you can either put it in the comments, tagging the PC, or go down to the bottom of the lists and add it to the “Test Microsite” checkbox.
- When a site is launching, either the PC will provide the link to the developer that’s doing final tests, or the developer can get the link from where you placed it in the checklist. They will merge it at that time, and deploy it with Keanu.
- When the microsite is deployed, you will be able to view it by placing /temporarilyunavailable at the end of your domain URL.
Auto-Generate Microsite with Gulp
** NOTE: This update is designed for the most recent template site update with all updates to package.json and additional environment variables built into the system. If your project does not have these built in you will need to manually add in the domain name of the AWS path in the microsite.mustache file below. by replacing the section. **
The following will explain how to add tasks to your project that will auto-generate the microsite for you in its own folder. You must add the tasks to the existing gulpfile.js, create a microsite.mustache file using the code below, and a microsite.scss file in your custom SCSS folder. This scss file will be all of the styles that you want to be injected and minified into the header of the index.html that is generated. You must also set a variable in your package.json file to denote what level of microsite package the FI has purchased. It should default to “basic” and if they purchase “premium” extra styling and javascript will be enabled in the generated microsite file.
How To
First, add the variable below to your package.json file. It can go pretty much anywhere, but it might make the most sense to put it between the existing gaCode and bankLocation variables.
"microsite": "basic",
Create a microsite.mustache file. It should look something like this: {% raw %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Our website is temporarily unavailable.</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://s3.amazonaws.com/bannomicrosites/common/style.css">
<style class="inject"></style>
<!-- @if purchase=='premium' -->
<script src="jquery.min.js"></script>
<script src="script.min.js"></script>
<!-- @endif -->
</head>
<body>
<div class="container">
<div class="logo">
<img src="https://s3.amazonaws.com/bannomicrosites/<!-- @echo domain -->/logo.png">
{{! <img src="logo.png"> }}
</div>
<div><br></div>
<h1>Our website is temporarily unavailable.</h1>
<hr>
<div class="olb-container">
{{> partials/olb }}
</div>
</div>
</body>
</html>
{% endraw %}
Also create a microsite.scss file to style your microsite as needed. File should be saved in src/scss/custom, update main.scss with this file and path.
/* @if purchase=='premium' */
@import "../main";
body { font-family:$font-family-sans-serif; background:$body-bg; color:$body-color; }
img { max-width:100%; }
input { border:1px solid $input-border-color; padding:$input-padding-y $input-padding-x; line-height:$input-btn-line-height; }
/* @endif */
.sr-only { visibility: hidden; position:absolute; height:1px; width:1px; opacity:0; }
.logo { margin:0 auto; max-width:200px; }
.container { width:100%; max-width:700px; }
.olb-container {
/* put your custom microsite styles here */
}
Your Online Banking section for the microsite is generated from whatever you have in the olb.mustache file by default–but this can also be updated easily in your microsite.mustache file. And if there are parts of the the old .mustache file you want to exclude or include only in or from the microsite you can use the environment variable conditionals (the same way you have dev and production content):
<!-- @if NODE_ENV!='microsite' -->
This is content only put into the production/dev files, excluded from microsite
<!-- @endif -->
<!-- @if NODE_ENV=='microsite' -->
This is content that will only show in the microsite
<!-- @endif -->
Simply run gulp microsite to generate your microsite in the /development/microsite folder. You can also run gulp microsite-watch to have changes live compile to get it just right.
Here is where everything goes:
microsite.mustache = /src/templates/microsite.mustache
microsite.scss = /src/scss/custom/microsite.scss
You will also want to update your .gitignore file to include development/microsite so that those are not added to the repo unecessarily.
The files will need to be copied from the project once you have completed them and added to and uploaded to the normal microsite repo.
Additionally, in your gulpfile, at the very top underneath where all of your initial variables are defined, you will want to update the environment variables so that the site’s domain name is correctly added the amazon AWS file path: Note the addition of the: var microsite = pkg.microsite; and var microdomain = pkg.url.prod; and the new environment variable for “micro”.
//*Updated environement variables
var font1 = pkg.baseFont;
var font2 = pkg.altFont;
var font3 = pkg.optionalFont;
var gaCode = pkg.gaCode;
var fontString = font1;
var microsite = pkg.microsite;
var microdomain = pkg.url.prod;
if(microdomain.indexOf("www") <= -1) {
microdomain = "www."+microdomain;
}
if(font2) { fontString = fontString + "', '" + pkg.altFont; }
if(font3) { fontString = fontString + "', '" + pkg.optionalFont; }
var siteTitle = pkg.site;
var siteLocation = pkg.bankLocation;
var environmentVar = {
dev: {
context: {
NODE_ENV: 'dev',
DEBUG: true,
site: siteTitle,
location: siteLocation,
fonts: fontString,
analytics: gaCode,
purchase: microsite
}
},
prod: {
context: {
NODE_ENV: 'production',
DEBUG: true,
site: siteTitle,
location: siteLocation,
fonts: fontString,
analytics: gaCode,
purchase: microsite
}
},
micro: {
context: {
NODE_ENV: 'microsite',
domain: microdomain,
purchase: microsite
}
}
}
// =====================================================================
//* microsite tasks ====================================================*/
gulp.task('microsite-watch', ['microsite'], function() {
browserSync.init({
injectChanges: true,
server: {
baseDir: "./microsite/",
index: "index.html"
},
// Need to update this to include css files to inject i think
files: ['./src/templates/microsite.mustache','*.html', '*.css', '*.js', '*.{gif,jpg,png,svg}']
});
// HTML Files
gulp.watch(["./src/templates/partials/olb.mustache"],['mustache','microsite']);
gulp.watch(["./src/templates/microsite.mustache"],['microsite']);
// SASS Files
gulp.watch(["./src/scss/custom/microsite.scss"], ['styles','microsite']);
});
gulp.task("microsite-clean", function(){ return del("./microsite/*"); });
gulp.task("microsite-css", function(){
return gulp.src("src/scss/custom/microsite.scss")
.pipe(sass())
.pipe(rename("microsite.css"))
.pipe(minifyCss())
.pipe(gulp.dest('./microsite'));
});
gulp.task("microsite-scripts", function(){
return gulp.src("src/assets/js/*.min.js")
.pipe(gulp.dest('./microsite'));
});
gulp.task("microsite-logo", function(){
return gulp.src("src/images/*logo*.png")
.pipe(rename('logo.png'))
.pipe(gulp.dest("./microsite"));
});
gulp.task("microsite-compile", function(){
return gulp.src("src/templates/microsite.mustache")
.pipe(plumber({ errorHandler: onError }))
.pipe(mustache({}, { extension: '.html' }))
.pipe(preprocess(environmentVar.micro))
.pipe(rename('index.html'))
.pipe(gulp.dest("./microsite"));
});
gulp.task("microsite-inject", function(){
return gulp.src("microsite/index.html")
.pipe(replace("<style class=\"inject\"></style>", function(s) {
var style = fs.readFileSync('microsite/microsite.css', 'utf8');
return '<style>\n' + style + '\n</style>';
}))
.pipe(gulp.dest("./microsite"));
})
gulp.task('microsite',function() {
runSequence(
"microsite-clean",
"microsite-css",
"microsite-scripts",
"microsite-logo",
"microsite-compile",
"microsite-inject"
)
});
//* microsite tasks ====================================================*/