0

I was referring ng2 documents for one of my POCs. In the quick start it ask us to download code and project structure from git location. And it uses lite-server as server to run the application. Can anyone help me where I can find lite config file where I can set options for BrowserSync. I just want to disable Ghostmode i.e., to set it as false so that there is no trouble in handling my application in multiple browsers at same time using same URL!!

Can someone help me on this please?

Below is the link i'm referring to - https://angular.io/docs/ts/latest/tutorial/toh-pt1.html

Many thanks in advance :)

phalgun kumar
  • 11
  • 2
  • Have you tried a google search for `lite-server config` or `browsersync config`? I just did, and found a whole bunch of useful information.... – Scrambo Aug 12 '16 at 14:25
  • Yes I searched both. All I get is what to change, which I know already. I know what to change but I'm not finding the location of the config file in the project structure that the link is using as example. I see a spec file related to lite-server but that doesn't have anything about browser-sync... – phalgun kumar Aug 12 '16 at 14:53

2 Answers2

1

I went tooling around and found a couple links: Github issue as an example file, lite-server config description

Short info dump gathered from the two links

lite-server reads a config file called bs-config.json when it runs. You can pass in a command line parameter with the -c flag to specify where you want to read the config file from.

When you have that working, there is an option inside the config file that you can set. it looks like this: "ghostMode": true/false.
Setting this to false will disable ghostmode from running.

So what this means for you specifically @phalgun, is that you're gonna want to call lite server from your package.json like this:

"lite": "lite-server -c path/to/bs-config.json"

and inside the bs-config.json, you'll want to have this somewhere:

"ghostMode": false

Community
  • 1
  • 1
Scrambo
  • 579
  • 5
  • 17
  • Yes Scrambo!! Thats the exact analysis i have done till now... but the problem with the example in the link provided is I'm not able to find from where it s fetching bs-config.json file. In the lite-server config file we can just add commands to initialize other packages like browser-sync etc. But it doesn't give an option to add extra option for any of the packages. – phalgun kumar Aug 12 '16 at 17:25
  • Inside node_modules/browser-sync folder there is a default.config file where it has all the options mentioned for browserSync. I tried changing all the default option for ghostmode where it said all the functions true and I make the whole ghostmode as false. But even after re-compile it didn't work as expected for me!! – phalgun kumar Aug 12 '16 at 18:07
  • You should be able to make your own `bs-config.json` file and then point the `-c ` arg to it. So say your entire project is in `~/foo`. (where `~` is the home dir) You could write a new file called `baz.json` and put it in the root (`~/foo/baz.json`), and then make the call `lite-server -c ~/foo/baz.json`. Unless i'm misinterpreting what you meant. From my understanding, you don't know where the original config file is that's getting read in. But you don't need to know, just write a new one and pass that in. – Scrambo Aug 12 '16 at 18:09
  • In response to your most recent comment, it may be that lite-server is passing in it's own custom configuration to browsersync. I would say that since directly changing the config for browsersync didn't work, try changing the config for lite-server. – Scrambo Aug 12 '16 at 18:11
  • Got it! Bingo!! default-config.js inside node_module/browser-sync did the magic! Just customized the file according to my preference and by giving the ghostMode and false. **ghostMode: false,** It had all the events as true. I removed them all the made ghostMode false. Its now working as expected for me! Thanks for your time @Scrambo :) – phalgun kumar Aug 12 '16 at 18:37
1

Just answering my own question as I figured it out after some more research!

To me the application free from ghostMode in the example - The tour of Heroes or any similar one (https://angular.io/docs/ts/latest/tutorial/toh-pt1.html)

We just have to set the value of ghostMode as false. In usual case this is set in bs-config.js. If bs-config.js file is not created, it picks the commands for browser-sync package default-config.js. When we install browser-sync package this js file will be created and it will have the default values set for browser-sync.

Location for the file: node_modules/browser-sync File name: default-congif.js

Value to change - Default Value: 

ghostMode: {
        clicks: true,
        scroll: true,
        forms: {
            submit: true,
            inputs: true,
            toggles: true
        }
    },

Change to: 

ghostMode: false,

Rebuild the application and you are all set to run your application without ghostMode.

Happy Coding :)

phalgun kumar
  • 11
  • 2