Re-awarded as Microsoft Most Valuable Professional (7th year)

I’m happy to announce, I got re-awarded as Microsoft Most Valuable Professional (MVP) under Developer Technologies category. This is my 7th year in a row as MVP. I’m proud to be part of Microsoft MVP program.

 

MVP 2018

 

 

Who are MVPs?

Microsoft Most Valuable Professionals, or MVPs, are community leaders who’ve demonstrated an exemplary commitment to helping others get the most out of their experience with Microsoft technologies. They share their exceptional passion, real-world knowledge, and technical expertise with the community and with Microsoft.

Read More

I am an Author: My book “Building Modern Web Applications Using Angular” is now available!

I have some exciting news to share – my first book, Building Modern Web Applications Using Angular, is now available.

This book teaches how to design and develop next generation web applications using Angular 2 and Angular 4 This book is targeted at JavaScript developers who are interested in learning how to build rich and powerful web applications with the latest version of Angular.

In the last few years, Angular has established itself as the number one choice of JavaScript Developers. What makes Angular special is performance and productivity. With Angular, developers can work on consistent coding patterns and build web applications that are powerful and scalable. This book will you get you up and running with Angular and teach how to build modern web applications. It starts with basics of Angular 2 and then brushes you up with the new features of Angular 4. You will learn the core concepts involved in building web applications with Angular such as Data Binding, Routing, Dependency Injection, and much more. The book teaches how to build components and use them to build web apps of your choice. It will help you to handle different kinds of forms and learn the concept of reactive programming. Finally, the book teaches how to build visually appealing and responsive UIs.

What You Will Learn in this book:

  • Develop a frontend web application using component-based architecture
  • Use ES5, ES2015, and TypeScript to build Angular 4 UI applications
  • Develop simple to complex user interfaces in Angular 4
  • Develop and handle forms in Angular 4 UI applications
  • Test UIs built in Angular 4
  • Use material design components and animations in Angular 4

The book is available on Amazon, Kindle, Amazon India, Oreilly, and Packt website.

Thanks to the Packt Publishing for the opportunity to write for them, Sincere thanks to the complete editorial team. Many thanks to my family, friends colleagues who supported me throughout this journey.

Happy Coding!
Shravan Kumar Kasagoni

The Minimal React Project Setup using Webpack 2 and Babel

There are a good number of starter kits available for creating React projects. Starter kits are useful but most of them are black boxes, they improve the productivity once the developers have the understanding of how the stuff works.

The goal of this blog post is to explain how to create basic React project using Webpack 2 and Babel from scratch step by step.

Create project folder


mkdir react-basic-project
cd react-basic-project
npm init

Install React and React DOM packages


npm install --save react
npm install --save react-dom

Install Webpack 2 and Webpack Dev Server


npm install --save-dev webpack@2
npm install --save-dev webpack-dev-server@2

Install Babel Core and Babel Loader


npm install --save-dev babel-core
npm install --save-dev babel-loader

  • babel-core is the Babel compiler
  • babel-loader is the Webpack plugin for Babel

Install Babel presets for ES2015 and React


npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react

  • babel-preset-es2015 is the Babel preset for all ES2015 plugins
  • babel-preset-react is the Babel preset for all React plugins

We have all the required npm packages, let’s write some code. First, we need to create Babel configuration in .babelrc file to tell Babel how to transpile our ES2015 and JSX code.


touch .babelrc

Add the following configuration to .babelrc file.


{
  "presets": ["react", ["es2015", { "modules": false }]]
}

Lets create Webpack configuration file webpack.config.js.


touch webpack.config.js

Add the following configuration to webpack.config.js file.


module.exports = {
  entry: './src/app',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  }
};

Here is the hello world React code.

src/helloworld.js


import React, { Component } from 'react';

class HelloWorld extends Component {
  render() {
    return (<h1>Hello, React World!</h1>); 
  } 
} 

export default HelloWorld;

src/app.js


import React from 'react';
import { render } from 'react-dom';

import HelloWorld from './helloworld';

render(<HelloWorld />, document.getElementById('app-root'));

index.html


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React Hello World</title>
</head>
<body>
  <div id="app-root"></div>
  <script src="bundle.js"></script>
</body>
</html>

You can find the sample code here.

How to use Node and NPM without installation or admin rights

There are a lot of blog posts explaining this already, but most of them didn’t work for me. They miss one critical step, in this blog post I am going to provide instructions step by step how to use Node and NPM without installation or admin rights. I am going to provide the instructions for windows; we can follow the same process for other operating systems (macOS, Linux).

Step 1: Get node binary (node.exe) from nodejs.org site

  • Go to https://nodejs.org/en/download/ site, then from the downloads table download the  32-bit or 64-bit binary/binaries (not installer files) depending on your operating system.
  • Now copy the file node.exe to your favourite location. In my case, I created a folder named nodejs under the Tools folder in the root of my C drive (C:\Tools\nodejs\).

Step 2: Get the NPM

  • Go to https://github.com/npm/npm/releases site, then download the latest stable version of NPM. You can find the zip file under downloads section at the bottom of the page.
  • Extract the zip file and rename the extracted folder to npm.
  • Now go to C:\Tools\nodejs\ (in your case which ever the folder you copied the node.exe file), create a folder called, node_modules then copy the entire folder npm folder from the previous step the node_modules folder.

Step 3: Copy npm.cmd beside the node.exe

  • This is the very important step everyone misses, go to C:\Tools\nodejs\node_modules\npm\bin\ folder. Under the bin folder you will find the npm.cmd file.
  • Copy the npm.cmd file and place it beside the node.exe from step 1. In my case I am copying the npm.cmd file to C:\Tools\nodejs\ folder.

Step 4: Configure the PATH

  • We need add the node.exe and npm.cmd to system path, so that we can access them from any where.
  • Now append the path C:\Tools\nodejs; to PATH variable in Environment Variables.
  • We can access the Environment Variables dialog, by right clicking on the Computer > Properties > Advanced system settings > Advanced tab > Environment Variables.
  • Incase if you don’t have permission to access Environment Variables dialog, simply type the following command in Run dailog rundll32 sysdm.cpl,EditEnvironmentVariables, this will open the Environment Variables dialog.

Step 5: Verify the nodejs and npm setup

  • Go to command line then type node -v then npm -v. These commands should display the currently configured nodejs and npm versions respectively.

command prompt

We configured the node and npm without installation or admin rights, now you can happily use them.