Changing the default port of Angular app and Browser sync app !!

Default application port change

Friends I wanted to change the default port of the sample app that I was running.

I started exploring the options for it !! I was bored with the default port 3000.

Approach: search for possible config files however this was too time consuming

1. First Method

1. I modified the default-config.js

a. This file is located at /node_modules\lite-server\node_modules\browser-sync\lib\default-config.js

Below is the entry in the file.

proxy: false,

    /**

     * @property port

     * @type Number

     * @default 3000

     */

    port: 3000,

// modify this to say 4001 

b. Save the file 

c. Restart the application to see that the application now runs at the new port.

d. Stop the application by CTRL + C

e. npm start

2. Second method.

a. Create a new file bs-config.json in your application folder

b. Below is the sample content of it

{

  "port": 7080,

  "files": ["./**/*.{html,htm,css,js}"],

  "server": { "baseDir": "." }

}

c. Restart the application

d. Stop the application by CTRL + C

e. npm start

Interesting point to note here is that now the application will detect the config file and load the application in the new port mentioned here

Below is snapshot of the application.

c:\Angular-Quarters>npm start

> angular2-quickstart@1.0.0 start c:\Angular-Quarters

> tsc && concurrently "npm run tsc:w" "npm run lite"

[1]

[1] > angular2-quickstart@1.0.0 lite c:\Angular-Quarters

[1] > lite-server

[1]

[0]

[0] > angular2-quickstart@1.0.0 tsc:w c:\Angular-Quarters

[0] > tsc -w

[0]

[1] ** browser-sync config **

[1] { injectChanges: false,

[1]   files: [ './**/*.{html,htm,css,js}' ],

[1]   watchOptions: { ignored: 'node_modules' },

[1]   server: { baseDir: '.', middleware: [ [Function], [Function] ] },

[1]   port: 7080 }

[0] 10:01:25 PM - Compilation complete. Watching for file changes.

[1] [BS] Access URLs:

[1]  ------------------------------------

[1]        Local: http://localhost:7080

[1]     External: http://192.168.0.3:7080

[1]  ------------------------------------

[1]           UI: http://localhost:3001

[1]  UI External: http://192.168.0.3:3001

[1]  ------------------------------------

[1] [BS] Serving files from: .

[1] [BS] Watching files...

[1] 16.07.28 22:01:33 200 GET /index.html

[1] 16.07.28 22:01:33 200 GET /node_modules/core-js/client/shim.min.js

[1] 16.07.28 22:01:33 200 GET /systemjs.config.js

[1] 16.07.28 22:01:33 200 GET /styles.css

[1] 16.07.28 22:01:33 200 GET /node_modules/reflect-metadata/Reflect.js

[1] 16.07.28 22:01:33 200 GET /node_modules/zone.js/dist/zone.js

[1] 16.07.28 22:01:33 200 GET /node_modules/systemjs/dist/system.src.js

[1] 16.07.28 22:01:34 200 GET /app/main.js

[1] 16.07.28 22:01:34 200 GET /node_modules/@angular/platform-browser-dynamic//b

undles/platform-browser-dynamic.umd.js

[1] 16.07.28 22:01:34 200 GET /app/app.component.js

[1] 16.07.28 22:01:34 200 GET /node_modules/rxjs/Subject.js

[1] 16.07.28 22:01:34 200 GET /node_modules/rxjs/observable/PromiseObservable.js

[1] 16.07.28 22:01:34 200 GET /node_modules/rxjs/operator/toPromise.js

[1] 16.07.28 22:01:34 200 GET /node_modules/rxjs/Observable.js

[1] 16.07.28 22:01:34 200 GET /node_modules/@angular/common//bundles/common.umd.

js

[1] 16.07.28 22:01:34 200 GET /node_modules/@angular/platform-browser//bundles/p

latform-browser.umd.js

[1] 16.07.28 22:01:34 200 GET /node_modules/rxjs/Subscriber.js

[1] 16.07.28 22:01:34 200 GET /node_modules/rxjs/Subscription.js

[1] 16.07.28 22:01:34 200 GET /node_modules/rxjs/SubjectSubscription.js

[1] 16.07.28 22:01:34 200 GET /node_modules/@angular/core//bundles/core.umd.js

[1] 16.07.28 22:01:34 200 GET /node_modules/rxjs/symbol/rxSubscriber.js

[1] 16.07.28 22:01:34 200 GET /node_modules/rxjs/util/throwError.js

[1] 16.07.28 22:01:34 200 GET /node_modules/rxjs/util/ObjectUnsubscribedError.js

[1] 16.07.28 22:01:34 200 GET /node_modules/rxjs/util/root.js

[1] 16.07.28 22:01:34 200 GET /node_modules/rxjs/symbol/observable.js

[1] 16.07.28 22:01:34 200 GET /node_modules/rxjs/util/toSubscriber.js

[1] 16.07.28 22:01:34 200 GET /node_modules/@angular/compiler//bundles/compiler.

umd.js

[1] 16.07.28 22:01:34 200 GET /node_modules/rxjs/Observer.js

[1] 16.07.28 22:01:34 200 GET /node_modules/rxjs/util/isFunction.js

[1] 16.07.28 22:01:34 200 GET /node_modules/rxjs/util/isArray.js

[1] 16.07.28 22:01:34 200 GET /node_modules/rxjs/util/tryCatch.js

[1] 16.07.28 22:01:34 200 GET /node_modules/rxjs/util/isObject.js

[1] 16.07.28 22:01:34 200 GET /node_modules/rxjs/util/errorObject.js

[1] 16.07.28 22:01:34 200 GET /node_modules/rxjs/util/UnsubscriptionError.js

[1] 16.07.28 22:01:34 404 GET /favicon.ico

[1] 16.07.28 22:01:38 304 GET /index.html

[1] 16.07.28 22:01:38 304 GET /styles.css

[1] 16.07.28 22:01:38 304 GET /node_modules/core-js/client/shim.min.js

[1] 16.07.28 22:01:38 304 GET /node_modules/zone.js/dist/zone.js

[1] 16.07.28 22:01:38 304 GET /node_modules/systemjs/dist/system.src.js

[1] 16.07.28 22:01:38 304 GET /node_modules/reflect-metadata/Reflect.js

[1] 16.07.28 22:01:38 304 GET /systemjs.config.js

[1] 16.07.28 22:01:38 304 GET /app/main.js

[1] 16.07.28 22:01:38 304 GET /node_modules/@angular/platform-browser-dynamic//b

undles/platform-browser-dynamic.umd.js

[1] 16.07.28 22:01:38 304 GET /app/app.component.js

[1] 16.07.28 22:01:38 304 GET /node_modules/@angular/common//bundles/common.umd.

js

[1] 16.07.28 22:01:38 304 GET /node_modules/@angular/compiler//bundles/compiler.

umd.js

[1] 16.07.28 22:01:38 304 GET /node_modules/@angular/core//bundles/core.umd.js

[1] 16.07.28 22:01:38 304 GET /node_modules/@angular/platform-browser//bundles/p

latform-browser.umd.js

[1] 16.07.28 22:01:38 304 GET /node_modules/rxjs/observable/PromiseObservable.js

[1] 16.07.28 22:01:38 304 GET /node_modules/rxjs/Subject.js

[1] 16.07.28 22:01:39 304 GET /node_modules/rxjs/Observable.js

[1] 16.07.28 22:01:39 304 GET /node_modules/rxjs/operator/toPromise.js

[1] 16.07.28 22:01:39 304 GET /node_modules/rxjs/util/root.js

[1] 16.07.28 22:01:39 304 GET /node_modules/rxjs/Subscriber.js

[1] 16.07.28 22:01:39 304 GET /node_modules/rxjs/Subscription.js

[1] 16.07.28 22:01:39 304 GET /node_modules/rxjs/SubjectSubscription.js

[1] 16.07.28 22:01:39 304 GET /node_modules/rxjs/symbol/rxSubscriber.js

[1] 16.07.28 22:01:39 304 GET /node_modules/rxjs/util/ObjectUnsubscribedError.js

[1] 16.07.28 22:01:39 304 GET /node_modules/rxjs/symbol/observable.js

[1] 16.07.28 22:01:39 304 GET /node_modules/rxjs/util/toSubscriber.js

[1] 16.07.28 22:01:39 304 GET /node_modules/rxjs/util/throwError.js

[1] 16.07.28 22:01:39 304 GET /node_modules/rxjs/util/isFunction.js

[1] 16.07.28 22:01:39 304 GET /node_modules/rxjs/Observer.js

[1] 16.07.28 22:01:39 304 GET /node_modules/rxjs/util/isArray.js

[1] 16.07.28 22:01:39 304 GET /node_modules/rxjs/util/isObject.js

[1] 16.07.28 22:01:39 304 GET /node_modules/rxjs/util/tryCatch.js

[1] 16.07.28 22:01:39 304 GET /node_modules/rxjs/util/errorObject.js

[1] 16.07.28 22:01:39 304 GET /node_modules/rxjs/util/UnsubscriptionError.js

Note:

If you observe the pattern in which the node starts the application like the below, you'll see that the application looks for the bs-config.json however in the first case it didn't find it. 

Once this was created in the port modifier exercise, the new port was picked up.

c:\Angular-Quarters>npm start

> angular2-quickstart@1.0.0 start c:\Angular-Quarters

> tsc && concurrently "npm run tsc:w" "npm run lite"

[0]

[0] > angular2-quickstart@1.0.0 tsc:w c:\Angular-Quarters

[0] > tsc -w

[0]

[1]

[1] > angular2-quickstart@1.0.0 lite c:\Angular-Quarters

[1] > lite-server

[1]

[1] Did not detect a `bs-config.json` or `bs-config.js` override file. Using lit

e-server defaults...

[1] ** browser-sync config **

[1] { injectChanges: false,

[1]   files: [ './**/*.{html,htm,css,js}' ],

[1]   watchOptions: { ignored: 'node_modules' },

[1]   server: { baseDir: './', middleware: [ [Function], [Function] ] } }

[0] 9:56:42 PM - Compilation complete. Watching for file changes.

[1] [BS] Access URLs:

[1]  ------------------------------------

[1]        Local: http://localhost:3000

[1]     External: http://192.168.0.3:3000

[1]  ------------------------------------

[1]           UI: http://localhost:3001

[1]  UI External: http://192.168.0.3:3001

[1]  ------------------------------------

[1] [BS] Serving files from: ./

[1] [BS] Watching files...

[1] 16.07.28 21:56:55 304 GET /index.html

[1] 16.07.28 21:56:55 304 GET /styles.css

[1] 16.07.28 21:56:55 304 GET /node_modules/core-js/client/shim.min.js

[1] 16.07.28 21:56:55 304 GET /node_modules/zone.js/dist/zone.js

[1] 16.07.28 21:56:55 304 GET /node_modules/reflect-metadata/Reflect.js

[1] 16.07.28 21:56:55 304 GET /systemjs.config.js

[1] 16.07.28 21:56:55 304 GET /node_modules/systemjs/dist/system.src.js

[1] 16.07.28 21:56:55 200 GET /app/main.js

[1] 16.07.28 21:56:55 304 GET /node_modules/@angular/platform-browser-dynamic//b

undles/platform-browser-dynamic.umd.js

[1] 16.07.28 21:56:55 200 GET /app/app.component.js

[1] 16.07.28 21:56:55 304 GET /node_modules/@angular/common//bundles/common.umd.

js

[1] 16.07.28 21:56:55 304 GET /node_modules/@angular/core//bundles/core.umd.js

[1] 16.07.28 21:56:55 304 GET /node_modules/@angular/platform-browser//bundles/p

latform-browser.umd.js

[1] 16.07.28 21:56:55 304 GET /node_modules/@angular/compiler//bundles/compiler.

Now enjoy playing with the port numbers and run application on your favorite port !!

Angular js

Below is the output of the successful run of the setup

installing it in fresh dir

C:\Users\ashishsh>cd c:\Angular-Quarters

c:\Angular-Quarters>npm install

npm WARN package.json angular2-quickstart@1.0.0 No description

npm WARN package.json angular2-quickstart@1.0.0 No repository field.

npm WARN package.json angular2-quickstart@1.0.0 No README data

npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher

 to avoid a RegExp DoS issue

npm WARN optional dep failed, continuing fsevents@1.0.14

npm WARN deprecated tough-cookie@2.2.2: ReDoS vulnerability parsing Set-Cookie h

ttps://nodesecurity.io/advisories/130

-

> angular2-quickstart@1.0.0 postinstall c:\Angular-Quarters

> typings install

typings WARN deprecated 7/20/2016: "registry:dt/node#6.0.0+20160621231320" is de

precated (updated, replaced or removed)

+-- core-js (global)

+-- jasmine (global)

+-- node (global)

angular2-in-memory-web-api@0.0.14 node_modules\angular2-in-memory-web-api

zone.js@0.6.12 node_modules\zone.js

@angular/upgrade@2.0.0-rc.4 node_modules\@angular\upgrade

reflect-metadata@0.1.3 node_modules\reflect-metadata

systemjs@0.19.27 node_modules\systemjs

+-- when@3.7.7

@angular/platform-browser-dynamic@2.0.0-rc.4 node_modules\@angular\platform-brow

ser-dynamic

bootstrap@3.3.7 node_modules\bootstrap

@angular/router@3.0.0-beta.1 node_modules\@angular\router

@angular/http@2.0.0-rc.4 node_modules\@angular\http

@angular/router-deprecated@2.0.0-rc.2 node_modules\@angular\router-deprecated

typescript@1.8.10 node_modules\typescript

@angular/forms@0.2.0 node_modules\@angular\forms

typings@1.3.2 node_modules\typings

+-- listify@1.0.0

+-- xtend@4.0.1

+-- wordwrap@1.0.0

+-- archy@1.0.0

+-- minimist@1.2.0

+-- any-promise@1.3.0

+-- chalk@1.1.3 (escape-string-regexp@1.0.5, supports-color@2.0.0, ansi-styles@2

.2.1, strip-ansi@3.0.1, has-ansi@2.0.0)

+-- bluebird@3.4.1

+-- columnify@1.5.4 (strip-ansi@3.0.1, wcwidth@1.0.1)

+-- update-notifier@1.0.2 (is-npm@1.0.0, lazy-req@1.1.0, xdg-basedir@2.0.0, semv

er-diff@2.1.0, boxen@0.6.0, configstore@2.0.0, latest-version@2.0.0)

+-- typings-core@1.4.0 (array-uniq@1.0.3, thenify@3.2.0, popsicle-status@2.0.0,

zip-object@0.1.0, popsicle-retry@3.2.1, graceful-fs@4.1.5, throat@3.0.0, promise

-finally@2.2.1, lockfile@1.0.1, string-template@1.0.0, strip-bom@2.0.0, sort-key

s@1.1.2, make-error-cause@1.2.1, debug@2.2.0, has@1.0.1, rc@1.1.6, object.pick@1

.1.2, parse-json@2.2.0, configstore@2.0.0, invariant@2.2.1, touch@1.0.0, detect-

indent@4.0.0, mkdirp@0.5.1, is-absolute@0.2.5, rimraf@2.5.4, popsicle-proxy-agen

t@3.0.0, popsicle@8.0.2, typescript@1.8.7)

@angular/platform-browser@2.0.0-rc.4 node_modules\@angular\platform-browser

@angular/common@2.0.0-rc.4 node_modules\@angular\common

@angular/compiler@2.0.0-rc.4 node_modules\@angular\compiler

@angular/core@2.0.0-rc.4 node_modules\@angular\core

concurrently@2.2.0 node_modules\concurrently

+-- commander@2.6.0

+-- cross-spawn@0.2.9 (lru-cache@2.7.3)

+-- chalk@0.5.1 (ansi-styles@1.1.0, escape-string-regexp@1.0.5, supports-color@0

.2.0, has-ansi@0.1.0, strip-ansi@0.3.0)

+-- bluebird@2.9.6

+-- moment@2.14.1

+-- rx@2.3.24

+-- lodash@4.14.0

lite-server@2.2.2 node_modules\lite-server

+-- connect-history-api-fallback@1.2.0

+-- minimist@1.2.0

+-- connect-logger@0.0.1 (moment@2.14.1)

+-- lodash@4.14.0

+-- browser-sync@2.13.0 (server-destroy@1.0.1, emitter-steward@1.0.0, dev-ip@1.0

.1, qs@6.2.0, opn@3.0.3, immutable@3.8.1, ua-parser-js@0.7.10, browser-sync-clie

nt@2.4.2, http-proxy@1.13.3, portscanner@1.0.0, connect@3.4.1, resp-modifier@6.0

.1, serve-static@1.10.3, eazy-logger@3.0.2, chokidar@1.5.1, micromatch@2.3.8, fs

-extra@0.26.7, socket.io@1.4.6, serve-index@1.7.3, yargs@4.7.1, localtunnel@1.8.

1, bs-recipes@1.2.2, rx@4.1.0, easy-extender@2.3.2, browser-sync-ui@0.6.0)

core-js@2.4.1 node_modules\core-js

rxjs@5.0.0-beta.6 node_modules\rxjs

c:\Angular-Quarters>

Back to Blogging by Starting the Sample Angular.js APP

First Angular.js App

Reference: https://angular.io/docs/ts/latest/quickstart.html

Today I created my first angular.js app.

Folks I am sharing a tip which will save you time while you run the app on your local machine.

Always try to run the npm commands from the node command prompt. This will turn out to be very handy step.

I have done hrs of debugging to realize that once you install node on your machine then running the steps of any open source app available on git, its is always better to run, compile app on node prompt then on windows default prompt.

I'll upload the entire debugging guide tomorrow for reference.

Till then enjoy !!!

Ashish