By default, Aurelia has the logging API already in their dependencies, so you don't need to run any npm command at this point. Of course, if for some reason that library is missing, you know how to deal with it.

First, we need to create a file to configure our log levels. In the resources folder, create a file called custom-log-appender.js. This name is completely optional; you can name it in the most convenient way.

First, let's configure all our log levels:

export class CustomLogAppender {

  constructor(){}
  debug(logger, message, ...rest){
    console.debug(`DEBUG [${logger.id}] ${message}`, ...rest);
  }
  info(logger, message, ...rest){
    console.info(`INFO [${logger.id}] ${message}`, ...rest);
  }
  warn(logger, message, ...rest){
    console.warn(`WARN [${logger.id}] ${message}`, ...rest); 
  }
  error(logger, message, ...rest){
    console.error(`ERROR [${logger.id}] ${message}`, ...rest);
  }
}

We are almost ready. Now, open the main configuration file (main.js) and import the logging dependencies from Aurelia:

import {LogManager} from 'aurelia-framework';

Also, import our recently created CustomLogAppender:

import {CustomLogAppender} from './resources/custom-log-appender';

Now, configure the Aurelia's LogManager with your created CustomLogAppender:

LogManager.addAppender(new CustomLogAppender());
LogManager.setLevel(LogManager.logLevel.debug);

Look for the configure() function. Just need to add one single line:

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging() // <-- Logging activated for development env!
    .plugin('aurelia-animator-css');

Note that this kind of configuration will apply for all the environments (dev, test, prod). Commonly, logging is most used to detect error on development phase, so let's add some improvement to the previous configuration:

First, let's create a file called environment.js. This file will contain our current activated environments:

//environment.js
export default {
  debug: true,
  testing: false
};

Then, we need to import that file into our src/main.js file:

import environment from './environment';

export function configure(aurelia) {
 aurelia.use
     .standardConfiguration()
     .plugin('aurelia-anumator-css');

if (environment.debug) { 
     aurelia.use.developmentLogging();
}
    .
    .
    .
}

You are ready to start using the logger! Let's open one ViewModel file and start recording what is happening inside:

import {LogManager} from 'aurelia-framework';
let logger = LogManager.getLogger('homePage');
logger.debug('me');

export class HomePage() {
    activate(){
       logger.debug(“Enter to home page!!!”);
    }
}

This is so easy and so useful. Of course, we have so many more special features to show you. Keep reading man!