Can't change the base folder for lite-server in Angular 2 application

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


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
    })
  ]
};