docs: add support for docs preview builds

Closes #1423

.circleci/config.yml

@@ -108,6 +108,32 @@ jobs:
             - ~/.cache/yarn
             - ~/docs/projects/ngrx.io/node_modules
 
+  docs-preview:
+    <<: *run_in_ngcontainer
+    working_directory: ~/docs/projects/ngrx.io
+    steps:
+      - add_ssh_keys:
+          fingerprints:
+            - 'c9:c2:b4:5e:13:23:b6:6d:d8:29:3e:68:c6:40:9c:ec'
+      - checkout:
+          path: ~/docs
+      - restore_cache:
+          keys:
+            - *cache_key
+            - *docs_cache_key
+      - run:
+          name: Setup Environment Variables
+          command: |
+            echo 'export CI_PREVIEW=true' >> $BASH_ENV
+            echo 'export SHORT_GIT_HASH=$(git rev-parse --short $CIRCLE_SHA1)' >> $BASH_ENV
+            source $BASH_ENV
+      - run: yarn setup 
+      - run: npm rebuild node-sass
+      - run: yarn build-for next --base-href /pr$CIRCLE_PR_NUMBER-$SHORT_GIT_HASH/ --output-path dist/ngrx.io/pr$CIRCLE_PR_NUMBER-$SHORT_GIT_HASH/ && yarn copy-404-page
+      - run: cp -rf src/extra-files/next/. dist/ngrx.io/pr$CIRCLE_PR_NUMBER-$SHORT_GIT_HASH/
+      - run: yarn --cwd ../../ install && yarn --cwd ../../ run deploy:preview
+
+
   deploy:
     <<: *run_in_ngcontainer
     steps:
@@ -130,6 +156,7 @@ workflows:
       - bazel
       - test
       - docs
+      - docs-preview
       - deploy:
           requires:
             - docs

build/deploy-preview.ts

@@ -0,0 +1,16 @@
+import * as tasks from './tasks';
+import { createBuilder } from './util';
+import { packages } from './config';
+
+const deploy = createBuilder([
+  ['Deploy docs preview', tasks.publishDocsPreview],
+  ['Post GitHub Preview URL', tasks.postGithubComment],
+]);
+
+deploy({
+  scope: '@ngrx',
+  packages,
+}).catch(err => {
+  console.error(err);
+  process.exit(1);
+});

build/tasks.ts

@@ -37,9 +37,10 @@ export async function publishToRepo(config: Config) {
   for (let pkg of util.getTopLevelPackages(config)) {
     const SOURCE_DIR = `./dist/bin/modules/${pkg}/npm_package`;
     const REPO_URL = `git@github.com:ngrx/${pkg}-builds.git`;
+    const REPO_DIR = `./tmp/${pkg}`;
 
     console.log(`Preparing and deploying @ngrx/${pkg} to ${REPO_URL}`);
-    await prepareAndPublish(pkg, SOURCE_DIR, REPO_URL);
+    await prepareAndPublish(SOURCE_DIR, REPO_URL, REPO_DIR);
   }
 }
 
@@ -49,39 +50,63 @@ export async function publishToRepo(config: Config) {
 export async function publishDocs() {
   const SOURCE_DIR = `./dist/ngrx.io`;
   const REPO_URL = 'git@github.com:ngrx/ngrx-io-builds.git';
+  const REPO_DIR = `./tmp/docs`;
 
   console.log(`Preparing and deploying docs to ${REPO_URL}`);
-  await prepareAndPublish('docs', SOURCE_DIR, REPO_URL);
+  await prepareAndPublish(SOURCE_DIR, REPO_URL, REPO_DIR);
+}
+
+/**
+ * Deploy docs preview build artifacts
+ */
+export async function publishDocsPreview() {
+  const SOURCE_DIR = './projects/ngrx.io/dist/ngrx.io';
+  const REPO_URL = 'git@github.com:ngrx/ngrx-io-previews.git';
+  const REPO_DIR = `./tmp/docs-preview`;
+  const PR_NUMBER = process.env.CIRCLE_PR_NUMBER || '';
+  const SHORT_SHA = process.env.SHORT_GIT_HASH;
+
+  if (PR_NUMBER) {
+    console.log(
+      `Preparing and deploying docs preview for pr${PR_NUMBER}-${SHORT_SHA} to ${REPO_URL}`
+    );
+    await prepareAndPublish(SOURCE_DIR, REPO_URL, REPO_DIR, false, 0);
+  } else {
+    console.log('No PR number found, skipping preview deployment');
+  }
 }
 
 export async function prepareAndPublish(
-  pkg: string,
   sourceDir: string,
-  repoUrl: string
+  repoUrl: string,
+  repoDir: string,
+  clean = true,
+  depth = 1
 ) {
-  const REPO_DIR = `./tmp/${pkg}`;
-  const SHA = await util.git([`rev-parse HEAD`]);
-  const SHORT_SHA = await util.git([`rev-parse --short HEAD`]);
   const COMMITTER_USER_NAME = await util.git([
     `--no-pager show -s --format='%cN' HEAD`,
   ]);
   const COMMITTER_USER_EMAIL = await util.git([
     `--no-pager show -s --format='%cE' HEAD`,
   ]);
 
-  await util.cmd('rm -rf', [`${REPO_DIR}`]);
-  await util.cmd('mkdir ', [`-p ${REPO_DIR}`]);
-  await process.chdir(`${REPO_DIR}`);
+  await util.cmd('rm -rf', [`${repoDir}`]);
+  await util.cmd('mkdir ', [`-p ${repoDir}`]);
+  await process.chdir(`${repoDir}`);
   await util.git([`init`]);
   await util.git([`remote add origin ${repoUrl}`]);
-  await util.git(['fetch origin master --depth=1']);
+  await util.git([`fetch origin master${depth ? ` --depth=${depth}` : ''}`]);
   await util.git(['checkout origin/master']);
   await util.git(['checkout -b master']);
   await process.chdir('../../');
-  await util.cmd('rm -rf', [`${REPO_DIR}/*`]);
-  await util.git([`log --format="%h %s" -n 1 > ${REPO_DIR}/commit_message`]);
-  await util.cmd('cp', [`-R ${sourceDir}/* ${REPO_DIR}/`]);
-  await process.chdir(`${REPO_DIR}`);
+
+  if (clean) {
+    await util.cmd('rm -rf', [`${repoDir}/*`]);
+  }
+
+  await util.git([`log --format="%h %s" -n 1 > ${repoDir}/commit_message`]);
+  await util.cmd('cp', [`-R ${sourceDir}/* ${repoDir}/`]);
+  await process.chdir(`${repoDir}`);
   await util.git([`config user.name "${COMMITTER_USER_NAME}"`]);
   await util.git([`config user.email "${COMMITTER_USER_EMAIL}"`]);
   await util.git(['add --all']);
@@ -91,3 +116,28 @@ export async function prepareAndPublish(
   await util.git(['push origin master --force']);
   await process.chdir('../../');
 }
+
+export async function postGithubComment() {
+  const PR_NUMBER = process.env.CIRCLE_PR_NUMBER || '';
+  const owner = process.env.CIRCLE_PROJECT_USERNAME;
+
+  if (PR_NUMBER && owner === 'ngrx') {
+    const SHORT_SHA = process.env.SHORT_GIT_HASH;
+    const repo = process.env.CIRCLE_PROJECT_REPONAME;
+    const token = process.env.GITHUB_API_KEY;
+    const octokit = require('@octokit/rest')();
+
+    octokit.authenticate({ type: 'oauth', token });
+
+    const body = `You can preview ${SHORT_SHA} at https://previews.ngrx.io/pr${PR_NUMBER}-${SHORT_SHA}`;
+
+    try {
+      const result = await octokit.issues.createComment({
+        owner,
+        repo,
+        PR_NUMBER,
+        body,
+      });
+    } catch (e) {}
+  }
+}

package.json

@@ -6,6 +6,7 @@
     "precommit": "lint-staged",
     "build": "bazel build ...",
     "deploy:builds": "ts-node ./build/deploy-build.ts",
+    "deploy:preview": "ts-node ./build/deploy-preview.ts",
     "test:unit": "node ./tests.js",
     "test": "nyc yarn run test:unit",
     "clean": "git clean -xdf",
@@ -90,6 +91,7 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^0.10.0",
+    "@octokit/rest": "^15.17.0",
     "@types/fs-extra": "^2.1.0",
     "@types/glob": "^5.0.33",
     "@types/globby": "^8.0.0",

projects/ngrx.io/scripts/build-404-page.js

@@ -5,8 +5,11 @@ const {readFileSync, writeFileSync} = require('fs');
 const {join, resolve} = require('path');
 
 // Constants
+const CI_PREVIEW = process.env.CI_PREVIEW;
+const PR_NUMBER = process.env.CIRCLE_PR_NUMBER || '';
+const SHORT_SHA = process.env.SHORT_GIT_HASH;
 const SRC_DIR = resolve(__dirname, '../src');
-const DIST_DIR = resolve(__dirname, '../dist/ngrx.io');
+const DIST_DIR = resolve(__dirname, '../dist/ngrx.io', CI_PREVIEW ? `pr${PR_NUMBER}-${SHORT_SHA}` : '');
 
 // Run
 _main(process.argv.slice(2));

projects/ngrx.io/src/app/documents/document.service.ts

@@ -34,13 +34,15 @@ export class DocumentService {
   private cache = new Map<string, Observable<DocumentContents>>();
 
   currentDocument: Observable<DocumentContents>;
+  baseHref: string;
 
   constructor(
     private logger: Logger,
     private http: HttpClient,
     location: LocationService) {
     // Whenever the URL changes we try to get the appropriate doc
     this.currentDocument = location.currentPath.pipe(switchMap(path => this.getDocument(path)));
+    this.baseHref = location.getBaseHref();
   }
 
   private getDocument(url: string) {
@@ -53,7 +55,7 @@ export class DocumentService {
   }
 
   private fetchDocument(id: string): Observable<DocumentContents> {
-    const requestPath = `${DOC_CONTENT_URL_PREFIX}${id}.json`;
+    const requestPath = `${this.baseHref}${DOC_CONTENT_URL_PREFIX}${id}.json`;
     const subject = new AsyncSubject<DocumentContents>();
 
     this.logger.log('fetching document from', requestPath);

projects/ngrx.io/src/app/shared/location.service.ts

@@ -12,6 +12,7 @@ export class LocationService {
   private readonly urlParser = document.createElement('a');
   private urlSubject = new ReplaySubject<string>(1);
   private swUpdateActivated = false;
+  private baseHref: string;
 
   currentUrl = this.urlSubject.pipe(map(url => this.stripSlashes(url)));
 
@@ -24,7 +25,7 @@ export class LocationService {
     private gaService: GaService,
     private location: Location,
     private platformLocation: PlatformLocation,
-    swUpdates: SwUpdatesService
+    swUpdates: SwUpdatesService,
   ) {
     this.urlSubject.next(location.path(true));
 
@@ -33,14 +34,15 @@ export class LocationService {
     });
 
     swUpdates.updateActivated.subscribe(() => (this.swUpdateActivated = true));
+    this.baseHref = platformLocation.getBaseHrefFromDOM();
   }
 
   // TODO: ignore if url-without-hash-or-search matches current location?
   go(url: string | null | undefined) {
     if (!url) {
       return;
     }
-    url = this.stripSlashes(url);
+    url = this.stripSlashes(this.location.normalize(url));
     if (/^http/.test(url) || this.swUpdateActivated) {
       // Has http protocol so leave the site
       // (or do a "full page navigation" if a ServiceWorker update has been activated)
@@ -159,4 +161,8 @@ export class LocationService {
     this.go(relativeUrl);
     return false;
   }
+
+  getBaseHref() {
+    return this.baseHref;
+  }
 }