Provide user defined port and proj defaults

lib/PromptSession.ts

@@ -35,7 +35,6 @@ export class PromptSession {
 
 		let projLibrary: ProjectLibrary;
 		let theme: string;
-
 		add.templateManager = this.templateManager;
 		const config = ProjectConfig.getConfig();
 
@@ -114,10 +113,29 @@ export class PromptSession {
 					break;
 				}
 				case "Complete & Run":
+				const config = ProjectConfig.getConfig();
+				const defaultPort = config.project.defaultPort;
+				let port;
+				let userPort: boolean;
+				while (!userPort) {
+					// tslint:disable-next-line:prefer-const
+					port = (await inquirer.prompt({
+						default: defaultPort,
+						message: "Choose app host port:",
+						name: "port",
+						type: "input"
+					}))["port"];
+
+					if (!Number(port)) {
+						Util.log(`port should be a number. Input valid port or use the suggested default port`, "yellow");
+					} else {
+						userPort = true;
+					}
+				}
 				default: {
 					await PackageManager.flushQueue(true);
 					if (true) { // TODO: Make conditional?
-						await start.start({});
+						await start.start({port});
 						return;
 					}
 				}

lib/commands/start.ts

@@ -1,4 +1,5 @@
-import * as liteServ from "lite-server";
+import * as  bs from "browser-sync";
+import * as path from "path";
 import { exec } from "shelljs";
 import { GoogleAnalytics } from "../GoogleAnalytics";
 import { TemplateManager } from "../TemplateManager";
@@ -16,8 +17,15 @@ let command: {
 command = {
 	command: "start",
 	desc: "starts the project",
-	builder: {},
 	templateManager: null,
+	builder: {
+		port: {
+			alias: "p",
+			describe: "serve app port",
+			type: "number"
+		}
+	},
+
 	async execute(argv) {
 		GoogleAnalytics.post({
 			t: "screenview",
@@ -37,30 +45,37 @@ command = {
 
 		const config = ProjectConfig.getConfig();
 		const framework = config.project.framework;
+		const projectType = config.project.projectType;
+		const defaultPort = config.project.defaultPort;
 
 		Util.log(`Starting project.`, "green");
 
 		GoogleAnalytics.post({
 			t: "event",
 			ec: "$ig start",
-			cd1: config.project.framework,
-			cd2: config.project.projectType,
+			cd1: framework,
+			cd2: projectType,
 			cd11: !!config.skipGit,
 			cd14: config.project.theme
 		});
 
+		argv.port = Number(argv.port) || defaultPort;
+
 		switch (framework.toLowerCase()) {
 			case "jquery":
-				liteServ.server();
-				break;
+			const browserSync = bs.create("igniteui-cli");
+			const filePath = path.join(process.cwd(), "bs-config.js");
+			const bsConfig = require(filePath);
+			bsConfig.port = argv.port;
+			browserSync.init(bsConfig);
+			break;
 			case "react":
-				exec("npm start");
+				exec(`npm start -- --port=` + argv.port);
 				break;
 			case "angular":
-				exec("npm start");
+				exec(`npm start -- --port=` + argv.port);
 				break;
 			default:
-				liteServ.server();
 				break;
 		}
 	}

lib/types/Config.d.ts

@@ -7,6 +7,8 @@ declare interface Config {
 	packagesInstalled: boolean;
 	/** Project options */
 	project: {
+		/** default project serve port */
+		defaultPort: number;
 		framework: string;
 		/** Stands for js, ts, es6 */
 		projectType: string;

package.json

@@ -80,7 +80,8 @@
     "shelljs": "^0.7.8",
     "through2": "^2.0.3",
     "typescript": "^2.8.1",
-    "yargs": "^8.0.2"
+    "yargs": "^8.0.2",
+    "browser-sync": "2.24.5"
   },
   "devDependencies": {
     "@types/fs-extra": "^3.0.3",

spec/unit/PromptSession-spec.ts

@@ -256,6 +256,11 @@ describe("Unit - PromptSession", () => {
 			getProjectLibraryByName: mockProjectLibrary
 		});
 		const mockSession = new PromptSession(mockTemplate);
+		spyOn(ProjectConfig, "getConfig").and.returnValue({
+			project: {
+				defaultPort: 4200
+			}
+		});
 		spyOn(mockSession, "chooseActionLoop").and.callThrough();
 		spyOn(Util, "log");
 		spyOn(add, "addTemplate").and.returnValue(true);
@@ -272,11 +277,12 @@ describe("Unit - PromptSession", () => {
 			Promise.resolve({ template: "Template 1" }),
 			Promise.resolve({ componentName: "Template 1 Custom Name" }),
 			Promise.resolve({ customValue1: "Test", customValue2: "Test" }),
-			Promise.resolve({ action: "Complete & Run" })
+			Promise.resolve({ action: "Complete & Run" }),
+			Promise.resolve({ port: 7777})
 		);
 		await mockSession.chooseActionLoop(mockProjectLibrary, "infragistics");
 		expect(mockSession.chooseActionLoop).toHaveBeenCalledTimes(2);
-		expect(inquirer.prompt).toHaveBeenCalledTimes(11);
+		expect(inquirer.prompt).toHaveBeenCalledTimes(12);
 		expect(Util.log).toHaveBeenCalledTimes(3);
 		expect(PackageManager.flushQueue).toHaveBeenCalledWith(true);
 		expect(start.start).toHaveBeenCalledTimes(1);
@@ -318,6 +324,11 @@ describe("Unit - PromptSession", () => {
 			getProjectLibraryByName: mockProjectLibrary
 		});
 		const mockSession = new PromptSession(mockTemplate);
+		spyOn(ProjectConfig, "getConfig").and.returnValue({
+			project: {
+				defaultPort: 4200
+			}
+		});
 		spyOn(mockSession, "chooseActionLoop").and.callThrough();
 		spyOn(Util, "log");
 		spyOn(add, "addTemplate").and.returnValue(true);
@@ -329,11 +340,12 @@ describe("Unit - PromptSession", () => {
 			Promise.resolve({ action: "Add view" }),
 			Promise.resolve({ customTemplate: "Custom Template 1" }),
 			Promise.resolve({ customViewName: "Custom Template Name" }),
-			Promise.resolve({ action: "Complete & Run" })
+			Promise.resolve({ action: "Complete & Run" }),
+			Promise.resolve({ port: 7777})
 		);
 		await mockSession.chooseActionLoop(mockProjectLibrary, "infragistics");
 		expect(mockSession.chooseActionLoop).toHaveBeenCalledTimes(2);
-		expect(inquirer.prompt).toHaveBeenCalledTimes(6);
+		expect(inquirer.prompt).toHaveBeenCalledTimes(7);
 		expect(Util.log).toHaveBeenCalledTimes(3);
 		expect(PackageManager.flushQueue).toHaveBeenCalledWith(true);
 		expect(start.start).toHaveBeenCalledTimes(1);
@@ -405,10 +417,16 @@ describe("Unit - PromptSession", () => {
 			getProjectLibraryByName: mockProjectLibrary
 		});
 		const mockSession = new PromptSession(mockTemplate);
+		spyOn(ProjectConfig, "getConfig").and.returnValue({
+			project: {
+				defaultPort: 4200
+			}
+		});
 		spyOn(mockSession, "chooseActionLoop").and.callThrough();
 		spyOn(Util, "log");
 		spyOn(add, "addTemplate").and.returnValue(true);
 		spyOn(PackageManager, "flushQueue").and.returnValue(Promise.resolve(true));
+		//spyOn(start, "start").and.returnValue(Promise.resolve({port: 3333 }));
 		spyOn(start, "start").and.returnValue(Promise.resolve(true));
 		spyOn(inquirer, "prompt").and.returnValues(
 			Promise.resolve({ action: "Add component" }),
@@ -421,11 +439,12 @@ describe("Unit - PromptSession", () => {
 			Promise.resolve({ template: "Template 1" }),
 			Promise.resolve({ name: "Template 1 Custom Name" }),
 			Promise.resolve({ customValue1: "Test", customValue2: "Test" }),
-			Promise.resolve({ action: "Complete & Run" })
+			Promise.resolve({ action: "Complete & Run" }),
+			Promise.resolve({ port: 7777})
 		);
 		await mockSession.chooseActionLoop(mockProjectLibrary, "infragistics");
 		expect(mockSession.chooseActionLoop).toHaveBeenCalledTimes(2);
-		expect(inquirer.prompt).toHaveBeenCalledTimes(11);
+		expect(inquirer.prompt).toHaveBeenCalledTimes(12);
 		expect(Util.log).toHaveBeenCalledTimes(3);
 		expect(PackageManager.flushQueue).toHaveBeenCalledWith(true);
 		expect(start.start).toHaveBeenCalledTimes(1);

templates/angular/ig-ts/projects/empty/files/ignite-ui-cli.json

@@ -1,6 +1,7 @@
 {
 	"version": "",
 	"project": {
+		"defaultPort": 3001,
 		"framework": "angular",
 		"projectType": "ig-ts",
 		"theme": "$(theme)",

templates/angular/igx-ts/projects/empty/files/ignite-ui-cli.json

@@ -1,6 +1,7 @@
 {
 	"version": "",
 	"project": {
+    "defaultPort": 4200,
 		"framework": "angular",
 		"projectType": "igx-ts",
 		"theme": "$(theme)",

templates/jquery/js/projects/empty/files/bs-config.js

@@ -1,13 +1,21 @@
+var fallback = require("connect-history-api-fallback");
+var routes = require("./bs-routes.json").routes;
 /**
  * Browser Sync config.
  * NOTE: Ignite UI paths auto-updated by the CLI, must be valid JSON.
  */
 module.exports = {
+	files: ["./**/*.{html,htm,css,js}"],
+	watchOptions: {
+	  ignored: "node_modules"
+	},
 	"server": {
-		"routes": {
-			"/ignite-ui/js/infragistics.core.js": "./node_modules/ignite-ui/js/infragistics.core-lite.js",
-			"/ignite-ui/js/infragistics.lob.js": "./node_modules/ignite-ui/js/infragistics.lob-lite.js",
-			"/ignite-ui": "$(igniteuiSource)"
-		}
+		routes: routes,
+		baseDir: "./",
+		middleware: [
+		  fallback({
+			index: "/index.html"
+		  })
+		]
 	}
-}
+};

templates/jquery/js/projects/empty/files/bs-routes.json

@@ -0,0 +1,7 @@
+{
+	"routes": {
+		"/ignite-ui/js/infragistics.core.js": "./node_modules/ignite-ui/js/infragistics.core-lite.js",
+		"/ignite-ui/js/infragistics.lob.js": "./node_modules/ignite-ui/js/infragistics.lob-lite.js",
+		"/ignite-ui": "$(igniteuiSource)"
+	}
+}

templates/jquery/js/projects/empty/files/ignite-ui-cli.json

@@ -1,6 +1,7 @@
 {
     "version" : "",
     "project": {
+		"defaultPort": 3000,
 		"framework" : "jquery",
 		"projectType": "js",
 		"theme": "$(theme)",
@@ -16,6 +17,5 @@
 		"sourceRoot": "."
 	},
 	"build" : {
-
 	}
 }

templates/jquery/js/projects/empty/index.ts

@@ -11,20 +11,18 @@ class EmptyProject implements ProjectTemplate {
 	public framework: string = "jquery";
 	public projectType: string = "js";
 	public hasExtraConfiguration: boolean = false;
-	private _updateFile: string = "bs-config.js";
-	private _updateFileRegex: RegExp = /\{[\s\S]*\}(?=;|$)/;
+	public routesFile = "bs-routes.json";
 
 	public upgradeIgniteUIPackage(projectPath: string, packagePath: string): void {
-		const filePath = path.join(projectPath, this._updateFile);
-		let configFile = fs.readFileSync(filePath, "utf8");
-		const config = JSON.parse(this._updateFileRegex.exec(configFile)[0]);
+		const filePath = path.join(projectPath, this.routesFile);
+		const routes = fs.readFileSync(path.join(projectPath, this.routesFile), "utf8");
+		const config = JSON.parse(routes);
 
-		delete config.server.routes["/ignite-ui/js/infragistics.core.js"];
-		delete config.server.routes["/ignite-ui/js/infragistics.lob.js"];
-		config.server.routes["/ignite-ui"] = packagePath;
+		delete config.routes["/ignite-ui/js/infragistics.core.js"];
+		delete config.routes["/ignite-ui/js/infragistics.lob.js"];
+		config.routes["/ignite-ui"] = packagePath;
 
-		configFile = configFile.replace(this._updateFileRegex, JSON.stringify(config, null, 4));
-		fs.writeFileSync(filePath, configFile);
+		fs.writeFileSync(filePath, JSON.stringify(config, null, 4));
 	}
 
 	public generateFiles(outputPath: string, name: string, theme: string, ...options: any[]): Promise<boolean> {

templates/react/es6/projects/empty/files/ignite-ui-cli.json

@@ -1,6 +1,7 @@
 {
     "version" : "",
     "project": {
+		"defaultPort": 3002,
 		"framework" : "react",
 		"projectType": "es6",
 		"theme": "$(theme)",