9

I am going through the 5 minute quickstart of Angular 2. However, my application resides in src/ folder instead of at the root of my repository, and when I run npm start the application is trying to find an index.html file at the root. I read up on lite-server and documentation shows that it uses BrowserSync and I can reconfigure BrowserSync with a bs-config.json in my repository. I did that and this is what my config looks like:

{
  "port": 8123,
  "server": { "baseDir": "./src" }
}

According to the log it's using the specified config:

[1] > todo-app-angular2@1.0.0 lite E:\GitHub\todo-app-angular2
[1] > lite-server "./bs-config.json"

I also tried an override through bs-config.js

module.exports = {
  port: 8123,
  server: {
    baseDir: "./src"
  }
};

However the Angular application is still opened on port 3000 and it's disregarding the baseDir defined in the config. What am I doing wrong?

Konstantin Dinev
  • 34,219
  • 14
  • 75
  • 100

2 Answers2

17

You should use a file called bs-config.js (instead of a bs-config.json one) since lite-server tries to load a module using the require function. The configuration should be a valid Node module:

module.exports = {
  "port": 8123,
  "server": { "baseDir": "./src" }
};

See this line in the source code: https://github.com/johnpapa/lite-server/blob/master/lib/lite-server.js#L20.

This file by default is loaded from the user's project folder.

Edit

After digging a bit more, the first part of my answer relies on the code from github but not the one actually installed using npm install (version 1.3.4)

There are two options in this case:

  • port
  • baseDir

Using this command will fix your problem:

$ lite-server --baseDir ./src --port 3333

Hope it helps you, Thierry

Thierry Templier
  • 198,364
  • 44
  • 396
  • 360
  • I actually forgot to mention that I already tried this. I replaced the json config with a module.export in a bs-config.js file. That still did nothing :( Actually when I added this my npm start would fail. – Konstantin Dinev Feb 02 '16 at 09:41
  • I just tried it and it still serves from ./ [1] [BS] Access URLs: [1] ------------------------------------ [1] Local: http://localhost:3000 [1] External: http://xx.xx.xx.xx:3000 [1] ------------------------------------ [1] UI: http://localhost:3001 [1] UI External: http://xx.xx.xx.xx:3001 [1] ------------------------------------ [1] [BS] Serving files from: ./ – Konstantin Dinev Feb 02 '16 at 09:58
  • Which version of lite-server do you use? – Thierry Templier Feb 02 '16 at 10:07
  • "lite-server": "^1.3.4" – Konstantin Dinev Feb 02 '16 at 12:09
  • Same for me! If you have a look at the file `node_modules/lite-server/lib/lite-server.js` you will see that `argv.baseDir` (`--baseDir`) is used for base folder and `argv.port` for port (`--port`). You could add some `console.log`s in the file to see received values... I made a new test and the following command works for me `lite-server --baseDir ./src --port 3333`... – Thierry Templier Feb 02 '16 at 12:16
  • Ok, I apologize. That actually worked. I added the params to my npm start, but I should have added it to my npm lite which is called by npm start. – Konstantin Dinev Feb 02 '16 at 13:05
  • @ThierryTemplier Is it possible to configure the files that are being watched from by browser-sync with the `lite-server` script? – Shawn Northrop Feb 26 '16 at 06:29
  • 1
    @ShawnNorthrop yes you can leverage the `--files` parameter. Specify the file patterns at this level. Something like `./**/*.js`... – Thierry Templier Feb 26 '16 at 09:16
  • 1
    Be sure to use lite-server v2 for the browser sync config options file – John Papa Feb 26 '16 at 11:54
  • @ThierryTemplier I'm facing same issue, can you kindly let me know where should i use `$ lite-server --baseDir ./src --port 3333 `. I have npm 3.7.3 version in windows. – Ayaz Ali Shah Jul 31 '16 at 07:21
5

The answer from Thierry Templier is not quite correct (anymore), you can use either the bs-config.json or bs-config.js configuration to adjust your browser-sync configuration. This is what I came up initially for the angular2 quick start example with JIT(Just-In-Time) and AOT(Ahead-Of-Time) compilation support (bs-config.json)

{
  "port": 8000,
  "server": ["app", "."]
}

to host the project from multiple directories.

However, I did not like this solution because by overwriting the server section in the json file, the default middleware configuration was overwritten at the same time.

Therefore I ended with the following approach, I took the default lite-server's config-defaults.js files and modified it instead (bs-config.js):

'use strict';
var fallback = require('connect-history-api-fallback');
var log = require('connect-logger');
/*
 | For up-to-date information about the options:
 |   http://www.browsersync.io/docs/options/
 */
module.exports = {
  port: 8000,
  injectChanges: false, // workaround for Angular 2 styleUrls loading
  filters: ['./**/*.{html,htm,css,js}'],
  watchOptions: {
    ignored: 'node_modules'
  },
  server: ['./', 'app'],
  middleware: [
    log({ format: '%date %status %method %url' }),
    fallback({
        index: '/index.html',
        htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'] // systemjs workaround
    })
  ]
};
Evgeny Bobkin
  • 4,092
  • 2
  • 17
  • 21