React.js using npm, babel and webpack.

React React React… ok so what is React and how we can build a basic application in it.

Here my first trial of React.js with babel, npm and webpack.

Gone through many blogs few are saying that React can cover the complete MVC, but what I got up-to now React basically covers the V(view from MVC).

I am still struggling with the doc, yea I am trying to learn React but the flow of the doc is a bit complex to me so collecting data from several resources.

Here is the example what I tried from scratch.

Install NodejS and npm as per your distro.

Create a directory let’s say react-hello-world and initialize the it using npm.

mkdir react-hello-world
cd react-hello-world
npm init

Select default for all prompts.

Installing and configuring webpack using npm.

webpack is a module bundler. webpack takes modules with dependencies and generates static assets representing those modules based on configuration what you did.

npm i webpack -S

Configuration for webpack.

I follow vim, so the commands with vim. You can use any editor you wish.

vim webpack.config.js

var webpack = require(‘webpack’);
var path = require(‘path’);

var BUILD_DIR = path.resolve(__dirname, ‘src/client/public’);
var APP_DIR = path.resolve(__dirname, ‘src/client/app’);

var config = {

entry: APP_DIR + ‘/index.jsx’,
output: {

path: BUILD_DIR,
filename: ‘bundle.js’


module.exports = config;

The APP_DIR holds the directory path of the React application’s codebase and the BUILD_DIR represents the directory path of the bundle file output.

The output instructs webpack what to do after bundling process has been done. Here, we are instructing it to use the src/client/public directory to output the bundled file with the name bundle.js

First, create the folder structure like

– – src
– – – – client
– – – – – – app

Let’s create a index.jsx into ./src/client/app to verify that we did a proper configuration.

vim src/client/app/index.jsx

console.log(‘Hello World!’);

Now execute the command

./node_modules/.bin/webpack -d

The above command run the webpack in development mode and create the bundle.js

Now for making this more interactive adding an index.html in ./src/client

vim src/client/index.html

Screenshot from 2017-04-21 18:53:10
Now open your browser and enter the path absolute-path-of-your-directory/react-hello-world/src/client, you can see Hello World! in the console.

Installing Babel and configuring using npm.

npm i babel-core babel-loader babel-preset-es2015 babel-preset-react -S

The babel-preset-es2015 and babel-preset-react are plugins being used by the babel-loader to translate ES6 and JSX syntax respectively.

As we did some configuration for webpack, babel-loader also requires some configuration.

Create a .babelrc

vim .babelrc


“presets” : [“es2015”, “react”]


The next step is telling webpack to use the babel-loader while bundling the files

vim webpack.config.js

// Existing Code ….
var config = {

// Existing Code ….
module : {

loaders : [


test : /\.jsx?/,
include : APP_DIR,
loader : ‘babel-loader’





Now we are done with the webpack and babel. Let’s write some code in React

Install React and React-dom

npm i react react-dom -S

Replacing the existing console.log in index.jsx with

import React from ‘react’;
import {render} from ‘react-dom’;

class App extends React.Component {

render() {

return Hello World!;



render(<App/>, document.getElementById(‘app’));

Now execute the command again

./node_modules/.bin/webpack -d

Open index.html in the browser and there it is

Hello World!


Scroom : A jQuery plugin

I was working on project and client ask for something but after a lot of Googling, I didn’t find anything that matches my expectations. But there was a lot of searches related to that.
I thought someone has to build a plugin which will fulfill this requirement, then I thought that someone could be me.

And here it is the Scroom jQuery plugin.

# The Scroom plugin will basically have features like
1. Scroll the big images.
2. zoom in and out.
4. Selection of area.
5. Open modal after selection.
6. Savable form data and co-ordinates.
7. Removable selection with form data and co-ordinates.
8. Visualization of selection details.

Scroom keys
1. boxes : For populating selected areas.
2. saveDataUrl : URL which will handle the form data.
3. saveCoordinateUrl : URL which will handle the coordinates.
4. deleteUrl : URL which will use for deletion of saved selected area.
5. hoverData : Fields name display on hover with values.

# For populating saved selected area
var savedBoxes = [

$(‘#scroom-block’).scrollZoom({boxes: savedBoxes});

# For displaying details of selected area on hover
var savedBoxes = [
{“id”:”square-306-238″,”left”:”306″,”top”:”238″,”width”:”40″,”height”:”27″, “name”:”test1″, “description”:”testdes1″},
{“id”:”square-660-312″,”left”:”660″,”top”:”312″,”width”:”80″,”height”:”51″, “name”:”test2″, “description”:”testdes2″},
{“id”:”square-380-265″,”left”:”380″,”top”:”265″,”width”:”180″,”height”:”124″, “name”:”test3″, “description”:”testdes3″}

var displayFields = [‘name’, ‘description’];

$(‘#scroom-block’).scrollZoom({boxes: savedBoxes, hoverData: displayFields});


History of my watch PR

I was working on Pagure, fixed few random issues. That boost me up so searched for more issues and thought why not go for adding a feature! I just selected one and asked Pingou that I want to work on this issue.

I started working on the issue. That was basically a feature for showing the users either you are watching or not the current repo and you can also change the current watch status for the repo. I added the markup, migrations, logics and pushed it. I was excited “Yea, Now I have done some coding!!”. But there was time for this thought. I started getting comments, those were not for “I have done a great coding!” rather for the fixes. Even I got comments for indentation fixes.

I started to work as per the comments and reached to a stage where I realized I must missing something that was nothing just my interest. I left working on this for few days and then restarted.

After 67 comments and lots of fixes, the PR got merged. In this bug fixing process I learned so many things like Alembic, SQLAlchemy, testing etc. Hopefully, I’ll see this feature on the next version of Pagure.

thanks Pingou.

CakePHP-3 with Docker

All are working with images and containers, why not CakePHP-3 using Docker in few simple steps.

Installation with Docker repo

docker pull aavrug/docker
docker images

Installation using git repo and docker

You can download the CakePHP Docker zip or clone it.

git clone
cd Docker
docker build -t <image-name> .
-t is for tag name and ‘.’ is syntax for docker so don’t miss that.
docker images

Now You have the docker image, For running the CakePHP app.

docker run -d -p 8080:3000 <image id/image name>
-d is for running as demon.
-p is for port, since our dockerfile exposing at 3000 so we are mapping 8080 port to 3000.

Now you can run localhost:8080/<app-name> or ip:8080/<app-name>.
Currently the name is docker so localhost:8080/docker

My first python application.

The first time I encountered my passion was in class ten, and it was the most amazing day. That was the day I decided that I would pursue this career through thick and thin, no matter the situation. And here I stand today a B. Tech graduate in Computer Science.

In college days, I was trying to contribute in open source projects but I did not much. Always there were hurdles for me and then I left contributing. I got placed in a company but It was fake and then started searching for companies at Bangalore to work with but no luck with that too. After a few days, I moved in with my friend Sayan who, along with my friend Chandan supported me while I continued to look for job openings with different companies. Then with Kushal’s referral, I got an opportunity at Sanisoft.

In the beginning I spent all of my time learning career related techniques. All of this was to make myself more stable and successful, gradually more projects came my way and with the guidance of Dr. Tarique Sani , I was successful. After few months, Chandan helped me a lot and encouraged me to start with my contributions.

Now I have again started my contribution. I have created my first python application named twiturls which fetch the URLs from tweets for a given query, this took my Christmas day, but I suppose that is the gift of my day. Today I get my happiness back which comes from my work.

I am not a genius, but I know I can do better with computers.

The First Season Of Mozcafe@BCREC

With a new sun shine the most amazing day was started for Mozcafe@bcrec, Durgapur. Sayan, me, ciypro, biraj, piyush, umesh and apoorv we all are there for making this event successful. This was the first time that Mozcafe organized in Durgapur.

At 10:30 am we started our registration procedure. Some Nit guys  are came for registration and a lot of guys from our college they registered for this event, about 60 guys enrolled for this event. There was basically two session: Presentation & Pratical.

In the first session Chandan started the presentation and told them about the mozilla, it’s foundation, history and brief about contributing formozilla. After that Umesh told them about the designs of mozilla and in the last of the first session biraj gave the presentation on Localization.

After this we reach to 1:00 o’clock pm and take a tea break for all.

Now the second session was started at 2:00 pm then Shahid Ali Farooqui was there as our guest. We discuss with him that how to contribute for mozilla, participate in next mozilla events and a lot of more. Then started the further events

How to do Mozilla Localization –Biraj Karmakar, Chandan Kumar
How to create design –Umesh Agarwal, Gaurav Kumar
How to work with Webmaker –Sayan Chowdhury, Apoorv Ashutosh, Biraj Karmakar, Piyush Kumar Chouhan

In the last we discuss about the latest mozilla projects, gsoc and research projects from different universities.

Socialising Linux

A seminar and workshop was organized on Linux by Linux User group-dgplug on 8th September.

The registration procedure was clocked at 9:45am and was open to all students irrespective of year and department.Registration witnessed huge queue of students which was beyond our expectations. Thus embarking the passion and enthusiasm for open souce amongst young opulent coders. The pre-final year and final year students keeningly participated the seminar cum workshop. The workshop got further motivated by our college teachers by their patient hearing and knowledge transfer.

Biraj, piyush, apoorv and souradeep broke the ice at 10:30am by conducting the first phase of the event which was the “Why” session, it was about why to use another OS(operating system) apart from being clinged into windows. It was for the penchant users to spread the terminus of knowledge and gain experince by digging into the usablity of other OS namely fedora. After a grandiose talk by them.

The second phase was conducted by sayan, ciypro and me(aavrug) at 11:30am, which was the ” How” session, in that we explained the installation of two concurrent existence of operating systems in a system(pc and laptops).
All of us tried to make the seminar luculent for all.

From 2:30pm we have our last session ” Hands on Practice”.
In that session we installed fedora17 and fedora16 in many laptops,though we faced some new problems such as ” an unhandeled exception occured” error during partioning , the session was successfully completed .

We express of greatest thanks to Dinesh Pradhan(Asst prof.) , Pratap sir for helping us in organizing this seminar and workshop. Expressing my regards to my friend Tuhin for helping me in writing this blog.

This slideshow requires JavaScript.

dgplug Meet at BCREC

Today sayan, ciypro, biraj and me organize dgplug meeting. This was our first meet with the students,

there we discuss that how to start with fedora. We told them that how to subscribe on dgplug mailing list

then something about x-chat that how to use it, how to join the channels on it and also how to chat for

solving their own queries. In the last we distributed some e-books related to python.

After few hours we got response, some of them subscribe on dgplug mailing list and also they join the

channels and they talk to us for their queries.

Python Workshop Day-2

In the first day we learn so many things.

Today from 10:45 am we started the python workshop again. Kd told us about some new python commands

these are such useful commands, he also told us about vim editor.How can we use vim editor, how to copy

with yy command, how to paste with p and a lot of such commands these are really interesting after this

he shown to us how to copy files and also the data of the files from one file to another then he shown some

interesting programs that how to write those programs.

Lastly he shows the videos of fudcon which was organised in pune.