Generate Webpack Cofiguration file (webpack.config.js) using webpack-cli

 

In this article, i am going to show you how to generate webpack.config.js  file with webpack-cli.  After that we will look at the each component of the generated webpack.config.js in detailed with their usage.

The official documentation of the webpack :-  https://webpack.js.org/concepts/

webpack.config.js is the file that contains the webpack related configurations for the project. This will be read by the webpack process when it starts its execution.

 

You need to follow the instructions given below to generate webpack.config.js for your NPM based project.

Continue reading “Generate Webpack Cofiguration file (webpack.config.js) using webpack-cli”

Configure Babel and Webpack for NPM (Node Package Manager) based project

 

What is NPM (Node Package Manager) ?

NPM (Node Package Manager) is a package manager for the JavaScript programming language. It is the default package manager used in NodeJs.  It enables the path of accessing thousands of  reusable javascript libraries for your project.

NPM was initially developed as the package manager of the NodeJs. Therefore NPM is distributed (available) with the NodeJs installation.

 

NPM (Node Package Manager) and NodeJs Server

Here we are going to create a project that manage its dependencies with NPM.  Therefore if you dont have the NPM installed in you development environment, please visit the NodeJs website and install the NodeJs.  If you instal the NodeJs, you will get both NPM (Node Package Manager) and NodeJs Server. Since the Node Server is available,  it can be used as a development server to deploy the project files.

Continue reading “Configure Babel and Webpack for NPM (Node Package Manager) based project”

Spring Boot Test: Writing Unit Tests for the Controller Layers with @WebMvcTest

 

Unit Tests and Integration Tests

@SpringBootTest annotation will load the fully ApplicationContext. Therefore it is highly used for writing the integration testing in web server environment. This will not use slicing and scan for all the stereotype annotations (@Component@Service, @Respository and @Controller / @RestController) and loads the full application context. Therefore this is more good at in the context of writing integration testing for the application.

@WebMvcTest annotation will load only the controller layer of the application. This will scan only the @Controller/ @RestController annotation and will not load the fully ApplicationContext. If there is any dependency in the controller layer (has some dependency to other beans from your service layer), you need to provide them manually by mocking those objects.

Therefore @SpringBootTest is widely used for Integration Testing purpose and @WebMvcTest is used for controller layer Unit testing.

Continue reading “Spring Boot Test: Writing Unit Tests for the Controller Layers with @WebMvcTest”

React Native: A JavaScript framework to build real native mobile apps (Android and iOS)

React-Native originated from the React project.  React is a JavaScript framework/library for building user interfaces. The fundamental building block of React is the Component.

React-Native is a javascript library/framework that is used to build native mobile apps. It is built on top of the React framework with some added features for the native mobile development.

 

What is native mobile development?

The most popular mobile operating system are Android and iOS. The development of mobile application for those platforms using the officially  recommended technologies, libraries and frameworks is known as the native mobile development.

e.g:- For Android (Android SDK + Java Or Kotlin

For iOS Swift or Objective C

Then  you might be thinking of how the react-native has become a native mobile application development framework. let me explain.

In React Native, we are trying to build native mobile app with some framework provided javascript components. Those components will be compiled (or transformed) into native android or iOS  application (native android code) when building the application. Therefore ultimately you will get something similar to what you get with native development. Therefore the built application will behave exactly same as native application and will be having the access to all of the core features of the underlying operating system of the device.

 

What is React-Native?

As i have already described, React-Native is a Javascript framework that can be used to develop native mobile application. The code written in react-native framework (with javascript) will be converted/transformed into the real native (Android and iOS) platform code in the compilation and building process. Therefore ultimately it will be a real native code that is almost similar to what you get from native mobile development (Android or iOS).

 

How does React Native differs from Ionic?

In ionic, we are building a HTML based web application that runs inside the native (Android or iOS) mobile application (with support of WebView). WebView is basically a hidden browser.  So it is just a web application that runs inside(that is hosted inside) the WebView component of the underlying native application. Therefore it is not a native mobile app and it has some limited wrappers to access the core features of the underlying operating system (Android or iOS) of the device.

 

Mobile Specific Components for React-Native 

Unlike in “normal” React apps built for the browser, you’ll NOT use HTML tags. Instead, you’ll use a set of pre-built components which will be compiled to native code by the React Native toolchain.

In the React, you can see <div> and <span> components much similar to HTML elements. But in react-native you cannot use such components as the native mobile application does not recognize <div> and <span>. It has some special developed components such as <View> , <TextView> etc  and those will be compiled/transformed into native application syntaxes in the compilation process.

Screen Shot 2018-07-01 at 12.52.39 AM.png

 

 

Does it compile everything into the native application code?

No. Only the react components designated for UI rendering will be transformed into the native application code (native component).  Other javascript code will be remained as javascript.

e.g:- View will be transformed into Android View component.

Text will be transformed into Android TextView.

 

Screen Shot 2018-06-30 at 9.19.58 PM.png

 

 

 

Swagger for documenting your Spring Boot REST Api

 

What Is Swagger?

Swagger is a set of open-source tools built around the OpenAPI Specification that can help you design, build, document and consume REST APIs.

Swagger  is mostly used as an open source project for describing and documenting RESTful APIs.  Swagger-UI an another tool which provides the capability of displaying the REST Api documentation in the browser.  Besides rendering documentation, Swagger UI allows other API developers or consumers to interact with the API’s resources without having any of the implementation logic in place.

The more details can be found through following documentations.

https://swagger.io/docs/ 

http://springfox.github.io/springfox/docs/current/

 

Springfox for Swagger

The Swagger 2 specification, which is known as OpenAPI specification has several implementations. Currently, Springfox that has replaced Swagger-SpringMVC (Swagger 1.2 and older) is popular for Spring Boot applications.

Continue reading “Swagger for documenting your Spring Boot REST Api”

Spring Boot + SLF4J : Enhance the Application logging with SLF4J Mapped Diagnostic Context (MDC)

 

 

What is SLF4J?

I believe that SLF4J is not a new concept for most of the java developers. Here we are going to look at the MDC feature of the logging framework. If you need to brush up your knowledge on SLF4J,  here it is the time.

The Simple Logging Facade for Java (SLF4J) serves as a simple facade or abstraction for various logging frameworks, such as java.util.logginglogback and log4j.

SLF4J allows the end-user to plug in the desired logging framework at deployment time.

Continue reading “Spring Boot + SLF4J : Enhance the Application logging with SLF4J Mapped Diagnostic Context (MDC)”

Microservices: Declare Zuul routes with Eureka serviceId (Spring Cloud + Zuul + Eureka)

 

In a previous article, we have declared/defined the Zuul routes by providing the service details (URL) manually (Click here to visit that article). That means we have provided the domain name or ip address  and port number of each service.  Just think of a situation where the application contains a large number of microservices. Do you think that it is practical to find (manually) the server details (ip address/domain) and port details of every service? If that is difficult, then how do we declare the zuul route mapping to expose each service through the Zuul Proxy?

The solution is to perform the Zuul routes mapping with serviceId registered in the Eureka Server“.

 

Here i am not going to discuss about the importance of Netflix Zuul Proxy or Netflix Eureka server.  I have already written two separate articles on both of those areas. If you need to refresh your knowledge on those areas, please refer the relevant articles.

 

What we are going to do here?

In order to demonstrate the serviceId based Zuul route mapping, we will be creating following set of applications.

  • Eureka Server :- Spring Boot Applciation to act as Eureka Server. All the microservices will be registered here.
  • Zuul Proxy: – Spring Boot Application to act as Zuul Reverse Proxy. This is the centralized gateway for directing all the requests for the misroservices. Zuul proxy will communicate with Eureka server to get the details (ip address and port) of the relevant microservice for delegating the client request.
  • student-service :- just dummy microservice for representing the backend business service.

 

Lets create them one by one. The full source code of this application can be found at GitHub.

 

Eureka Server

Eureka Server is just another spring boot application with Spring Cloud Netflix Eureka dependency. Then annotate the main spring boot configuration class with @EnableEurekaServer annotation.

Therefore create a spring boot application with Eureka dependency.

eureke-server

 

Then  add the @EnableEurekaServer annotation to the main Spring Boot Application configuration class (That is the class annotated with @SpringBootApplication annotation)

 

 

application.properties (Eureka Server)

Continue reading “Microservices: Declare Zuul routes with Eureka serviceId (Spring Cloud + Zuul + Eureka)”