refactor(github-pages-deploy): reuse webpack build --base-href logic

Reuse basehref handling logic from webpack build task

Author: dzonatan

addon/ng2/commands/build.ts

@@ -2,7 +2,7 @@ import * as Command from 'ember-cli/lib/models/command';
 import * as WebpackBuild from '../tasks/build-webpack';
 import * as WebpackBuildWatch from '../tasks/build-webpack-watch';
 
-interface BuildOptions {
+export interface BuildOptions {
   target?: string;
   environment?: string;
   outputPath?: string;

addon/ng2/commands/github-pages-deploy.ts

@@ -11,8 +11,6 @@ import * as CreateGithubRepo from '../tasks/create-github-repo';
 import { CliConfig } from '../models/config';
 import { oneLine } from 'common-tags';
 
-const fsReadFile = Promise.denodeify(fs.readFile);
-const fsWriteFile = Promise.denodeify(fs.writeFile);
 const fsReadDir = Promise.denodeify(fs.readdir);
 const fsCopy = Promise.denodeify(fse.copy);
 
@@ -115,11 +113,19 @@ module.exports = Command.extend({
       outputPath: outDir
     });
 
+    /**
+     * BaseHref tag setting logic:
+     * First, use --base-href flag value if provided.
+     * Else if --user-page is true, then keep baseHref default as declared in index.html.
+     * Otherwise auto-replace with `/${projectName}/`.
+     */
+    const baseHref = options.baseHref || (options.userPage ? null : `/${projectName}/`);
+
     const buildOptions = {
       target: options.target,
       environment: options.environment,
       outputPath: outDir,
-      baseHref: options.baseHref,
+      baseHref: baseHref,
     };
 
     const createGithubRepoTask = new CreateGithubRepo({
@@ -140,7 +146,7 @@ module.exports = Command.extend({
       .then(createGitHubRepoIfNeeded)
       .then(checkoutGhPages)
       .then(copyFiles)
-      .then(updateBaseHref)
+      .then(createNotFoundPage)
       .then(addAndCommit)
       .then(returnStartingBranch)
       .then(pushToGitRepo)
@@ -208,15 +214,10 @@ module.exports = Command.extend({
         })));
     }
 
-    function updateBaseHref() {
-      if (options.userPage) { return Promise.resolve(); }
-      let indexHtml = path.join(root, 'index.html');
-      return fsReadFile(indexHtml, 'utf8')
-        .then((data) => data.replace(/<base href="\/">/g, `<base href="/${projectName}/">`))
-        .then((data) => {
-          fsWriteFile(indexHtml, data, 'utf8');
-          fsWriteFile(path.join(root, '404.html'), data, 'utf8');
-        });
+    function createNotFoundPage() {
+      const indexHtml = path.join(root, 'index.html');
+      const notFoundPage = path.join(root, '404.html');
+      return fsCopy(indexHtml, notFoundPage);
     }
 
     function addAndCommit() {

addon/ng2/models/webpack-build-common.ts

@@ -7,7 +7,12 @@ import * as atl from 'awesome-typescript-loader';
 import { findLazyModules } from './find-lazy-modules';
 import { BaseHrefWebpackPlugin } from '../utilities/base-href-webpack-plugin';
 
-export function getWebpackCommonConfig(projectRoot: string, environment: string, appConfig: any, baseHref: string) {
+export function getWebpackCommonConfig(
+  projectRoot: string,
+  environment: string,
+  appConfig: any,
+  baseHref: string
+) {
 
   const appRoot = path.resolve(projectRoot, appConfig.root);
   const appMain = path.resolve(appRoot, appConfig.main);

addon/ng2/models/webpack-config.ts

@@ -28,7 +28,12 @@ export class NgCliWebpackConfig {
 
     appConfig.outDir = outputDir || appConfig.outDir;
 
-    this.baseConfig = getWebpackCommonConfig(this.ngCliProject.root, environment, appConfig, baseHref);
+    this.baseConfig = getWebpackCommonConfig(
+      this.ngCliProject.root,
+      environment,
+      appConfig,
+      baseHref
+    );
     this.devConfigPartial = getWebpackDevConfigPartial(this.ngCliProject.root, appConfig);
     this.prodConfigPartial = getWebpackProdConfigPartial(this.ngCliProject.root, appConfig);
 

addon/ng2/tasks/build-webpack-watch.ts

@@ -5,12 +5,12 @@ import * as webpack from 'webpack';
 import * as ProgressPlugin from 'webpack/lib/ProgressPlugin';
 import { NgCliWebpackConfig } from '../models/webpack-config';
 import { webpackOutputOptions } from '../models/';
-import { ServeTaskOptions } from '../commands/serve';
+import { BuildOptions } from '../commands/build';
 
 let lastHash: any = null;
 
 module.exports = Task.extend({
-  run: function(runTaskOptions: ServeTaskOptions) {
+  run: function(runTaskOptions: BuildOptions) {
 
     const project = this.cliProject;
 

addon/ng2/tasks/build-webpack.ts

@@ -2,7 +2,7 @@ import * as rimraf from 'rimraf';
 import * as path from 'path';
 import * as Task from 'ember-cli/lib/models/task';
 import * as webpack from 'webpack';
-import { ServeTaskOptions } from '../commands/serve';
+import { BuildOptions } from '../commands/build';
 import { NgCliWebpackConfig } from '../models/webpack-config';
 import { webpackOutputOptions } from '../models/';
 
@@ -11,7 +11,7 @@ let lastHash: any = null;
 
 module.exports = Task.extend({
   // Options: String outputPath
-  run: function (runTaskOptions: ServeTaskOptions) {
+  run: function (runTaskOptions: BuildOptions) {
 
     const project = this.cliProject;
 

addon/ng2/utilities/base-href-webpack-plugin.ts

@@ -12,21 +12,30 @@ export class BaseHrefWebpackPlugin {
     }
 
     compiler.plugin('compilation', (compilation) => {
-      compilation.plugin('html-webpack-plugin-before-html-processing', (htmlPluginData, callback) => {
-        // Check if base tag already exists
-        const baseTagRegex = /<base.*?>/i;
-        const baseTagMatches = htmlPluginData.html.match(baseTagRegex);
-        if (!baseTagMatches) {
-          // Insert it in top of the head if not exist
-          htmlPluginData.html = htmlPluginData.html.replace(/<head>/i, '$&' + `<base href="${this.options.baseHref}">`);
-        } else {
-          // Replace only href attribute if exists
-          const modifiedBaseTag = baseTagMatches[0].replace(/href="\S+"/i, `href="${this.options.baseHref}"`);
-          htmlPluginData.html = htmlPluginData.html.replace(baseTagRegex, modifiedBaseTag);
-        }
+      compilation.plugin(
+        'html-webpack-plugin-before-html-processing', 
+        (htmlPluginData, callback) => {
+          // Check if base tag already exists
+          const baseTagRegex = /<base.*?>/i;
+          const baseTagMatches = htmlPluginData.html.match(baseTagRegex);
+          if (!baseTagMatches) {
+            // Insert it in top of the head if not exist
+            htmlPluginData.html = htmlPluginData.html.replace(
+              /<head>/i, '$&' + `<base href="${this.options.baseHref}">`
+            );
+          } else {
+            // Replace only href attribute if exists
+            const modifiedBaseTag = baseTagMatches[0].replace(
+              /href="\S+"/i, `href="${this.options.baseHref}"`
+            );
+            htmlPluginData.html = htmlPluginData.html.replace(baseTagRegex, modifiedBaseTag);
+          }
 
-        callback(null, htmlPluginData);
-      });
+          callback(null, htmlPluginData);
+        }
+      );
     });
+
+    
   }
-}
+}

tests/acceptance/github-pages-deploy.spec.js

@@ -14,7 +14,6 @@ var https = require('https');
 var SilentError = require('silent-error');
 
 const expect = chai.expect;
-const fsReadFile = Promise.denodeify(fs.readFile);
 const fsWriteFile = Promise.denodeify(fs.writeFile);
 const fsMkdir = Promise.denodeify(fs.mkdir);
 
@@ -67,7 +66,7 @@ describe('Acceptance: ng github-pages:deploy', function() {
       });
   });
 
-  it('should deploy with defaults to existing remote', function() {
+  it('should deploy with defaults to existing remote', function () {
     execStub.addExecSuccess('git status --porcelain')
       .addExecSuccess('git rev-parse --abbrev-ref HEAD', initialBranch)
       .addExecSuccess('git remote -v', remote)
@@ -78,12 +77,7 @@ describe('Acceptance: ng github-pages:deploy', function() {
       .addExecSuccess(`git push origin ${ghPagesBranch}:${ghPagesBranch}`)
       .addExecSuccess('git remote -v', remote);
 
-    return ng(['github-pages:deploy', '--skip-build'])
-      .then(() => {
-        let indexHtml = path.join(process.cwd(), 'index.html');
-        return fsReadFile(indexHtml, 'utf8');
-      })
-      .then((data) => expect(data.search(`<base href="/${project}/">`)).to.not.equal(-1));
+    return ng(['github-pages:deploy', '--skip-build']);
   });
 
   it('should deploy with changed defaults', function() {
@@ -100,13 +94,7 @@ describe('Acceptance: ng github-pages:deploy', function() {
       .addExecSuccess(`git push origin ${ghPagesBranch}:${userPageBranch}`)
       .addExecSuccess('git remote -v', remote);
 
-    return ng(['github-pages:deploy', '--skip-build', `--message=${message}`,
-                '--user-page'])
-      .then(() => {
-        let indexHtml = path.join(process.cwd(), 'index.html');
-        return fsReadFile(indexHtml, 'utf8');
-      })
-      .then((data) => expect(data.search('<base href="/">')).to.not.equal(-1));
+    return ng(['github-pages:deploy', '--skip-build', `--message=${message}`, '--user-page']);
   });
 
   it('should create branch if needed', function() {
@@ -125,12 +113,7 @@ describe('Acceptance: ng github-pages:deploy', function() {
       .addExecSuccess(`git push origin ${ghPagesBranch}:${ghPagesBranch}`)
       .addExecSuccess('git remote -v', remote);
 
-    return ng(['github-pages:deploy', '--skip-build'])
-      .then(() => {
-        let indexHtml = path.join(process.cwd(), 'index.html');
-        return fsReadFile(indexHtml, 'utf8');
-      })
-      .then((data) => expect(data.search(`<base href="/${project}/">`)).to.not.equal(-1));
+    return ng(['github-pages:deploy', '--skip-build']);
   });
 
   it('should create repo if needed', function() {
@@ -183,11 +166,6 @@ describe('Acceptance: ng github-pages:deploy', function() {
 
     return ng(['github-pages:deploy', '--skip-build', `--gh-token=${token}`,
       `--gh-username=${username}`])
-      .then(() => {
-        let indexHtml = path.join(process.cwd(), 'index.html');
-        return fsReadFile(indexHtml, 'utf8');
-      })
-      .then((data) => expect(data.search(`<base href="/${project}/">`)).to.not.equal(-1))
       .then(() => httpsStub.restore());
   });