Search

Logging in AngularJS Applications Made Simple

What comes to mind, when you think of a JavaScript framework that can be used to build applications across platforms, achieve maximum speed with accelerated performance and ensure quick builds? Just AngularJS, isn’t it?  Powered by Google, Angular was developed as a framework to give you a toolset for powering your single page application development, work well with other web-based libraries and be fully extensible. All its features can be modified and even replaced to give you complete freedom in developing your own unique workflow.  As a pure JavaScript framework, Angular can be added to an HTML page with a normal <script> tag with src attribute pointing to the source framework library. AngularJS extends HTML attributes using Directives.  It binds data to HTML using Expressions.  AngularJS can be downloaded from.  If you’re new to AngularJS, it is better to get introductory information from. This site provides the basic information required to start working with AngularJS.  It has various features including MVC Architecture, Directives, Expressions, Controllers, Filters, HTML DOM, Modules, Views, AJAX, Scopes, Services, Dependency Injection, Logging and Internationalization. We will deal with Logging in the following section. IntroductionAngularJS includes a logging service called $log, which logs the messages to the client browser's console. The $log service includes different methods to handle the log for error, information, warning or debug information. It can be useful in debugging and auditing. This article will help you learn about each type of log. The topics we will go through in this article are: Introduction to logging Testing AngularJS Logging Application What Is Application Logging? Angular Logging: The Improved Approach Logging with AngularJS - extending the built-in logger $log in AngularJS Turn off logging in AngularJS  Introduction to logging AngularJS has an impressive and robust logging mechanism in-built through the $logService and $log injection.  The $log service includes different methods to log the error, information, warning or debug information. It can be useful in debugging and auditing.  The main purpose of all AngularJS logging services is to simplify debugging and troubleshooting. To reveal the location of the calls to $log in the JavaScript console; you can "blackbox" the AngularJS source in your favorite browser. To blackbox in the browser, go to the page, right click it, “Inspect” it in developer mode, and then read the console. Note: All browsers do not support blackboxing. AngularJS logs everything to the console, which is neither a robust or scalable solution. Sometimes, you need to be able to intercept the exceptions and do something extra. This could be as simple as adding extra information or sending all logs to the server/database. $log in AngularJS AngularJS programmers frequently use console.log to record errors or other informational messages in their applications. Although this is fine while debugging your application, yet it is not a best practice for production environment. As AngularJS is all about services, it is a better idea to create a logging service that you can call from other services and components due to some event which needs to be logged. In this logging service, you can still call console.log, but you can also modify the service later to record messages to store them in local storage or a database table via the Web API. Some methods that we will use for logging in AngularJS $log are: log();  to write a log message info(); to write an information message warn(); to write a warning message error(); to write an error message debug(); to write a debug message  The above methods are used for different categorizations of $log. Testing AngularJS Logging Application An Example of logging in AngularJS is: Considering you have already downloaded the latest AngularJS file from (here we are using the minified version of AngularJS as angular.min.js). We can even use the AngularJS CDN for the same provided by Google: https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js <!DOCTYPE html> <html> <head> <title>Logging Example in AngularJS</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script> <script> var app = angular.module('myApp', []) app.controller("myController", function ($log) {             $log.log('This is log.');             $log.error('This is error.');             $log.info('This is info.');             $log.warn('This is warning.');             $log.debug('This is debugging.');         }); </script> </head> <body ng-app="myApp"> <form id="form1"> <div ng-controller="myController"> <p> <h1> Go to Inspect, through browser blackbox <br/> to see the Console for the different loggers.   </form> </body> </html>Now run the logging example as an HTML file and check the output, which will look like this: Go to Inspect, through browser blackbox to see the Console for the different loggers. In the Inspect Window, go to Console, and see the result as: This is log. This is error. (In red font displayed with error icon) This is info. This is warning. (In brown font with warning icon) Here is a more complex example, which logs according to events generated as follows: <!DOCTYPE html>  <html>  <head>  <title>Logging Example in AngularJS</title>  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>  <script>  var app = angular.module('myApp', [])  app.controller("myController", ['$scope', '$log', function($scope, $log) {  $scope.$log = $log;  $scope.message = 'Hello World!';  }]);  </script>  </head>  <body ng-app="myApp">  <form id="form1">  <div ng-controller="myController">  <p>Reload this page with open console, enter text and hit the log button...</p>  <label>Message:   <input type="text" ng-model="message" />  </label>  <br/><br/><br/>  <button ng-click="$log.log(message + ' log') ">log</button>  <button ng-click="$log.warn(message + ' warn') ">warn</button>  <button ng-click="$log.info(message + ' info') ">info</button>  <button ng-click="$log.error(message + ' error') ">error</button>  </div>  </form>  </body>  </html> Now run the above logging example as an HTML file and check the output, which will look like this: Reload this page with open console, enter text and hit the log button... Message:Clicking the buttons accordingly will give the console information as: Hello World! log Hello World! warn (in brown font with warning icon) Hello World! info Hello World! error (in red font with error icon) The output snapshot: What Is Application Logging? For a long time, logs have been an essential part of troubleshooting application and infrastructure performance. They help in providing visibility of how our applications are running on each of the various infrastructure components. Log data contains information such as out of memory exception or hard disk errors or even simple divide by zero error. Within software development, application logging plays a vital role; as much as we’d like our software to be perfect, issues will always arise within a production environment. When they do, a good logging strategy becomes very crucial. An application log usually contains errors, warning, events and non-critical information when compared to an error log that usually contains only errors and critical warnings. The application log should contain all the information necessary for audit. Put in simple words, an application log is a file that contains information about events that have occurred or errors and warnings that may occur due to some malfunctioning within a software application. These events are logged out by the application and written into a file, console or Web API. Once logged, the events can be handled accordingly as they include errors and warnings as well as informational events. The types of information and format of messages found in an application log file will vary between applications. These variables aren’t determined by external guidelines or by the operating system we are working on, rather they are determined by  the developers of the software application who control what goes into the log file. They’re the ones making decisions about what events and information would be useful to log and how logging should be done. Many events will be specific to the source application and many others would require a timestamp. Thus, it is common for logged events to contain information such as timestamp, source, etc. to make them more useful. Here is some common information that you will generally get in application log messages: Context information: Context information is the background information that provides an insight into the state of the application at the time of the message. Timestamp: A timestamp is a specific piece of contextual information for tracking and correlating issues that relate to the time aspect. Log levels: Log labels help you calculate the level of importance for the information entries in your log file. Some of the frequently used levels include INFO, WARN, ERROR, MESSAGE, and LOG. Once you are familiar with logged messages you will find it easier to use them when you’re trying to analyze bugs and unexpected events. When developers use the word “logging,” they usually refer to application logging. However, there are other types of logging as well. To further clarify what application logging is, let us briefly look at other types of logs to understand the differences. System Logs: System logs are written by the operating system. They contain information about System Processes and Drivers. On a Windows machine, System log is stored in the event log while in a Linux machine this is the syslog service. Server Logs: Server logs provide information on the state of a web application, web API, web Server or application server. The web server or application server is responsible for creating and maintaining server log files. GC Logs: Garbage collector logs assist with memory management of Java Programming Language by tracking objects within a JVM (Java Virtual Machine) and removing those that are unused. They are deactivated by default, however with simple switches, they can be switched on. Thus, application logging involves recording information about your application’s runtime behavior to a more persistent medium like a file or a database or even simple console. By reading the log entries wherever they are stored, you go back in time to analyze the application’s behavior, understanding the sequence of events that happened to it. You could even repeat the actions taken by a user, in order to recreate and fix whatever problem you are struggling with.  We need to log so that we can retroactively debug and analyze our application as if we are running it in the current moment. AngularJS Logging: The Improved Approach It is very easy to log all of the client-side messages to the server using AngularJS logging services. The biggest benefit is that it makes it easier to find application errors once in production phase and accelerate bug finding at deployment stage. Client-side logging can also help you identify the frequency of errors so that hotfixes can be prioritized in the order of importance as they can be labeled, helping you further to improve your AngularJS application for your clients. In AngularJS we have the different categories of logging as : $log.log(), $log.warn(), $log.info(), $log.error() and $log.debug(). These help the programmer and debugger to understand and classify different information as simple log, warning, information, error or debug information. Logging with AngularJS - extending the built-in logger Showing the correct line numbers You can tell AngularJS to show the correct line numbers by binding the $log.* functions to the console.* functions. For Example:     $log.debug = console.debug.bind(console); You will have to do that for each one of the 5 $log methods separately. For Example: <!DOCTYPE html>  <html>  <head>  <title>Logging Example in AngularJS</title>  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js">  </script>  <script>  var app = angular.module('myApp', [])  app.controller("myController", ['$scope', '$log', function($scope, $log) {  $log.debug = console.debug.bind(console);  $log.info = console.info.bind(console);  $log.log = console.log.bind(console);  $log.warn = console.warn.bind(console);  $log.error = console.error.bind(console);  console.debug("Calling console.debug");  console.info("Calling console.info");  console.log("Calling console.log");  console.warn("Calling console.warn");  console.error("Calling console.error");  $scope.$log = $log;  $scope.message = 'Hello World!';  }]);  </script>  </head>  <body ng-app="myApp">  <form id="form1">  <div ng-controller="myController">  <p>Reload this page with open console, enter text and hit the log button...</p>    <label>Message:  <input type="text" ng-model="message" />  </label>  <br/>  <br/>  <br/>  <button ng-click="$log.log(message + ' log') ">log</button>  <button ng-click="$log.warn(message + ' warn') ">warn</button>  <button ng-click="$log.info(message + ' info') ">info</button>  <button ng-click="$log.error(message + ' error') ">error</button>  <button ng-click="$log.debug(message + ' debug') ">debug</button>  </div>  </form>  </body>  </html> Output is: All the console messages are shown in line numbers. Showing the  $exceptionHandler as Factory  As per https://cmatskas.com/logging-with-angularjs-extending-the-built-in-logger/  site:  AngularJs has an impressive and robust logging mechanism through the $logService and $log injection. However, Angular logs everything to the console, which is neither a robust or scalable solution. Sometimes, you need to be able to intercept the exceptions and do something extra. This could be as simple as adding extra information or sending all logs to the server/database. The example below is simple and allows you to hook into the $exceptionHandler and pass a logger in the form of an AngularJS factory. The factory contains only one method => log(). This method first calls the base $log.error() method and after that point we have all the data we need to do as we want. The only limitation is that this custom logger deals only with errors and exceptions. Example: var mod = angular.module("LogDemo2", [] ); mod.provider('$exceptionHandler', {      $get: function( errorLogService ) {          return( errorLogService );      }  });  mod.factory('errorLogService', ['$log', '$window', function($log, $window) {        function log( exception ) {            $log.error.apply( $log, arguments );            try {              var args = [];              if (typeof arguments === 'object') {                  for(var i = 0; i < arguments.length; i++ ) {                    arg = arguments[i];                    var exceptionItem = {};                    exceptionItem.message = arg.message;                    exceptionItem.stack = arg.stack;                    args.push(JSON.stringify(exception));                  }                }                // Phone home and log the error to the server.                /*$.ajax({                    type: "POST",                    url: "./javascript-errors",                    contentType: "application/json",                    data: angular.toJson({                        errorUrl: $window.location.href,                        errorMessage: errorMessage,                        stackTrace: stackTrace,                        cause: ( cause || "" )                    })                });*/                console.log('from inside the log method ' + args.join('\n') );            } catch ( loggingError ) {                // For Developers - log the log-failure.                $log.warn( "Error logging failed" );                $log.log( loggingError );            }        }        return( log );    }  ]);   mod.controller('LogController2', function($scope) {    $scope.throwError = function(){      throw {message: 'error message'};    };     $scope.throwException = function(){      var a = b;    };      $scope.throwNestedExceptions = function() {      try {        var a = b;      } catch (e) {        try {          var c = d;        } catch (ex) {          $log.error(e, ex);        }      }    };  }); Citation. Turn off logging in AngularJS $log.debug can be turned on or off depending on the requirement from an application. The only advantage of $log.debug over console.debug is the ability to turn off the debugging printouts. You can do that through the $logProvider provider in the config directive of AngularJS by adding the following statement: .config(['$logProvider', function($logProvider) {      $logProvider.debugEnabled(false); // turns off the calls to $log.debug only  }]); Or simply, app.config(function($logProvider){    $logProvider.debugEnabled(false);  }); This turns off the $log.debug calls. However, $log.info(), $log.error(), $log.warn(), $log.log() is not turned off. Thus, your code will still print out any of the info, log, warn, and error messages.  To see the Debug messages, in Chrome, we need to view the sidebar of the Console in Inspect window. In others, enable it from browser console. Go to the console of the browser and set the level to verbose.  Complete Example with debug: <!DOCTYPE html>  <html>  <head>  <title>Logging Example in AngularJS</title>  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js">  </script>  <script>  var app = angular.module('myApp', [])  app.config(function($logProvider){  $logProvider.debugEnabled(false);  });  app.controller("myController", ['$scope', '$log', function($scope, $log) {  $scope.$log = $log;  $scope.message = 'Hello World!';  }]);  </script>  </head>  <body ng-app="myApp">  <form id="form1">  <div ng-controller="myController">  <p>Reload this page with open console, enter text and hit the log button...</p>  <label>Message:  <input type="text" ng-model="message" />  </label>   <br/> <br/> <br/>  <button ng-click="$log.log(message + ' log') ">log</button>  <button ng-click="$log.warn(message + ' warn') ">warn</button>  <button ng-click="$log.info(message + ' info') ">info</button>  <button ng-click="$log.error(message + ' error') ">error</button>  <button ng-click="$log.debug(message + ' debug') ">debug</button>  </div>  </form>  </body>  </html>  Case 1:  With :   app.config(function($logProvider){  $logProvider.debugEnabled(false);  }); Output: We can see that if we open the “See Console Sidebar”, we get 1 error, 1 warning and 2 info(1 for log function, other one for info function). Here Debug() is missing as it is turned off by our application. If we hide the Console Sidebar, we can still see all the messages displayed in the Console as:Case 2: With :  app.config(function($logProvider){  $logProvider.debugEnabled(true);  }); Or we can skip the entire code for app.config(){….}); as by default debug is turned on. Output: We can see that if we open the “See Console Sidebar”, we get 1 debug, 1 error, 1 warning and 2 info(1 for log function, other one for info function). Here Debug() is seen as it is turned on by our application or by default. If we hide the Console Sidebar, we can see all the messages displayed in the Console except the debug message since it can be seen only in the verbose of the console, as:Conclusion: logging in AngularJS In this post, we started with logging in AngularJS. AngularJS comes with a service called $log for logging. $log is a simple wrapper around the console.log facilities. We understood the difference between $log.info, $log.warn, $log.error, $log.log and $log.debug. We learned how to extend $log through AngularJS application and even work with extended features of the same. We also saw how to switch off debugging in AngularJS logging. Note: Angular is a version upgrade to AngularJS. Therefore, Angular refers to AngularJS in this article.

Logging in AngularJS Applications Made Simple

11K
  • by Monica Gupta
  • 18th Sep, 2020
  • Last updated on 17th Mar, 2021
  • 13 mins read
Logging in AngularJS Applications Made Simple

What comes to mind, when you think of a JavaScript framework that can be used to build applications across platforms, achieve maximum speed with accelerated performance and ensure quick builds? Just AngularJS, isn’t it?  

Powered by Google, Angular was developed as a framework to give you a toolset for powering your single page application development, work well with other web-based libraries and be fully extensible. All its features can be modified and even replaced to give you complete freedom in developing your own unique workflow.  

As a pure JavaScript framework, Angular can be added to an HTML page with a normal <script> tag with src attribute pointing to the source framework library. 

AngularJS extends HTML attributes using Directives.  It binds data to HTML using Expressions.  

AngularJS can be downloaded from 

If you’re new to AngularJS, it is better to get introductory information from. This site provides the basic information required to start working with AngularJS.  

It has various features including MVC Architecture, Directives, Expressions, Controllers, Filters, HTML DOM, Modules, Views, AJAX, Scopes, Services, Dependency Injection, Logging and Internationalization. We will deal with Logging in the following section. 

Introduction

AngularJS includes logging service called $log, which logs the messages to the client browser's console. 

The $log service includes different methods to handle the log for error, information, warning or debug information. It can be useful in debugging and auditing. 

This article will help you learn about each type of log. 

The topics we will go through in this article are: 

  • Introduction to logging 
  • Testing AngularJS Logging Application 
  • What Is Application Logging? 
  • Angular Logging: The Improved Approach 
  • Logging with AngularJS - extending the built-in logger 
  • $log in AngularJS 
  • Turn off logging in AngularJS  

Introduction to logging 

AngularJS has an impressive and robust logging mechanism in-built through the $logService and $log injection.  The $log service includes different methods to log the error, information, warning or debug information. It can be useful in debugging and auditing.  The main purpose of all AngularJS logging services is to simplify debugging and troubleshooting. 

To reveal the location of the calls to $log in the JavaScript console; you can "blackbox" the AngularJS source in your favorite browser. To blackbox in the browser, go to the page, right click it, “Inspect” it in developer mode, and then read the console. 

Note: All browsers do not support blackboxing. 

AngularJS logs everything to the console, which is neither a robust or scalable solution. Sometimes, you need to be able to intercept the exceptions and do something extra. This could be as simple as adding extra information or sending all logs to the server/database. 

$log in AngularJS 

AngularJS programmers frequently use console.log to record errors or other informational messages in their applications. Although this is fine while debugging your application, yet it is not a best practice for production environment. As AngularJS is all about services, it is a better idea to create a logging service that you can call from other services and components due to some event which needs to be logged. In this logging service, you can still call console.log, but you can also modify the service later to record messages to store them in local storage or a database table via the Web API. 

Some methods that we will use for logging in AngularJS $log are: 

  • log();  to write a log message 
  • info(); to write an information message 
  • warn(); to write a warning message 
  • error(); to write an error message 
  • debug(); to write a debug message  

The above methods are used for different categorizations of $log. 

Testing AngularJS Logging Application 

An Example of logging in AngularJS is: 

Considering you have already downloaded the latest AngularJS file from (here we are using the minified version of AngularJS as angular.min.js). We can even use the AngularJS CDN for the same provided by Google: https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js 

<!DOCTYPE html> 
<html> 
<head> 
<title>Logging Example in AngularJS</title> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script> 
<script> 
var app = angular.module('myApp', []) 
app.controller("myController", function ($log) { 
            $log.log('This is log.'); 
            $log.error('This is error.'); 
            $log.info('This is info.'); 
            $log.warn('This is warning.'); 
            $log.debug('This is debugging.'); 
        }); 
</script> 
</head> 
<body ng-app="myApp"> 
<form id="form1"> 
<div ng-controller="myController"> 
<p> <h1> Go to Inspect, through browser blackbox <br/> 
to see the Console for the different loggers.   
</form> 
</body> 
</html>

Now run the logging example as an HTML file and check the output, which will look like this: 

Go to Inspect, through browser blackbox to see the Console for the different loggers. 

In the Inspect Window, go to Console, and see the result as: 

  • This is log. 
  • This is error. (In red font displayed with error icon) 
  • This is info. 
  • This is warning. (In brown font with warning icon) 

Logging in AngularJS Applications Made Simple

Here is a more complex example, which logs according to events generated as follows: 

<!DOCTYPE html> 
<html> 
<head> 
<title>Logging Example in AngularJS</title> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script> 
<script> 
var app = angular.module('myApp', []) 
app.controller("myController", ['$scope', '$log', function($scope, $log) { 
$scope.$log = $log; 
$scope.message = 'Hello World!'; 
}]); 
</script> 
</head> 
<body ng-app="myApp"> 
<form id="form1"> 
<div ng-controller="myController"> 
<p>Reload this page with open console, enter text and hit the log button...</p> 
<label>Message: 
 <input type="text" ng-model="message" /> 
</label> 
<br/><br/><br/> 
<button ng-click="$log.log(message + ' log') ">log</button> 
<button ng-click="$log.warn(message + ' warn') ">warn</button> 
<button ng-click="$log.info(message + ' info') ">info</button> 
<button ng-click="$log.error(message + ' error') ">error</button> 
</div> 
</form> 
</body> 
</html> 

Now run the above logging example as an HTML file and check the output, which will look like this:

Reload this page with open console, enter text and hit the log button...

Message:
Logging in AngularJS Applications Made Simple

Clicking the buttons accordingly will give the console information as: 

Hello World! log 

Hello World! warn (in brown font with warning icon) 

Hello World! info 

Hello World! error (in red font with error icon) 

The output snapshot: Logging in AngularJS Applications Made Simple

What Is Application Logging? 

For a long time, logs have been an essential part of troubleshooting application and infrastructure performance. They help in providing visibility of how our applications are running on each of the various infrastructure components. Log data contains information such as out of memory exception or hard disk errors or even simple divide by zero error. Within software development, application logging plays a vital role; as much as we’d like our software to be perfect, issues will always arise within a production environment. When they do, a good logging strategy becomes very crucial. 

An application log usually contains errors, warning, events and non-critical information when compared to an error log that usually contains only errors and critical warnings. The application log should contain all the information necessary for audit. 

Put in simple words, an application log is a file that contains information about events that have occurred or errors and warnings that may occur due to some malfunctioning within a software application. These events are logged out by the application and written into a file, console or Web APIOnce logged, the events can be handled accordingly as they include errors and warnings as well as informational events. 

The types of information and format of messages found in an application log file will vary between applicationsThese variables aren’t determined by external guidelines or by the operating system we are working on, rather they are determined by  the developers of the software application who control what goes into the log file. They’re the ones making decisions about what events and information would be useful to log and how logging should be done. Many events will be specific to the source application and many others would require timestamp. Thus, it is common for logged events to contain information such as timestamp, source, etc. to make them more useful. Here is some common information that you will generally get in application log messages: 

  • Context information: Context information is the background information that provides an insight into the state of the application at the time of the message. 
  • Timestamp: A timestamp is a specific piece of contextual information for tracking and correlating issues that relate to the time aspect. 
  • Log levels: Log labels help you calculate the level of importance for the information entries in your log file. Some of the frequently used levels include INFO, WARN, ERROR, MESSAGE, and LOG. 

Once you are familiar with logged messages you will find it easier to use them when you’re trying to analyze bugs and unexpected events. 

When developers use the word “logging,” they usually refer to application logging. However, there are other types of logging as well. To further clarify what application logging is, let us briefly look at other types of logs to understand the differences. 

  • System Logs: System logs are written by the operating system. They contain information about System Processes and Drivers. On a Windows machine, System log is stored in the event log while in Linux machine this is the syslog service. 
  • Server Logs: Server logs provide information on the state of a web application, web API, web Server or application server. The web server or application server is responsible for creating and maintaining server log files. 
  • GC Logs: Garbage collector logs assist with memory management of Java Programming Language by tracking objects within a JVM (Java Virtual Machine) and removing those that are unused. They are deactivated by default, however with simple switches, they can be switched on. 

Thus, application logging involves recording information about your application’s runtime behavior to a more persistent medium like a file or a database or even simple console. 

By reading the log entries wherever they are stored, you go back in time to analyze the application’s behavior, understanding the sequence of events that happened to it. You could even repeat the actions taken by a user, in order to recreate and fix whatever problem you are struggling with.  

We need to log so that we can retroactively debug and analyze our application as if we are running it in the current moment. 

AngularJS Logging: The Improved Approach 

It is very easy to log all of the client-side messages to the server using AngularJS logging services. The biggest benefit is that it makes it easier to find application errors once in production phase and accelerate bug finding at deployment stage. 

Client-side logging can also help you identify the frequency of errors so that hotfixes can be prioritized in the order of importance as they can be labeled, helping you further to improve your AngularJS application for your clients. 

In AngularJS we have the different categories of logging as : $log.log()$log.warn()$log.info()$log.error() and $log.debug(). These help the programmer and debugger to understand and classify different information as simple log, warning, information, error or debug information. 

Logging with AngularJS - extending the built-in logger 

Showing the correct line numbers 

You can tell AngularJS to show the correct line numbers by binding the $log.* functions to the console.* functions. For Example: 

    $log.debug = console.debug.bind(console); 

You will have to do that for each one of the 5 $log methods separately. 

For Example: 

<!DOCTYPE html> 
<html> 
<head> 
<title>Logging Example in AngularJS</title> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"> 
</script> 
<script> 
var app = angular.module('myApp', []) 
app.controller("myController", ['$scope', '$log', function($scope, $log) { 
$log.debug = console.debug.bind(console); 
$log.info = console.info.bind(console); 
$log.log = console.log.bind(console); 
$log.warn = console.warn.bind(console); 
$log.error = console.error.bind(console); 
console.debug("Calling console.debug"); 
console.info("Calling console.info"); 
console.log("Calling console.log"); 
console.warn("Calling console.warn"); 
console.error("Calling console.error"); 
$scope.$log = $log; 
$scope.message = 'Hello World!'; 
}]); 
</script> 
</head> 
<body ng-app="myApp"> 
<form id="form1"> 
<div ng-controller="myController"> 
<p>Reload this page with open console, enter text and hit the log button...</p> 
  <label>Message: 
<input type="text" ng-model="message" /> 
</label> 
<br/> 
<br/> 
<br/> 
<button ng-click="$log.log(message + ' log') ">log</button> 
<button ng-click="$log.warn(message + ' warn') ">warn</button> 
<button ng-click="$log.info(message + ' info') ">info</button> 
<button ng-click="$log.error(message + ' error') ">error</button> 
<button ng-click="$log.debug(message + ' debug') ">debug</button> 
</div> 
</form> 
</body> 
</html> 

Output is: 

All the console messages are shown in line numbers. 

Logging in AngularJS Applications Made Simple

Showing the  $exceptionHandler as Factory  

As per https://cmatskas.com/logging-with-angularjs-extending-the-built-in-logger/  site:  

AngularJs has an impressive and robust logging mechanism through the $logService and $log injection. However, Angular logs everything to the console, which is neither a robust or scalable solution. Sometimes, you need to be able to intercept the exceptions and do something extra. This could be as simple as adding extra information or sending all logs to the server/database. 

The example below is simple and allows you to hook into the $exceptionHandler and pass a logger in the form of an AngularJS factory. The factory contains only one method => log(). This method first calls the base $log.error() method and after that point we have all the data we need to do as we want. The only limitation is that this custom logger deals only with errors and exceptions. 

Example: 

var mod = angular.module("LogDemo2", [] );
mod.provider('$exceptionHandler', { 
    $get: function( errorLogService ) { 
        return( errorLogService ); 
    } 
}); 
mod.factory('errorLogService', ['$log', '$window', function($log, $window) { 
      function log( exception ) { 
          $log.error.apply( $log, arguments ); 
          try { 
            var args = []; 
            if (typeof arguments === 'object') { 
                for(var i = 0; i < arguments.lengthi++ ) { 
                  arg = arguments[i]; 
                  var exceptionItem = {}; 
                  exceptionItem.message = arg.message; 
                  exceptionItem.stack = arg.stack; 
                  args.push(JSON.stringify(exception)); 
                } 
              } 
              // Phone home and log the error to the server. 
              /*$.ajax({ 
                  type: "POST", 
                  url: "./javascript-errors", 
                  contentType: "application/json", 
                  data: angular.toJson({ 
                      errorUrl: $window.location.href, 
                      errorMessageerrorMessage, 
                      stackTracestackTrace, 
                      cause: ( cause || "" ) 
                  }) 
              });*/ 
              console.log('from inside the log method ' + args.join('\n') ); 
          } catch ( loggingError ) { 
              // For Developers - log the log-failure. 
              $log.warn( "Error logging failed" ); 
              $log.log( loggingError ); 
          } 
      } 
      return( log ); 
  } 
]); 
 mod.controller('LogController2', function($scope) { 
  $scope.throwError = function(){ 
    throw {message: 'error message'}; 
  }; 
   $scope.throwException = function(){ 
    var a = b; 
  }; 
    $scope.throwNestedExceptions = function() { 
    try { 
      var a = b; 
    } catch (e) { 
      try { 
        var c = d; 
      } catch (ex) { 
        $log.error(e, ex); 
      } 
    } 
  }; 
}); 

Citation. 

Turn off logging in AngularJS 

$log.debug can be turned on or off depending on the requirement from an application. 

The only advantage of $log.debug over console.debug is the ability to turn off the debugging printouts. You can do that through the $logProvider provider in the config directive of AngularJS by adding the following statement: 

.config(['$logProvider', function($logProvider) { 
    $logProvider.debugEnabled(false); // turns off the calls to $log.debug only 
}]); 

Or simply, 

app.config(function($logProvider){ 
  $logProvider.debugEnabled(false); 
}); 

This turns off the $log.debug calls. However, $log.info(), $log.error(), $log.warn(), $log.log() is not turned off. Thus, your code will still print out any of the info, log, warn, and error messages.  

To see the Debug messages, in Chrome, we need to view the sidebar of the Console in Inspect window. 

In others, enable it from browser consoleGo to the console of the browser and set the level to verbose.  

Complete Example with debug: 

<!DOCTYPE html> 
<html> 
<head> 
<title>Logging Example in AngularJS</title> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"> 
</script> 
<script> 
var app = angular.module('myApp', []) 
app.config(function($logProvider){ 
$logProvider.debugEnabled(false); 
}); 
app.controller("myController", ['$scope', '$log', function($scope, $log) { 
$scope.$log = $log; 
$scope.message = 'Hello World!'; 
}]); 
</script> 
</head> 
<body ng-app="myApp"> 
<form id="form1"> 
<div ng-controller="myController"> 
<p>Reload this page with open console, enter text and hit the log button...</p> 
<label>Message: 
<input type="text" ng-model="message" /> 
</label>  
<br/> <br/> <br/> 
<button ng-click="$log.log(message + ' log') ">log</button> 
<button ng-click="$log.warn(message + ' warn') ">warn</button> 
<button ng-click="$log.info(message + ' info') ">info</button> 
<button ng-click="$log.error(message + ' error') ">error</button> 
<button ng-click="$log.debug(message + ' debug') ">debug</button> 
</div> 
</form> 
</body> 
</html> 
Case 1: 
With :  
app.config(function($logProvider){ 
$logProvider.debugEnabled(false); 
}); 

Output: 

We can see that if we open the “See Console Sidebar”, we get 1 error, 1 warning and 2 info(1 for log function, other one for info function). Here Debug() is missing as it is turned off by our application. Logging in AngularJS Applications Made SimpleIf we hide the Console Sidebar, we can still see all the messages displayed in the Console as:

Logging in AngularJS Applications Made Simple

Case 2: 

With :  

app.config(function($logProvider){ 
$logProvider.debugEnabled(true); 
}); 

Or we can skip the entire code for app.config(){….}); as by default debug is turned on. 

Output: 

We can see that if we open the “See Console Sidebar”, we get 1 debug, 1 error, 1 warning and 2 info(1 for log function, other one for info function). Here Debug() is seen as it is turned on by our application or by default. 

Logging in AngularJS Applications Made Simple

If we hide the Console Sidebar, we can see all the messages displayed in the Console except the debug message since it can be seen only in the verbose of the console, as:

Logging in AngularJS Applications Made Simple

Conclusion: logging in AngularJS 

In this post, we started with logging in AngularJS. AngularJS comes with a service called $log for logging. $log is a simple wrapper around the console.log facilities. We understood the difference between $log.info, $log.warn, $log.error, $log.log and $log.debug. We learned how to extend $log through AngularJS application and even work with extended features of the same. We also saw how to switch off debugging in AngularJS logging. 


Note: Angular is a version upgrade to AngularJS. Therefore, Angular refers to AngularJS in this article.

Monica

Monica Gupta

Author

I am Monica Gupta with 19+ years of experience in the field of Training and Development. I have done over 500 Corporate Trainings. I am currently working as a freelancer for several years. My core area of work is Java, C++, Angular, PHP, Python, VBA.

Join the Discussion

Your email address will not be published. Required fields are marked *

Suggested Blogs

How to Become a Successful Full Stack Web Developer?

Full stack developer roles are among the hottest careers in the tech space now. These talented folks can develop a whole product from scratch. A full stack developer is a combination of Front-end developer and Backend developer. These two in themselves are full time jobs and most people make careers out of one of them. So, we will start with Front-end roadmap and then go to Back-end roadmap. A person interested in becoming a Full-stack developer needs to have proficiency in both the front end and back-end tools, just like I started as a Front-end developer and later on become a Full stack developer by mastering JavaScript backend technologies and databases.The demand for Full Stack Web DeveloperThe demand for Full stack developers is the highest in early-stage startups, where they want to create a Minimum Viable Product at the earliest to showcase to the investors. It is also a nice skill to have in addition to frontend technologies or backend technologies alone, since an employer prefers people with both skills.There are a lot of technologies to learn to be a Full-Stack developer. We will discuss about them in the coming sections.   List of technologies to master to become a Full-Stack developer A full-stack developer is actually a combination of Frontend developer and Backend developer. We need to master both, and both have different Roadmaps. Let’s start with the basics. The frontend is the web-site which we see and it is primarily made with HTML and CSS.  JavaScript was also used earlier but nowadays, it is created with JavaScript frameworks like ReactJS, Angular or Vue. All these frameworks require one to learn the basics of HTML, CSS, & JavaScript. So, we need to learn the basics followed by at least one framework.In the backend we have a lot of technologies and databases also. So, we need to choose one backend framework from Java (Spring Framework), JavaScript (NodeJS) etc and then also learn databases. Databases are divided into two categories, which is NoSQL(MongoDB) and SQL(PostgreSQL, MySQL, Oracle) databases. So, you need to choose one of the databases.We are also required to know about DevOps, which is a practice of harmonizing development and operations whereby the entire pipeline from development, testing, deployment, continuous integration and feedback is automated. The knowledge of either AWS or Azure based cloud ecosystem is required, and also CI/CD like Jenkins and containerizing & orchestrating applications using Docker and Kubernetes.1. Frontend RoadmapLearn the BasicsPlease refer to the attached figure for Front-end roadmap, as we will be referring to this throughout this article. We have to start our journey by learning HTML, CSS and JavaScript which is the base for a web-app or website. HTML has changed a bit over the years, with the introduction of HTML 5 and semantics tags, so make sure to update yourself. JavaScript which was released in 1995, didn’t change much during the next 20 years. But once more and more developers started using it, the ECMA committee decided to add some very nice features and enhance the language, and renamed it ES6 in 2015. After that they regularly added new features to the language and have just released ES2020 in June 2020, which has many additional features. So, learn the basic JavaScript first and then upgrade to ES6 and newer versions. CSS is what makes a website or web-app beautiful, and is often considered the hardest part by a developer. Earlier, CSS was very confusing and had a steep learning curve, because of the use of floats to create a layout. Developers usually used to work with CSS frameworks like bootstrap to design a site. But things have changed a lot with the invention of CSS Grid and Flexbox. Some of the best resources to learn the basics are - html.specdeveloper.mozilla.HTMLStyle CSSdeveloper.mozilla.CSSdeveloper.mozilla.JavaScriptGetting Deeper Now, just learning JavaScript and some basic CSS will not make you a good Front-end developer as you have to take a deep dive into JavaScript. We will discuss CSS later, after learning the essentials of JavaScript.JavaScript EssentialsThere are many things associated with JavaScript which we need to learn before moving forward.The Terminal The first thing to learn is to work in a terminal, and master some of the basic commands. If you are on a Mac, it’s already based on Linux and runs most Linux commands. If you are working on Windows then you must install git bash, which will give you a Linux environment to work with. In JavaScript frameworks, we need to run a lot of commands from the terminal, like if we want to install a third-party dependency by npm.  The basics of Linux can be learnt from their official site.1. Linux FoundationVersion ControlNext, learning version control is very important because we should always keep our code in some remote repository like Github. The industry works on Git, which is version control software. It is completely command-based and is used heavily everywhere. Learn the basic commands which will be useful even for an individual developer. Later on, when working with teams, more advanced knowledge of the git command is required.Through the git commands, we store our code in repositories. The most popular ones are Github and Bit Bucket, so we need to learn how to store and link them.The basics of git can be learnt from this awesome tutorial.1. Git TutorialTask Runners   Task runners are applications which are used to automate tasks required in projects. These tasks include minification of JavaScript and CSS files, CSS preprocessing like from SASS to CSS, image optimization and Unit testing. The three popular task runners are npm scripts, gulp and grunt. The npm script is nothing but the package.json file which comes with React projects or is created in a Node.js project using npm init. Gulp and Grunt are much bigger applications and also have a plugin ecosystem that is suited for large JavaScript projects. The basics for these two technologies can be learnt from here. 1. Gulp2. GruntModule Loader and Bundler  Both module loaders and bundlers are required for large JavaScript applications. Knowledge of both is required, if the project you are working is a big Vanilla JavaScript project. When a large JavaScript application consists of hundreds of files, the module loader takes care of the dependency and makes sure all the modules are loaded when the application is executed. Examples are RequireJS and SystemJS.Module bundlers also do the same thing, building it at the time of application build rather than at the runtime. Popular examples are Webpack and Rollup. 1. RequireJS2. Github3. Webpack4. RollupJSTesting  Testing nowadays is very important in any type of project. There are two types of testing; one is known as Unit testing and other as end-to-end testing. For unit testing we write test cases and the most popular tool nowadays is Jest. End-to-end testing is automated testing, which emulates the whole app. Suppose, an app has a login screen and then it shows posts. The testing tool will run the web-app to check whether all the functionalities are done correctly. The two most popular options today are Puppeteer and Cypress. The tutorials to refer for these topics are - 1. Jest2. Puppeteer3. CypressLibraries and FrameworkThey are the most important part of the JavaScript ecosystem nowadays. It all started with the release of AngularJS in 2010. Before that period most enterprise apps were made in Java and were desktop apps. But AngularJS changed everything, because it made it easy to manage big projects with JavaScript and helped to create complex web-apps.1. React   It is the most popular JavaScript library today and is used by both enterprises and startups that have a huge ecosystem. It is not a complete framework like Angular and we have to install third party dependencies for most things. But if you want to learn a framework that will get you a job, then that framework would be ReactJS, and its demand is not going away for the next 5 years. The component approach and its easy learning curve have made React more popular than other frameworks. A good starting tutorial for React is1. ReactJSState Management   In React state management can sometimes become complex, when we need to share data between components. We generally take help of external packages in it with the most popular being Redux. But we also have other state management libraries like XState and Recoil. Server-side rendering   With performance becoming important nowadays, Server-Side Rendering speeds up the React projects even faster. In SSR projects, the React code is rendered on the server and the client browser directly receives the HTML, CSS, JS bundle. The only framework to do it is NextJS. Static Site Generators   Lot of sites don’t need to be updated frequently and it is the place where the only Static Site Generator for ReactJS, which is GatsbyJS shines. With the help of GatsbyJS we can create extremely fast static sites and it gets into Wordpress domain a lot with it. GatsbyJS also has a huge ecosystem of plugins, which enhances its functionalities. React Testing   Unit testing is a very important part of ReactJS projects, especially the ones which are very large. Unit testing ensures that we have lower bugs in Production build. The two popular libraries are – Enzyme and Jest. 2. Angular    It is a complete framework and unlike React requires very few external dependencies. Everything is built within Angular and we don’t have to go outside for more features. Since it was among the earliest frameworks, older projects are in Angular and it is still widely used in enterprises. A good tutorial to learn Angular is below. Angular3. Vue    Vue is another very popular JavaScript library, which has the best features of both ReactJS and Angular and has become very popular in recent years. It is widely used in both enterprise and startups. A good tutorial to start with Vue is below. Vue4. NuxtJS   It is used for Server-Side Rendering in Vue projects and is similar to the NextJS framework used in ReactJS for SSR.  5. Svelte    It is the newest of all frameworks/libraries and has become quite popular, but still not used much in enterprises and startups. It is different from React, Vue and Angular and converts the app at build time rather than at run time as in the other three. Good tutorials to start with Svelte are below. SvelteSvelte handbookCSS Deep DiveA lot has changed in CSS after it included CSS Grid and Flexbox; it has become much easier for developers to work with. CSS Essentials   It is now mandatory for frontend developers to learn CSS Grid and Flexbox, because through it we can develop beautiful layouts with ease. More companies are moving away from CSS Frameworks and have started working with CSS Grid and Flexbox, which are now supported by all browsers. Good tutorials to learn Flexbox and CSS Grid are below. CSS FlexboxCSS GridCSSPreprocessors  CSS preprocessors are used to add special functionalities in CSS, which it lacks. An example is Sass, which adds special features like variables and nested rules in CSS and is widely used in the industry for larger projects. The other popular one is PostCSS, in which we can use custom plugin and tools in CSS. CSS Frameworks  Frameworks were very popular from the early days of CSS, when it was very complicated because of floats. Bootstrap  This is the most popular and oldest CSS framework; easy to learn and also has a wide variety of elements, templates and interfaces. Bulma   It is another CSS framework, which is very popular and much easier to use than bootstrap. Tailwind CSS   This is a fairly new CSS framework and is quite popular nowadays. It follows a different approach than the other frameworks and contains easier classes. Styled Components (React)   This is a CSS in JS library and is for React only. It is used to create components out of every style and is very popular in the React world.  CI/CDThe Continuous Integration/ Continuous deployment is mainly used by DevOps. But a frontend engineer should know its basics. It is used to build, test and deploy applications automatically.Github Actions    It is a freely available CI/CD pipeline, which directly integrates to your github based project and can be used in a variety of languages. Deployment It is again a task which mainly falls into the domain of Backend engineers and DevOps, but a frontend engineer should know some basic and simple tools. Static Deployment   These products are mainly used to deploy static sites, which consists of HTML, CSS and JavaScript only. Two very popular services are Amazon S3 and Surge.sh Node Application Deployment   The projects containing node code cannot be deployed using static deployment. Even if the project is a simple ReactJS project, it also uses node for processing. These applications require services which run the Node code and deploy it. The three most popular services are Vercel, Firebase and Netlify. 2. Backend Roadmap (Including Storage, Services & Deployment)Understanding the BackendBackend is the part of the website that provides the functionality, allowing people to browse their favorite site, purchase a product and log into their account, for instance. All data related to a user or a product or anything else are generally stored in databases or CMS (Content Management System) and when a user visits any website, they are retrieved from there and shown. One of the responsibilities of a backend engineer involves writing APIs, which actually interact with the database and get the data. They are also involved in writing schemas of database and creating the structure of databases. Backend EssentialsFor a backend engineer, working in a Linux environment is an essential skill. A lot of the configurations are done on the terminal. So, he or she should be very good with Linux commands.Also, they should know both commands and the use of any git powered platforms like Github or bitbucket.Languages and FrameworksAll of the popular languages have some framework, which has been used for backend development. These frameworks are generally used to create API endpoints, which are used to fetch or store data in the database. For example, when we scroll articles on Facebook, these articles are fetched from a database and we use the GET method to fetch them. Similarly, when we write an article and hit submit, it uses POST method.Now, different frameworks implement this GET, POST and other APIs also referred to as RESTful APIs in their own way.Java   Java is by far the oldest and the most used language for backend development. It is also used for a variety of other tasks like Android development, but it shines in the backend because of its multithreading abilities. So, enterprise grade web-apps and web-apps with a lot of traffic prefer Java, because it handles loads better. The most popular frameworks for backend development in Java are Spring Framework and Hibernate. Some good beginner's tutorials are - 1. Spring framework2. Hibernate3. JavatpointJavaScript   It is a very popular choice for backend development, because on the frontend side JavaScript is the only choice. So, a lot of frontend engineers can take this choice to become Full-stack developers. Node.js   It allows developers to use JavaScript to write server-side code, through which they can write APIs. Actually, the API part can be done by numerous frameworks of Node.js out of which Express is widely used. The other popular framework is Fastify. Some good beginner's tutorials are - 1. Nodejs2. ExpressJs3. fastifyPython   Python is one of the most popular languages among developers and has been used in a variety of fields. The two most popular frameworks for Python are Flask and Django. Some good beginner tutorials are - 1. Flask2. DjangoC#   It is a very popular programming language which was developed by Microsoft and it has the power of C++. Its popularity increased once the .NET framework was released for backend development. As Microsoft is very popular in enterprises, the .NET framework is generally preferred in enterprises. A good tutorial to learn .NET is - 1. Dotnet2. Dotnet FrameworkGo  Go language which is also referred to as Golang, has gained popularity in recent years. It is used a lot in Backend programming and the two popular frameworks are Gin and Beego. DatabaseFor a Backend engineer, after making APIs with framework based on language, it's time to learn about Databases. Databases are used to store most of the things which we see in a web-app, from user login credentials to user posts and everything else. In the earlier days we only used to have one type of Database and that was Relational databases, which use tables to store data. Now we have two other categories also, one being NoSQL databases and the other In-memory databases. 1. Relational databases   Relational databases allow you to create, update and delete data stored in a table format. This type of database mostly uses SQL language to access the data, hence is also known as an SQL database. MySQL  It is one of the oldest databases and was released in 1995. It is an open-source database and was very popular in the 2000s with the rise of LAMP (Linux, Apache, MySQL, PHP) stack. It is still widely in use, but there are other popular Relational databases. A good tutorial to learn MySQL is - 1. MySQLPostgreSQL  PostgreSQL, which is also known as Postgres is also an old open-source Relational database, which was released in 1996. But it gained popularity recently, as it goes very well with modern stacks containing NodeJS and other backend technologies. A good tutorial to learn PostgreSQL is - 1. PostgreSQLOracle is the most popular and oldest relational database. It was released in 1979 and still remains the number one preference for enterprise customers. All the big banks and other organizations, run on Oracle databases. So, the knowledge of Oracle is a must in many companies for an Engineer. A good tutorial to learn Oracle is - 1. OracleMS-SQL  MS-SQL is also known as Microsoft SQL and is yet another commercial Relational database. It has got different editions, used by different audiences. It is also heavily used by enterprise users and powers a whole lot of big systems around the world. A good tutorial to learn MS-SQL is - 1. SQLServer2. NoSQL databases  NoSQL databases are also called non-SQL databases. The NoSQL databases mainly store data as key-value pairs, but some of them also use a SQL-like structure. These databases have become hugely popular in the 21st century, with the rise of large web-apps which have a lot of concurrent users. These databases can take huge loads, even millions of data connections, required by web-apps like Facebook, Amazon and others. Beside this, it is very easy to horizontally scale  a NoSQL database by adding more clusters, which is a problem in Relational Databases. MongoDB  It is the most popular NoSQL database, used by almost every modern app. It is a free to use database, but the hosting is charged if we host on popular cloud services like MongoDB atlas. Its knowledge is a must for backend engineers, who work on the modern stack. MongoDB uses json like documents to store data. A good tutorial to learn MongoDB is - 1. MongodbIt is a proprietary database service provided by Amazon. It is quite similar to MongoDB and uses key-value pairs to store data. It is also a part of the popular AWS services. A good tutorial to learn DynamoDB is-DynamoDBCassandra is an open-source and free to use NoSQL database . It takes a different approach when compared to other NoSQL databases, because we use commands like SQL, which are known as CQL (Cassandra Query Language). A good tutorial to learn Cassandra is - Cassandra3. In-memory databases   The in-memory database is a database, which keeps all of the data in the RAM. This means it is the fastest among all databases.  The most popular and widely used in-memory database is Redis. Redis  Redis (Remote Dictionary Server) is an in-memory database, which stores data in RAM in a json like key-value format. It keeps the data persistent by updating everything in the transaction log, because when systems are shut down their RAM is wiped clean. A good tutorial to learn Redis - RedisStorageStoring the data is an important part of any application. Although this is mainly DevOps territory, every backend developer should know the basics for the same. We need to store the database data and also the backend code. Beside this the frontend code must also be stored somewhere. Nowadays everything is stored in the cloud, which is preferred by individuals, startups and enterprises. The two most popular cloud-based storages are – Amazon S3 Azure Blob Storage Good beginner's tutorials for both areServices and APIsThese are theoretical concepts and are implemented by various services, but a backend engineer should know them and how to use them. Restful APIs  This is by far the most popular way to get data from a database. It was made more popular, with the rise of web-apps. We do GET, PUT, POST and DELETE operations to read, update, create or delete data from databases. We have earlier discussed different languages and frameworks, which have their own implementations for these operations. Microservices Architecture  In microservice architecture, we divide a large and complex project into small, independent services. Each of these is responsible for a specific task and communicates with other services through simple APIs. Each service is built by a small team from the beginning, and separated by boundaries which make it easier to scale up the development effort if needed. GraphQL  It is the hottest new kid in the block, which is an alternative to the Restful APIs. The problem with Restful APIs is that if you want some data stored in database, you need to get the whole data sent by the endpoint. On the other hand, with GraphQL, you get a query type language which can return only the part of the data which you require.  DevOps & DeploymentA backend engineer requires a fair bit of DevOps knowledge. So, we will next deep dive into the methodologies in DevOps. 1. Containerization & Orchestration   Containers are a method of building, packaging and deploying software. They are similar to but not the same thing as virtual machines (VMs). One of the primary differences is that containers are isolated or abstracted away from the underlying operating system and infrastructure that they run on. In the simplest terms, a container includes both an application’s code and everything that code needs to run properly. Container orchestration is the automatic process of managing the work of individual containers for applications based on microservice architecture. The popular Containerization and Orchestration tools are – Kubernetes Docker Good beginner's tutorials for both are -Kubernetes2. DevOps   DevOps is a set of practices that combine software development (Dev) and IT operations (Ops). It aims to shorten the systems development life cycle and provide continuous delivery with high software quality. The two most popular DevOps services are AWS and Azure. Both of them are cloud based and are market leaders. Both of these platforms contain a wide variety of similar services. AWS  It consists of over 200 products and services for storage, database, analytics, deployment, serverless function and many more. AWS is the market leader as of now with 33% of market share. The AWS certifications are also one of the most in-demand certifications and a must for frontend engineers as well as Backend engineers. Azure  Microsoft Azure is second in terms of market share of cloud-based platforms, with 18% of the market. It also consists of SaaS (Software as a Service), PaaS (Platform as a Service) and IaaS (Infrastructure as a Service) like AWS. 3. PaaS (Platform as a Service)   There are several smaller players, which provide Platform as a Service and are much easier to use than services like AWS and Azure. With these services you can directly deploy your React or other web-apps, by just hosting them on GitHub and pushing the code. These services are preferred a lot by freelancers, hobbyists and small companies as they don’t require investment in learning complicated services like AWS and Azure. The three most popular PaaS services are Digital Ocean Heroku Netlify 4. Serverless  Serverless computing is an execution model where the cloud provider (AWS, Azure, or Google Cloud) is responsible for executing a piece of code by dynamically allocating resources and only charging for the number of resources used to run the code. The code is typically run inside stateless containers that can be triggered by a variety of events including http requests, database events, queuing services, monitoring alerts, file uploads, scheduled events (cron jobs), etc. The code that is sent to the cloud provider for execution is usually in the form of a function. AWS Lambda  It is an event-driven, serverless platform which is part of AWS. The various languages supported by AWS Lambda are Node.js, Python, Java, Go, Ruby and .NET. AWS Lambda was designed for use cases such as updates to DynamoDB tables, responding to a website click etc. After that it will “spin down” the database service, to save resources. Azure Functions  They are quite similar to AWS Lambda, but are for Microsoft Azure. Azure functions have a browser-based interface to write code to respond to events generated by http requests etc. The service accepts programming languages like C#, F#, Node.js, Python, PHP and Java. Serverless Framework  It is an open-source web-framework written using Node.js. The popular services like AWS Lambda, Azure functions and Google cloud functions are based on it. CI/CD A backend developer should know the popular CI/CD (Continuous Integration/Continuous deployment) tools. These tools help to automate the whole process of building, testing and deployment of applications. Github Actions   It is a freely available CI/CD pipeline, which directly integrates to your GitHub based project and can be used in variety of languages. Jenkins  Jenkins is the most popular CI/CD automation tool, which helps in building, testing and deployment of applications. Jenkins was written in Java and over the years has been built to support over 1400 plugins, which extend its functionalities. Circle CI  Circle CI is also a CI/CD automation tool, which is cloud based and so it is different from Jenkins. It is much easier to use than Jenkins, but has a smaller community and lower user base. SecuritySecurity is an important aspect of any application. Most applications containing user personal data, like email etc, are often targeted by hackers. OWASP   The Open Web Application Security Project (or OWASP), is a non-profit organization dedicated to web application security. They have free material available on their website, making it possible for anyone to improve their web application security. Protecting Services & databases against threats   Hackers target databases of popular web-apps on a regular basis to get sensitive information about their customers. This data is then sold to the highest bidder on the dark-net. When such public breaches are reported, then it's a reputation loss for the enterprise also. So, a lot of emphasis should be given to Authentication, Access, Backups, and Encryption while setting up a database. The databases should also be monitored for any suspicious activities. Besides this the API routes also need to be protected, so that the hacker cannot manipulate them. Career roles Most of the companies hire Frontend developers, Backend developers and DevOps engineers separately. This is because most of the enterprise projects are huge, in which roles and responsibilities are distributed. But there is a huge demand for Full Stack developers in the startup sector in US and India. These companies need specialists who can get the product out as soon as possible with agile and small teams. Top companies hiringAlmost every company on the planet is hiring web-developers or outsourcing the development work. Since the past decade, the demand for developers has risen exponentially. The top technology companies which hire full stack developers are Facebook, Amazon, Apple, Netflix, Google, Uber, Flipkart, Microsoft and more.  The sites of each of these companies are web-apps (excluding Apple and Microsoft), with complex frontend and backend systems. The frontend generally consists of React or Angular and the backend is a combination of various technologies. The DevOps part is also quite important in these web-apps as they handle millions of concurrent connections at once.Salaries  The salary of a beginner Frontend developer in India starts from Rs. 300,000($ 3980) per year in service-based companies to Rs. 12,00,000($ 15,971) per year in the top tech companies mentioned above. The salary of a Beginner Full-Stack developer in India starts at Rs. 4,50,000 ($ 5989) per year in service companies to Rs. 12,00,000($ 15,971) per year in top tech companies. The salary for an entry level Frontend developer in USA is $ 59,213 per year and for an entry level Full stack developer is $ 61,042 per year.Below are some sources for salaries. web-developerfull-stack-developerfront-end-vs-back-endTop regions where there is demand There are plenty of remote and freelancing opportunities in web-development across the world. The two countries with most developers and top tech companies are USA and India. Silicon Valley, which is the San Francisco Bay Area, in Northern California, USA is the hub of technology companies.  The top city in India to start a developer job is the Silicon Valley of India – Bengaluru. The number of jobs is more than all the other cities combined and it also has a very good startup ecosystem. Almost all the big technology companies mentioned earlier and top Indian service companies are located in the city. After Bengaluru, the city where the greatest number of technology jobs are based is Hyderabad, followed by Chennai and then Pune. Entry PointsThe demand for web-developers is high and anyone with a passion for creating apps can become a web-developer. An Engineering degree is not mandatory to land a job as a web developer.  The most in-demand skill today and for the next 5 years is React and its ecosystem. So, if you know HTML, CSS, JavaScript and React, it is impossible to not get a job. Career Pathway  Most people start as an intern Front-end developer or Intern Full-Stack developer and in many cases Intern Backend developer. Many companies directly hire junior Frontend/Backend/Full-stack developers.  After that, the next step is the role of Senior Frontend/Backend/Full-stack developers. Many Frontend and Backend developers become full stack developers at this level, by learning additional technologies. Senior resources in Frontend/Backend/Full-stack can then go on to assume Team Lead roles. These people manage small teams in addition to being individual contributors.  After this a professional can become a Project manager, whose main responsibility is managing the team. Another role is that of Technical Project Manager, who manages the team and also has hands-on knowledge in Technology. The last role at this level is that of a Software Architect, who handles and designs big projects and has to look at every aspect of the technology to create the enterprise app. Generally Full-stack developers are preferred in this role, as they need to know all technologies. The highest career milestone is CTO or Chief Technology Officer, who handles all the technology teams and makes all technology decisions in a Technology company. Job SpecializationThere are some Full stack development specializations which I see nowadays in the industry. Full stack developers who work with React in the Frontend and Java in the Backend are in great demand. Similarly, developers who work with Angular in the Frontend and .NET in the backend are in great demand.How KnowledgeHut can helpAll these free resources are a great place to start your Frontend or Full-Stack journey. Beside these there are many other free resources on the internet, but they may not be organized and may not have a structured approach.  This is where KnowledgeHut can make a difference and serve as a one stop shop alternative with its comprehensive Instructor-led live classes. The courses are taught by Industry experts and are perfect for aspirants who wish to become Frontend or FullStack developers.Links for some of the popular courses & Bootcamps by KnowledgeHut are appended below-CSS3JavaScriptReactJSNodeJSDevopsFull-stack developer BootcampFront-end developer Bootcampback-end developer BootcampConclusion This completes our article on the Full stack developer journey by combining both the Frontend and backend roadmap. There are many people who become backend developers first by working on languages like Java and then go on to learn React to become full stack developers.  Again, many developers learn front-end development first with frameworks like React, and then become full stack developers by learning Node.JS. This path is easier for developers because both React and Node.JS use the same language which is JavaScript.We hope you have found this blog useful, and can now take the right path to become a full stack developer. Good luck on your learning journey!
9710
How to Become a Successful Full Stack Web Develope...

Full stack developer roles are among the hottest c... Read More

How To Install and Setup React Native on Mac

React Native Development Environment Installation:With the rapid growth of online websites, businesses, and the general ecosystem, it is crucial that website UIs load quickly on smartphones to encourage smartphone-based internet consumption. Facebook developed React Native from a need to generate UI elements efficiently, which formed the basis for creating the open-source web framework. Its native cross-platform capabilities allow usage for a wide range of platforms for application development, including Android, Web, Windows, UWP, tvOS, macOS, iOS, and AndroidTV. Microsoft also released a preview release in May 2020 that expanded the range of the React Native world, allowing desktop app development. React Native runs in the background of the destination device, and then communicates with the native platform via a batched asynchronous bridge. Its three main advantages are:It allows faster development due to its native natureThough it has a syntax styling similar to CSS or HTML, it is much quicker and efficientIt is flexible as it allows developers to write native code in various languages, including Java, Kotlin, and Swift.This article is about how to install and configure React Native CLI environment. First, we will learn how to install the framework, then check whether it works well and finally develop an app.PrerequisitesBasic computer proficiencyAn account with Administrative privileges on your computerAccess to the outlined documents and softwareA working internet connection to download the installation filesAudienceThis article guides first-time React Native users, junior developers, and developers with no experience with React Native. If curiosity nudged you to learn the framework due to the hype around React, then this is the guide you need.System requirementsSoftwareXcode version 11.3.1 or newer is required. Nodejs version 12 LTS or newer is required.HardwareMacOS requires a Mac device to operateRam - 4GBStorage - 10GBThese requirements ensure your tools run quickly and have enough storage for installation and development.System RequirementsReact Native requires macOS High Sierra (10.13) or higher to run efficiently.Installation through HomeBrew:HomeBrew is a package manager that helps you install and manage packages on Mac, and thus it will be essential to our installation process. You will install HomeBrew so that you can use it to install all the other tools necessary for React Native environment, including Nodejs, git, Watchman, and JDK.First download HomeBrew using the above link, then execute the command below in the Command Line Interface:brew—versionThe command verifies whether HomeBrew has been successfully installed and outputs the specific version installed as the following result shows:homebrew 2.1.7 homebrew/homebrew-core (git revision f487; last commit 2020-05-26)When the version is unavailable, you can install HomeBrew via this code:/usr/bin/ruby -e “$(curl –fsSL https://raw.githubusercontent.com/HomeBrew/install/master/install)”After installation, check whether HomeBrew has installed properly using the following command:brew--versionIf the software is well installed, the result will show the version and date as shown:homebrew 2.1.7 homebrew/homebrew-core(git revision f487; last commit 2020-05-26)NodejsReact Native is a JavaScript platform; hence it needs Nodejs to provide a JavaScript runtime.  Nodejs also provides essential tools such as a local webserver with live reloading, network tools, command-line tools, and web APIs.Use the HomeBrew command below to install Nodejs:brew install nodeCheck whether the installation is successful through the following command:node—versionIf the installation has occurred successfully, the Nodejs version will show up:V12.6.0Installation of Nodejs also includes installation of npm, the Node Package Manager. It would help if you had npm to help you install packages, libraries, and vital tools for your React development environment. To verify if npm is successfully installed, execute the following command:npm—versionIf the installation is successful, you will see the version as shown below:6.9.0WatchmanWatchman monitors the files and folders utilized by the framework and triggers specific actions if the files are modified. It would be best if you had Watchman for React Native to monitor source codes and rebuild them once they are changed.To install Watchman, execute the command below:brew install watchmanVerify installation through:watchman --versionif properly installed, the result will show the version as shown below:4.9.0React Native CLIYou need React Native CLI to develop the app by react-native. React Native CLI is installed by executing the npm command below:npm install --g react-native-cliCheck if the installation is successful using the following command:react-native --versionSometimes, users may get an error when using the npm install --g react -native-cli command. To avoid this, try entering sudo before this command, then enter your system password.If the installation is successful, you will see the version as shown:react-native-cli:2.0.1 react-native:n/a - not inside a React Native ProjectXcodeYou need Xcode for iOS app development, and you can download it via the above link. After installation, configure the Command Line Tools. Execute Xcode and go toXcode > Preferences > LocationsYou should see the Command Line Tools settings showing the version of Xcode as:Xcode 10.2.1 (10E1001)If the settings do not look like that, select the last version of the Command Line Tool from the dropdown menu.Go to components and select an iOS emulator, then download it (this is for those without iOS devices to run and test their apps on. It is also easier than using an actual device.)Move account tabs, select apple id, and input your apple id.Open Xcode and create a new project, name it anything, then close it. After project creation, click the root file and select "sign in and capabilities," then select your user id. Select your emulator and keep it ready for development.CocoapodsCoacoapods manages dependencies in iOS development, and thus it is necessary to develop an app by react-native.Install Cocoapods through the following command:sudo gem install cocoapodsVerify installation through:pod --versionif installation is successful, you can see the version as shown below:1.7.5JDKThe Java Development Kit is essential for the development of Android apps with react-native. Install JDK through the command below:brew tap AdoptOpenJDK/openjdk brew cask install adoptopenjdk8Verify installation through:java -versionIf you see the Java version as shown below, then Java has been successfully installed:openjdk version "1.8.0_222" OpenJDK Runtime Environment (AdoptOpenJDK)(BUILD 1.8.0_222-b10) OpenJDK 64-Bit Server VM (AdoptOpenJDK)(build 25.222-b10, mixed mode)JDK Installation also installs the Java Compiler, which can be verified by executing the following command:javac -versionIf the installation is successful, the following result shows up:javac 1.8.0_222Android StudioAndroid Studio is also an essential tool for developing an Android app using react-native.CONFIGURATIONOn the install type screen, select the custom option, choose your preferred theme, then select the performance (Intel R HAXM) option and Android Virtual Device option. Click Next, then leave the Emulator settings as they are, and click next again. Allow the standard installation to continue and click Finish to complete the process.ANDROID STUDIO SDK CONFIGURATIONClick Configure>SDK Manager and proceed to Android SDK Configuration.Select the Show Package Details option and select the following options:Android SDK Platform 28Intel  X86 Atom System ImageGoogle APIs Intel x86 Atom System ImageGoogle APIs Intel x86 Atom_64 System ImageClick ok to install the options selected.In the SDK Tools Window, select show package details >Android SDK Build Tools >Android SDK Build Tools 23.0.1.ANDROID STUDIO ENVIRONMENT VARIABLE CONFIGURATIONYou need to set environment variables to ensure the development environment fits your specifications.  Ensure that the ANDROID_HOME environment variable connects to your existing Android SDK to avoid complications.Open and include the following code to the ~/.bash_profile file or the ~/.zshrc file to add the environment variables:For .bash_profile users, use the following command:source ~/.bash_profileAfter configuration, restart the terminal, then execute the following command: adbThe correct result if all variables are successfully configured is:Android Debug Bridge Version 1.0.41 version 29.0.1-5644136 Installed as /Your Android SDK Directory Location/platform-tools/adbGit1.You can also use git, which comes with Xcode. However, if its unavailable, run the code below:brew install gitgit is a substitute for the Android Studio development environment.Gradle DaemonSometimes you may need to modify the java code, in which case, your development speed will be affected. Gradle Daemon is a tool that manages these changes to speed up your development.Other Installation MethodsExpo CLIExpo CLI is a tool built to install and manage react-native frameworks. However, its unsuitable feature is that it has numerous native features, which makes building an app tedious and also makes the app size more extensive than it needs to be. Additionally, incorporating elements in an app that are not available in Expo CLI is difficult, making the tool unsuitable for developers. Despite that, Expo CLI has many useful native tools, unlike React Native CLI, such as geolocation, camera, the microphone that can come in handy for most application needs. Expo CLI is a much easier route than the react-native CLI route.The installation process is as follows:1.Install the Expo CLI command line utility using:Npm install –g expo-cli2.Run the command below to create your first project:expo init my app3. Browse to the directory with the following command in the terminal:4. Finally, run the projectExpo start5. A development environment server will be started by these commands. Running the app requires installing the Expo client app to your device (iOS/Android) then connecting it to your computer. Android requires scanning the QR code on the terminal to authenticate the project, while iOS requires QR code scanning using the camera app. On the Android (emulator/real device), use the following command to initialize the app:npm run android6. While on the iOS emulator run:npm run iosExpo has docs that you can reference for solutions or even utilize the Expo Forums created for the Expo community to ask questions.Expo is mostly best suited for beginners as it does not include the use of native code thus cannot be used to develop complex applications with custom components.TestingProject structureReact Native project structure consists of a project directory with configuration files such as package.json, app.json, .watchman.json at the root; separate Android and iOS folders; a _tests_ folder with validation tests for the project; a nodes_module for housing smaller app modules; and an index.js file that maps the application and serves as the initialization point of the application. package.json  specifies project dependencies and versions, while app.json contains the app name.The npm (node package manager) manages the node_modules folder, which stores all the project library dependencies. You should avoid modifying the files present in the folder since alterations performed cannot be assured to be stable from updates/installs. Assets in the public folder are to be shared publicly. The src folder contains all development work by the developer, including components and source codes.Developing an app1. First, you need to lock the version you build with to ensure the app still works even after updates, using the following command:npm config set save-exact=true2. Create a native project through the command:react-native init AwesomeProject cd AwesomeProject react-native run-iosYour new app will run successfully in the emulator.3. In iOS, execute the command below:cd SampleApp #react-native run ios npm run iosThe react-native app will show up on the emulator.4. On Android, run the following command:cd SampleApp #react-native run-android npm run androidYour Android emulator will output:Welcome to ReactSecond App VerificationHello World is a simple program for most development environments. Open index.ios.js for iOS or index.android.js for Android, then proceed to delete everything between the tags .  Write Hello World and execute the emulator.The result will be Hello World on the screen.Modifying Your AppAfter successful testing, you can modify your app through the following steps:Open index.ios.js or index.android.js and edit some files.Click CommandX + R in the iOS Emulator and reload to see changes.Potential issuesYou might encounter problems while installing Cocoapods or React Native CLI - the most probable solution is entering a sudo command before the installation command, which will prompt you for your system password. Input the password, and your installation will go through just fine. You might also get this result [Broken AVD system path. Check your ANDROID_SDK_ROOT value]. Check if you installed android -sdk using homebrew; if you did, then uninstall it through the following command: brew uninstall android-sdk Another error is No ANDROID_HOME which means the bash files do not point to the ANDROID_HOME path. You can correct this through the following steps:Open and add the following code to the ~/.bash_profile file or the ~/.zshrc file to add the environment variables:#export ANDROID_HOME=$HOME/Library/Android/sdk export ANDROID_HOME=android SDK directory location/ Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/tools/bin export PATH=$PATH:$ANDROID_HOME/platform-toolsFor .bash_profile users, use the following command:source ~/.bash_profileThen proceed to verify the correction using the following code:echo $ANDROID_HOME // default: /Users//Library/Android/sdkAndroid Emulator won't run from Android Virtual Device Manager – Android Studio rarely shows an error that may occur in the Android Device Emulator; thus, you need to utilize the command line and run the commands below to check the name of the Android virtual device:Avdmanager list avdThen runEmulator –avd Wait for the device to boot up, then run your app in the emulatorReact-native run-androidYour app should run successfully.No Connected devices- you should run the following commandReact-native run-androidWrong Android emulator – you need to find the right emulator using the following code:find - -name emulator –type f /Users//Library/Android/sdk/emulator // this /Users//Library/Android/sdk/tools/emulator // not thisRestart the terminal and verify the error is gone.Avdmanager not found- write ~/.bash_profile, then add the following code afterwards:PATH=$PATH:$ANDROID_HOME/tool s/bin export PATHthen runsource ~/.bash_profileQuit and restart the terminal, then run the tools.Uninstallation procedureSometimes you might need to uninstall and wipe off the whole react-native environment due to issues such as a broken development environment which can be caused by misusing commands or assigning storage to variables incorrectly.  To do so efficiently, use the uninstall command together with the -g flag, then include the scope if the package is scoped.  A good example is as follows;npm uninstall -g react-native-cliornpm uninstall for scoped package usenpm uninstall As our installations have a package.json file, you might need to remove a package from the dependencies in that file. Use the following commands to effect these changes:npm uninstall --save or the following for a scoped packagenpm uninstall --save You will also need to verify if the uninstallation is successful through the following commands on macOS:ls node_modulesThis command ensures the node_modules do not contain a folder for the uninstalled files.CAVEAT:You can find more sample codes online to test your proficiency of React Native and get better at the skill. React Native is based on MIT License that grants Facebook copyright for portions of React Native for macOS extension derived from React Native. Remember to only download software from the official stated sites to avoid downloading compromised, malware-ridden software that can cripple your computer. If your computer shows any warning while executing any of the above steps, ensure to verify the software, ask an expert or ask on online community platforms. After completing and understanding all these steps successfully, you are now officially a beginner. You can proceed to the next stages of React Native app development until you become an expert. Some of the most significant areas you need to look at afterwards include animation, command-line instructions, components, shareable APKs, custom fonts, debugging, ESLint, images, layout, HTTP requests, Firebase integration, listview, native modules, and routing.The guide presented has shown how to install React Native through various methods and why the tools stated are required, then showed examples of apps and finally the uninstallation procedure. Tooling and development in React Native are simple, and the learning curve is short, making it an ideal framework for web developers.  The growth of internet consumers, cross-platform development, and the whole of the internet ecosystem is an excellent catalyst for React Native to grow in popularity among developers. It offers them faster development speed while offering internet consumers speedier loading times and more beautiful website UIs.  As you have seen, React development is simple; hence it should convince you to get started and launch your own apps within a short period. Being a new but highly applicable language, React Native holds a lot of opportunities, career wise and development wise. There are also numerous React Native platforms on the internet that can help you solve challenges you might face in development. Keep coding and have fun!
8833
How To Install and Setup React Native on Mac

React Native Development Environment Installation:... Read More

How to Install MongoDB on a Mac

MongoDB is one of the most popular unstructured database management systems that can store a high volume of data. It is a document-oriented database system that belongs to the family of NoSQL (non-SQL). Here the data and records are stored as documents that behave more like JSON objects. Documents are a combination of key-value pairs that form the basic unit of data in MongoDB. This database system came into action in mid-2000.What is NoSQL and why should we use NoSQL?NoSQL stands for Not Only SQL or non-SQL and is an unstructured database that helps store and retrieve data. In the year 1998, Carl Strozz introduced NoSQL. It models the data by means other than the tabular relations. It means such databases do not have a fixed schema, but are intended explicitly for the distributed data that demands humongous data storage. We use NoSQL databases for real-time web apps, mobile apps, big data, etc. Websites like Google, Twitter, Amazon, Facebook, Instagram, etc., collect terabytes of data every day.Earlier, web applications were simple and did not generate such huge amounts of data. But with the advent of big companies like Facebook, Google, Amazon, etc., huge volumes of data are generated, because of which NoSQL databases have become popular. Traditional RDBMS (like SQL) uses simple queries to store and retrieve textual data. But NoSQL database management systems embrace a wide range of file systems storing structured, unstructured, semi-structured, and polymorphic data.Features of NoSQLNoSQL databases do not follow the relational model. They are schema-free, or they do not follow any specific schema. NoSQL renders heterogeneous data structures (graph, tree, column family, key-value pair, document, etc.) on the same domain. Data is not stored flat in rows and columns (table). NoSQL does not demand data normalization and object-relational mapping. NoSQL does not demand setting up complex concepts like joins, referential integrity, ACID properties, etc. Who should use MongoDB?Developers who want to deal with structured, semi-structured, or unstructured data need to use MongoDB for their applications. Those who are into Big data analysis can also use MongoDB. Again, if an application's data needs agility, scaling, and high performance, MongoDB is the best solution.   It supports a broad spectrum of use cases, from real-time exploratory and predictive analytics to parallel data processing. MongoDB can provide high-performance data storage even when spread across multiple servers.PrerequisitesSoftware Requirement:macOS 10.13 or later MongoDB 4.4 Community Edition (we will show the download procedure later) Install Xcode Command-Line Tools: Homebrew demands to install the Xcode command-line tool from Apple's Xcode before using it. To install Xcode, you have to run the following command in your macOS Terminal:  xcode-select --install Homebrew package manager: By default, macOS does not incorporate the Homebrew package. You can install Homebrew using the documentation given on their official website (https://brew.sh/#install).  Hardware Requirement:Intel Processor / Apple M1 Processor 4 GB RAM preferred Installation StepsInstall Manually without BrewStep 1: Let us now download MongoDB. For this, open your web browser and type: google.comStep 2: From Google search, type: MongoDB and hopefully, the first link the search throws up would be the MongoDB link. From here, we have two ways of installing MongoDB. Follow these steps to install using the macOS terminal.Step 3: Go to mongodb-community Select the version, platform, and package. Make sure you choose macOS as the platform and 'tgz' as the file format and click the download button.Step 4: Once the tgz file gets downloaded, go to the macOS terminal to extract it. Step 5: Mostly, your MongoDB will get downloaded in the Downloads folder. For this, type the following command in the terminal:cd Downloads/ ls tar xzf mongodb-osx-ssl-x86_64-4.4.tgz Step 6: Now, we have to move the MongoDB folder to our local binary storage. sudo mv mongodb-osx-ssl-x86_64-4.4 /usr/local/mongodbThis will ask for your system password. Provide the password. You can change the directory to /usr/local/mongodb and see whether all the files exist or not using the ls command. Note that this step is optional. To change the directory, type the command cd /usr/local/mongodb Next, you have to create the db folder. By default, MongoDB writes or stores the data in the folder called data/db. The command for this will be sudo mkdir -p /data/db The -p flag will allow us to create the directory structure. Now, to check whether this path and directory have been created or not, we use the command: cd /data/dbTo check whether we are on the right directory or not, just type the command: pwdFor changing the permission, you need to know your username first. To know your username, type the command: whoamiNow change the permission of this directory. To do this, the command is: sudo chown /data/db Finally, you are eligible to directly run the mongo process.  Install using Brew –If you want to install MongoDB through Homebrew manually, follow these steps – Step 1: Homebrew helps in installing and managing applications on MacOS. If you haven't downloaded or installed Homebrew, then click the link (https://github.com/mongodb/homebrew-brew) to download the official Homebrew formula for MongoDB, by running the command in your macOS Terminal:  brew update  brew tap mongodb/brew Step 2: Once the Homebrew package resides in your system, you can download MongoDB using brew. Step 3: Type the following command in your macOS Terminal: brew install mongodb-community@version-numberStep 4: This installation will add the following binaries: The mongod server The mongo shell The mongos sharded cluster query router Step 5: The installation will take a few seconds. Once done, you can create a directory to store MongoDB data using the following command. sudo mkdir -p /data/db Step 6: Now, you have to note that your data directory should have the appropriate permissions. To do this, execute the command: sudo chown -R `id -un` /data/db Step 7: This will ensure that the data directory is ready and has all the proper permissions. Step 8: Apart from that, the MongoDB installation will produce the following files and directories at the locations given below – Intel Processors Apple M1  Log directory/usr/local/var/log/mongodb/opt/homebrew/var/log/mongodbConfiguration file/usr/local/etc/mongod.conf/opt/homebrew/etc/mongod.confData directory/usr/local/var/mongodb/opt/homebrew/var/mongodbStep 9: Let us now run the MongoDB community Edition. You can use the brew command to run MongoDB as a macOS. A manual procedure is needed to run MongoDB services on macOS. To execute MongoDB daemon, which resides by the name mongod (process), use the following command: brew services start mongodb-community macOS will run this process as a macOS service. Step 10: For stopping a mongod process running as a macOS service, apply the following command: brew services stop mongodb-communityStep 11: For running MongoDB in the background manually and listening for connections on a given port, use the following command - For Mac systems with Intel processors: mongod --config /usr/local/etc/mongod.conf --fork For Mac systems with Apple M1 processors: mongod --config /opt/homebrew/etc/mongod.conf –fork Step 12: Next, verify your MongoDB version. To do this, type the following command: mongo –version Step 13: The command line will display the installed version of MongoDB on your Mac system. Developers recommend using the newest version of libraries and software whenever feasible. It will keep you away from any compatibility issues with client-side applications. Step14: You can view the installation list by typing the command: mongodb Step15: Use the command mongod --config /usr/local/etc/mongod.conf to start the MongoDB Step 16: To connect to mongodb service, type the command: mongo Step17: Use the ‘show dbs’ command to see all databases. You can learn more about the working of MongoDB and become an expert NoSQL database administrator by joining the course mongodb-administrator. This course covers features of MongoDB 4.0 and future releases. Uninstall MongoDB on macOS X –Uninstalling MongoDB from your system will entirely remove MongoDB along with its associated files. Before uninstalling MongoDB, check whether any mongo service is running by using the command: launchctl list | grep mongo If any running process exists before uninstallation, you should stop or kill it. To kill all the processes related to mongod, use the command: pkill -f mongod The command to uninstall MongoDB from your system is: If installed via brew: brew uninstall mongodb-communityOr, if installed manually you can simply delete the folder: rm -rf If you have a separate folder for the database, use the command to remove that database directory: rm -rf /data/db MongoDB is the leading NoSQL, document-based, open-source database system. It is a cross-platform system - licensed under the Server-Side Public License (SSPL). Due to its broad spectrum of features and benefits, it became popular very quickly. Hopefully, this article has helped you understand the basics of installing MongoDB in your Apple system.   In this article, we have walked you through the two ways to install MongoDB in a macOS. Also, this article explicitly talked about installing MongoDB in Apple systems with Intel processors and with Apple M1 processors. So, you can navigate this article as per your system. You can learn more about MongoDB installation and join the course from mongodb-administrator.
8996
How to Install MongoDB on a Mac

MongoDB is one of the most popular unstructured da... Read More