Angular-cli: Browsersync

[JoshuaNovak919]

Sorry, this isn't really an issue, more of a question, but I couldn't find a good place to ask this. I want to switch out LiveReload for Browsersync, what is the proper way to go about this for Angular CLI?

[pkamdem]

@JoshuaNovak919

Is there any advantage for switching to Browsersync that is worth mentioning here?

The CLI is currently using ember-cli-inject-live-reload plugin to leverage live-reload core feature when serving app.

You can still delete the reference of live-reload file on index.html and start your own server which should then have to watch from ./dist folder.

[JoshuaNovak919]

@pkamdem Browsersync works better, looks better (shows if it's syncing in the browser window), and has more features than LiveReload at least from my experience. I'll try deleting the live-reload reference and add in Browersync and see if I can get it working.

[JoshuaNovak919]

In case anyone else is wondering. I ended up using:
https://github.com/johnpapa/lite-server

I commented out the LiveReload line from the dist/index.html and added a bs-config.json file to the root of the project.

bs-config.json

{
  "port": 8000,
  "files": ["./dist/**/*.{html,htm,css,js}"],
  "server": { "baseDir": "./dist" }
}

I also changed the start line in the package.json file and added lite.

package.json

"start": "npm run lite",
"lite": "lite-server",

Now you just have to start the server with npm start and BrowserSync will start right up.

[pkamdem]

@JoshuaNovak919

Well ok, if this bring the smile back !
Thanks for sharing by the way

I think this issue can now be closed

[JoshuaNovak919]

@pkamdem Actually it looks like the code is not updating when I save it. I have it watching the dist folder, which doesn't seem to be updating now. Is there something else I need to do for this to happen?

[pkamdem]

Actually you would still need to start both commands

lite-server and npm start

The ./dist folder is destroyed and recreated each time a change is detected on your code base. This will trigger your lite-server reload on _http://localhost:8000/_.

[JoshuaNovak919]

@pkamdem That worked. I added concurrently and changed start to "start": "concurrently \"ng server\" \"npm run lite\" ",. This runs both servers at once though. Is there a way to have the dist directory rebuild when there is a change and not start the server?

[pkamdem]

You need to start the CLI's one to monitor your trees and act upon changes.
It certainly exists a way to tweak as you want.
I would suggest you a more appropriate medium, let's say the official CLI Gitter Chat

[hansl]

Closing this as it's not an issue.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}