feat(hostname): puts in a hostname option (#187)

* feat(hostname): puts in a hostname option

on some computers, localhost isn't avaialble. This pr takes care of that by making the name to be
used an setting

closes #87

* docs(scully-configuration docs): update the docs to reflect new settings

Author: SanderElias

docs/scully-configuration.md

@@ -21,6 +21,8 @@ or teach to the community how to combine scully with others tools.
     - [appPort](#appport)
     - [staticport](#staticport)
     - [puppeteerLaunchOptions](#puppeteerlaunchoptions)
+    - [hostName](#hostname)
+    - [hostUrl](#hosturl)
 
 ## `ScullyConfig` Interface
 
@@ -35,6 +37,8 @@ export interface ScullyConfig {
   appPort: number;
   staticport: number;
   puppeteerLaunchOptions?: LaunchOptions;
+  hostName?: string;
+  hostUrl?: string;
 }
 ```
 
@@ -125,4 +129,12 @@ this option can override the puppeteerLaunchOptions with settings that match thi
 Word of warning, some settings might interfer with the way Scully is working, creating errornous results.
 Follow [this link](https://pptr.dev/#?product=Puppeteer&version=v2.0.0&show=api-puppeteerlaunchoptions) for more information
 
+### hostName
+
+use a different name as `localhost` for the local server. Needed if doe to environmental restrictions localhost isn't usable
+
+### hostUrl
+
+Connect to a other server. If your app has special demands to host it, you might need to use your own server. When that is needed you can provide this setting to let scully know where to look for your running app. Make sure the server is up and running, and hosting the correct application.
+
 [Full Documentation ➡️](scully.md)

scully.config.js

@@ -8,6 +8,7 @@ exports.config = {
   projectRoot: './projects/sampleBlog/src/app',
   /** outDir is where the static distribution files end up */
   outDir: './dist/static',
+  hostName: '0.0.0.0',
   routes: {
     '/demo/:id': {
       type: 'extra',

scully/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scullyio/scully",
-  "version": "0.0.52",
+  "version": "0.0.55",
   "description": "Scully CLI",
   "repository": {
     "type": "GIT",

scully/renderPlugins/puppeteerRenderPlugin.ts

@@ -9,10 +9,14 @@ import {logError, yellow} from '../utils/log';
 import {launchedBrowser} from './launchedBrowser';
 
 export const puppeteerRender = async (route: HandledRoute): Promise<string> => {
-  // const {version} = JSON.parse(readFileSync(join('../package.json')).toString()) || '0.0.0';
-  const path = scullyConfig.hostUrl === null ?
-    `http://localhost:${scullyConfig.appPort}${route.route}`
-    : `${scullyConfig.hostUrl}${route.route}`;
+  let version = '0.0.0';
+  try {
+    const {version: pkgVersion} = JSON.parse(readFileSync(join('../package.json')).toString()) || '0.0.0';
+    version = pkgVersion;
+  } catch {}
+  const path = scullyConfig.hostUrl
+    ? `${scullyConfig.hostUrl}${route.route}`
+    : `http://${scullyConfig.hostName}:${scullyConfig.appPort}${route.route}`;
   let pageHtml: string;
   let browser: Browser;
   let page: Page;
@@ -30,7 +34,7 @@ export const puppeteerRender = async (route: HandledRoute): Promise<string> => {
       resolve();
     });
 
-    // windowSet(page, 'scullyVersion', version);
+    windowSet(page, 'scullyVersion', version);
 
     /** Inject this into the running page, runs in browser*/
     await page.evaluateOnNewDocument(() => {

scully/scully.ts

@@ -3,12 +3,10 @@ import {readFileSync} from 'fs-extra';
 import {join} from 'path';
 import * as yargs from 'yargs';
 import './pluginManagement/systemPlugins';
-import {routeContentRenderer} from './renderPlugins/routeContentRenderer';
 import {startBackgroundServer} from './startBackgroundServer';
 import {loadConfig} from './utils/config';
 import {moveDistAngular} from './utils/fsAngular';
 import {httpGetJson} from './utils/httpGetJson';
-import {RouteTypes} from './utils/interfacesandenums';
 import {isPortTaken} from './utils/isPortTaken';
 import {logError} from './utils/log';
 import {startScully} from './utils/startup';
@@ -22,26 +20,11 @@ let port;
 // tslint:disable-next-line:variable-name
 export let _options = {};
 
-const {argv: options} = yargs
-  .option('path', {
-    alias: 'p',
-    type: 'string',
-    description: 'The path to generate',
-  })
-  .option('type', {
-    alias: 't',
-    type: 'string',
-    description: 'The type to generate',
-  })
-  .option('port', {
-    alias: 'p',
-    type: 'number',
-    description: 'The port to run on',
-  })
-  .option('folder', {
-    type: 'string',
-    description: 'home folder',
-  });
+const {argv: options} = yargs.option('port', {
+  alias: 'p',
+  type: 'number',
+  description: 'The port to run on',
+});
 
 if (process.argv.includes('version')) {
   const {version} = JSON.parse(readFileSync(join(__dirname, './package.json')).toString());
@@ -50,23 +33,25 @@ if (process.argv.includes('version')) {
 }
 
 (async () => {
+  /** make sure not to do something before the config is ready */
+  const scullyConfig = await loadConfig;
   if (process.argv.includes('killServer')) {
-    await httpGetJson('http://localhost:1864/killMe', {suppressErrors: true});
+    await httpGetJson(`http://${scullyConfig.hostName}:${scullyConfig.appPort}/killMe`, {
+      suppressErrors: true,
+    });
     process.exit(0);
     return;
   }
-  /** make sure not to do something before the config is ready */
-  const scullyConfig = await loadConfig;
   await isBuildThere(scullyConfig);
 
   if (process.argv.includes('serve')) {
     await bootServe(scullyConfig);
   } else {
     const folder = join(scullyConfig.homeFolder, scullyConfig.distFolder);
-    /** copy in current buildfile */
+    /** copy in current build artifacts */
     await moveDistAngular(folder, scullyConfig.outDir, {removeStaticDist: true, reset: false});
 
-    /** server already up and running? */
+    /** server ports already in use? */
     const isTaken = await isPortTaken(scullyConfig.staticport);
     if (!isTaken) {
       startBackgroundServer(scullyConfig);
@@ -89,7 +74,9 @@ if (process.argv.includes('version')) {
     } else {
       if (!isTaken) {
         // kill serve ports
-        await httpGetJson('http://localhost:1864/killMe', {suppressErrors: true});
+        await httpGetJson(`http://${scullyConfig.hostName}:${scullyConfig.appPort}/killMe`, {
+          suppressErrors: true,
+        });
       }
       /** done, stop the program */
       process.exit(0);

scully/utils/config.ts

@@ -42,25 +42,23 @@ const loadIt = async () => {
 
   if (compiledConfig.hostUrl && compiledConfig.hostUrl.endsWith('/')) {
     compiledConfig.hostUrl = compiledConfig.hostUrl.substr(0, compiledConfig.hostUrl.length - 1);
-  } else if (compiledConfig.hostUrl === undefined) {
-    compiledConfig.hostUrl = null;
   }
   // TODO: update types in interfacesandenums to force correct types in here.
   // tslint:disable-next-line: no-unused-expression
   Object.assign(
     scullyConfig,
+    /** the default config */
     {
       homeFolder: angularRoot,
       outDir: join(angularRoot, './dist/static/'),
       distFolder,
       appPort: /** 1864 */ 'herodevs'.split('').reduce((sum, token) => (sum += token.charCodeAt(0)), 1000),
-      staticport: /** 1771 */ 'scully'.split('').reduce((sum, token) => (sum += token.charCodeAt(0)), 1000),
+      staticport: /** 1668 */ 'scully'.split('').reduce((sum, token) => (sum += token.charCodeAt(0)), 1000),
+      hostName: 'localhost',
       defaultPostRenderers: [],
-      // tslint:disable-next-line:no-bitwise
-      hostUrl: compiledConfig.hostUrl,
     }
-    // compiledConfig
   ) as ScullyConfig;
+  /** activate loaded config */
   await updateScullyConfig(compiledConfig);
   return scullyConfig;
 };

scully/utils/fsAngular.ts

@@ -1,13 +1,12 @@
 import {watch} from 'chokidar';
-import {existsSync} from 'fs';
 import {copy, remove} from 'fs-extra';
 import {join} from 'path';
 import {Observable} from 'rxjs';
 import {debounceTime, filter, tap} from 'rxjs/operators';
 import {restartStaticServer, startScullyWatchMode} from '../watchMode';
-import {green, log, logWarn, red} from './log';
 import {scullyConfig} from './config';
 import {createFolderFor} from './createFolderFor';
+import {green, log, logWarn} from './log';
 
 export async function checkChangeAngular(
   folder = join(scullyConfig.homeFolder, scullyConfig.distFolder) ||

scully/utils/httpGetJson.ts

@@ -24,11 +24,12 @@ export function httpGetJson(
       const contentType = res.headers['content-type'];
       let error: Error;
       if (statusCode !== 200) {
-        error = new Error('Request Failed.\n' + `Status Code: ${statusCode}`);
+        error = new Error(`Request Failed. Received status code: ${statusCode}
+on url: ${url}`);
       } else if (!/^application\/json/.test(contentType)) {
-        error = new Error(
-          'Invalid content-type.\n' + `Expected application/json but received ${contentType}`
-        );
+        error = new Error(`Invalid content-type.
+Expected application/json but received ${contentType}
+on url: ${url}`);
       }
       if (error) {
         // console.error(error.message);

scully/utils/interfacesandenums.ts

@@ -7,16 +7,29 @@ export enum RouteTypes {
 }
 
 export interface ScullyConfig {
+  /** the folder where the app-source is. Can be any off the projects in a repo */
   projectRoot: string;
+  /** Array with string ID's of the content-renderes that will be run on all routes */
   defaultPostRenderers: string[];
+  /** the root of the project (where angular.json lives) */
   homeFolder: string;
+  /** the destination off the Scully generated files */
   outDir?: string;
+  /** the place where distribution files of the project are. Should be a subfolder of dist. */
   distFolder?: string;
+  /** routes that needs additional processing have their configuration in here */
   routes: RouteConfig;
+  /** routes that are in the application but have no route in the router */
   extraRoutes?: string[];
+  /** Port-number where the original application is served */
   appPort: number;
+  /** port-number where the Scully generated files are available */
   staticport: number;
+  /** optional launch-options for puppeteer */
   puppeteerLaunchOptions?: LaunchOptions;
+  /** hostname to use for local server, defaults to `localhost` */
+  hostName?: string;
+  /** optional hostURL, if this is provided, we are going to use this server instead of the build-in one. */
   hostUrl?: string;
 }
 

scully/utils/staticServer.ts

@@ -29,8 +29,8 @@ export async function staticServer(port?: number) {
     scullyServer.use(express.static(scullyConfig.outDir, options));
     scullyServer.get('/', (req, res) => res.sendFile(join(distFolder, '/index.html')));
 
-    scullyServerInstance = scullyServer.listen(port, x => {
-      log(`Scully static server started on "${yellow(`http://localhost:${port}/`)}" `);
+    scullyServerInstance = scullyServer.listen(port, scullyConfig.hostName, x => {
+      log(`Scully static server started on "${yellow(`http://${scullyConfig.hostName}:${port}/`)}" `);
     });
 
     const angularDistServer = express();
@@ -56,8 +56,12 @@ export async function staticServer(port?: number) {
      * // angularDistServer.get('/*', (req, res) => res.sendFile(join(scullyConfig.outDir, '/index.html')));
      * we are already serving all known routes an index.html. at this point a 404 is indeed just a 404, don't substitute.
      */
-    angularServerInstance = angularDistServer.listen(scullyConfig.appPort, x => {
-      log(`Angular distribution server started on "${yellow(`http://localhost:${scullyConfig.appPort}/`)}" `);
+    angularServerInstance = angularDistServer.listen(scullyConfig.appPort, scullyConfig.hostName, x => {
+      log(
+        `Angular distribution server started on "${yellow(
+          `http://${scullyConfig.hostName}:${scullyConfig.appPort}/`
+        )}" `
+      );
     });
   } catch (e) {
     logError(`Could not start Scully serve`, e);