NodeJS Security Considerations

In my previous post I showed how to verify whether our installed node modules are out dated or not. New releases of modules will definitely have fixes for variety of issues. However, that is not enough as a developer. We need to verify whether there are vulnerable code anymore in our modules. Further we need to certify whole lot of dependency tree.
By using npm ls command we can view the dependency tree.

This will show a huge list. To have a graphical view of each module we can use http://npm.anvaka.com/.

In fact, we can not thoroughly look into each and every package for security issues. Therefore we will use a node package for that. Install retire npm package.

Then inside your node project run retire command like below. Then you will see list of vulnerabilities and their vulnerability level.

We can use Node Security Command line tools from https://github.com/nodesecurity/. nsp is the most commonly used module which use an API to check vulnerabilities. First install nsp as a global module.

Then run nsp check command while inside your project.

As a NodeJS developer, we should verify and remove for unused packages in our project. Easiest way is to use depcheck tool. First we need to install it.

Then we can run depcheck command inside our project.

Useful npm Commands

When you work with npm modules it is always a best practice to install latest packages. Even this will reduce security vulnerabilities of outdated packages.
First I will show package.json file of my older project. In this project I haven't updated npm modules recently.

By running npm outdated command you can have a better idea about your outdated packages.

Basic React Routes

In this post I will demonstrate how to implement basic routes with ReactJS. First install following node dependencies accordingly.

Then add webpack.config.js file and index.html file accordingly. I have already explained above these configurations in my previous ReactJS posts.

Then add Help.js, Home.js, Student.js and StudentDetails.js files.

In Student.js file we can see an import statement of react-router, which will handle routing functionality. This will sync UI with URL by having components associated with routes. Child components make available in parent components by using this.props.children. Link will generate navigation links accordingly using react-router.
Next will add App.js file. In here, instead of rendering App component to the DOM, we pass Router compoenent with predefined routes. To configure index route, we can use IndexRoute.

Final output will be like below.

Integrate ReactJS Frontend with GoLang API

In my previous post we created todolist api using Gorilla web toolkit. In this post we will integrate that with the ReactJS TodoList application which we created earlier.
First will add TodoListAppContainer.js file.

Then change App.js file accordingly.

In TodoAppContainer.js file, will add constants for api url and headers for api endpoint.

In the componentDidMount lifecycle method, will do data fetching action. For data fetching, will use window.fetch function, which is easier and handle responses than using XMLHttpRequest. However, most of the browsers are not support this feature. Therefore will use whatwg-fetch node package. Install whatwg-fetch package and change TodoAppContainer.js file accordingly.

In browser you will see an output like below.

Next we need handle toggle event of checkbox. First we need to pass itemId and itemIndex values accordingly from TodoList.js file.

Now we need to update values accordingly within toggleItem function. However, when we work with array manipulations, we must remember in javascript arrays and objects are passed by reference. To make our life easier, ReactJS has provided a helper called update. We need to install react-addons-update node package. And also for Object manipulation we can use babel-polyfill node package. First we need to import above packages. Then will write toggleItem function.

Gorilla API Endpoint with MongoDB

I have already explained how to write API endpoint using Gorilla web toolkit. And also we have some experience of Go with MYSQL database. Today will write API endpoints with Gorilla and MongoDB as database.
First we need to download Golang MongoDB driver. MGo offers rich functionality as a MongoDB driver for Golang.

Then in MongoDB  will create a database called TodoList and add a collection called todolist.

In the project folder will add TodoList and TodoListItem structs.

Then add main.go file and configure routes accordingly.

TodoListGetAll function should be like below.

TodoListGetByOwner function should be like below.

TodoListUpdateItem function should be like below.

Then will format our code and build all go files. After than run the project.

Using browser access http://localhost:3000/api/todolist/. You will see an output like below.

Custom proptypes in ReactJS

In this demo we will create a TodoList and will go through custom proptypes of React. First create a folder called todo-list and add npm packages accordingly.

After install npm packages, add startup line to package.json file. I have create app and public folder. App folder will contain all our application related files and public folder will contain publicly accessible files.

First we need to add App.js file. In here we will hard code our data source.

Next we need to add TodoListApp.js file. Content should be like below.

Next add TodoList.js file.

Then for better user interface will add some styles into style.css file.

Then add index.html file into public folder and content should be like below.

Open our TodoList app in browser. However in browser console, you will see an error.

Reason for that is, React requires a key for tree elements. Because keys are fast lookup way to iterate through tree elements. To get rid from this error, will add key to TodoList.js file.

Next will add some proptypes validations to TodoListApp.js file. In here I added a custom proptype called namePropType.

Then in App.js, edit owner name to some longer text. In browser console you will see proptype custom validation error message.

Stateful ReactJS Components

With last post, I created a stateless ReactJS components. However, most of the time we need to have stateful components.
With this demo, will go through stateful components.
First add MyComponent into App.js file.

Then change App.js code like below.

Open your browser and enter data to each text field. Then you will see the difference.