DEV Community: Vikas Raj

Testing Node.js. How?

Vikas Raj — Wed, 31 Jul 2019 04:25:55 +0000

TBH I don't like writing test. But as the project grows changing one line of code can break your app if you don't know which part your app was dependent on that deleted line.

Different devs choose different tools for testing, which is sometime confusing.

So, what you choose for testing your Node.js apps?

ECMASCRIPT: Optional Chaining | Stage 3

Vikas Raj — Fri, 26 Jul 2019 04:06:54 +0000

Optional chaining is at stage 3 🎉🎉. This one is my favourite. Soon will be available in TypeScript.

tc39 / proposal-optional-chaining

Optional Chaining for JavaScript

Status

ECMAScript proposal at stage 4 of the process.

Authors

Claude Pache (github)
Gabriel Isenberg (github, twitter)
Daniel Rosenwasser (github, twitter)
Dustin Savery (github, twitter)

Overview and motivation

When looking for a property value that's deep in a tree-like structure, one often has to check whether intermediate nodes exist:

var street = user.address && user.address.street;

Also, many API return either an object or null/undefined, and one may want to extract a property from the result only when it is not null:

var fooInput = myForm.querySelector('input[name=foo]')
var fooValue = fooInput ? fooInput.value : undefined

The Optional Chaining Operator allows a developer to handle many of those cases without repeating themselves and/or assigning intermediate results in temporary variables:

var street = user.

…

View on GitHub

ECMASCRIPT: Nullish Coalescing

Vikas Raj — Wed, 24 Jul 2019 04:21:12 +0000

Nullish Coalescing is at Stage 3. This one is interesting.

tc39 / proposal-nullish-coalescing

Nullish coalescing proposal x ?? y

Nullish Coalescing for JavaScript

Status

Current Stage:

Stage 4

Authors

Gabriel Isenberg (github, twitter)
Daniel Ehrenberg (github, twitter)
Daniel Rosenwasser (github, twitter)

Overview and motivation

When performing property accesses, it is often desired to provide a default value if the result of that property access is null or undefined. At present, a typical way to express this intent in JavaScript is by using the || operator.

const response = {
  settings: {
    nullValue: null,
    height: 400,
    animationDuration: 0,
    headerText: '',
    showSplashScreen: false
  }
};

const undefinedValue = response.settings.undefinedValue || 'some other default'; // result: 'some other default'
const nullValue = response.settings.nullValue || 'some other default'; // result: 'some other default'

This works well for the common case of null…

View on GitHub

Running React and Node.js in one shot with Docker!

Vikas Raj — Tue, 23 Jul 2019 11:50:02 +0000

This is the second part of my previous post. If you haven't read my first post, please check it out as it serves as a base for this part.

Connecting & Running with Concurrently (first post)
Using Docker (this post)

TL;DR | If you don't know docker you can just turn back. But, If you still want to read go ahead.

In this post we'll be looking at the docker way of running React and Node.js. This is a kind of advance development setup and I hope you already installed and know the basics of docker and docker-compose. If you want to know more about docker head over to docker.com

# Initial setup

$ mkdir awesome_project

In this approach we'll not polluting the root folder. Client and Server will stay on their dedicated folder. In this way we can separate client and server at any time if we have to, without breaking anything. To make it work properly, each of them should have a Dockerfile and all will be connected with the docker-compose.

# Client Setup (React)

~ Create react app

$ cd awesome_project && npx create-react-app client

This will create a folder named client which holds our react app.

~ Dockerfile for React

Create a file name Dockerfile in the client folder and paste the following code.

FROM node:lts-slim

RUN mkdir -p /usr/src/app

WORKDIR /usr/src/app

EXPOSE 3000

CMD [ "npm", "start" ]

This will be our docker image instructions for our react app where our react app will get compiled and run.

# Server Setup (Node.js)

Our server code will stay in a folder named server in the root folder. Here you can use express or any other framework of your choice to make up the server. Or you can use this sample to quickly setup a server.

~ Dockerfile for Node Server

Create a Dockerfile in the server folder. And make sure you have a dev script in you package.json. If you have different script for running your server, you can change the CMD instruction in the Dockerfile below.

FROM node:lts-slim

RUN mkdir -p /usr/src/app

WORKDIR /usr/src/app

EXPOSE 5000

# You can change this
CMD [ "npm", "run", "dev" ]

# Running with docker-compose

Docker-compose helps us to combine and run mutiple Dockerfile into a single network container. Make a file named docker-compose.yml in the root of the project and copy the following code.

version: "3"
services:
    frontend:
        container_name: awesome_web
        build:
            context: ./client
            dockerfile: Dockerfile
        image: vikasraj/awesome_web
        ports:
            - "3000:3000"
        volumes:
            - ./client:/usr/src/app
    backend:
        container_name: awesome_server
        build:
            context: ./server
            dockerfile: Dockerfile
        image: vikasraj/awesome_server
        ports:
            - "5000:5000"
        volumes:
            - ./server:/usr/src/app

Finally, we'll have a folder structure somewhat like this.

> awesome_project
    > client # This is our react front-end
        > node_modules
        > src
        - Dockerfile
        - package.json
    > server # This is our Node.js server
        > node_modules
        - index.js
        - Dockerfile
        - package.json
    - docker-compose.yml

Lastly, you need to change the proxy field in the client/package.json like

{
     "proxy" : "http://backend:5000"
}

backend is the name of our backend service in the compose file

Now we can run our project by running following command. This will create docker images and volumes which will run in the containers.

$ docker-compose up

If you want to build your images before starting your containers.

$ docker-compose up --build

This can be a tedious approach to work with as you must have the knowledge of docker and docker-compose. But It has some advantage:

One setup for all development workflow.
Docker can be used for any programming language.
Production Deloyment can be a breeze, if you use docker in your DevOps.
No npm package required (though replaced by docker).

Running React and Node.js in one shot with concurrently!

Vikas Raj — Mon, 22 Jul 2019 14:10:38 +0000

Often time working on a full stack project can be intimidating. I often found myself in the same situation whether it is a personal or proffesional project. When I started to work with React and Node.js, the first question that just came up was, How do I even connect and run these two together?

This will be two part series where we look at different approaches to run React and Node.js in development environment.

Connecting & Running with Concurrently (this post)
Using Docker (second post)

Connecting React to Node.js (also works for any backend) is fairly easy and commonly known as React Proxy. You just need to add proxy field in your package.json of your React project and point it to your development backend server.

{
    "proxy": "http://localhost:5000"
}

If you want to learn to more just click here.

Running React and Node.js is more complicated than connecting. This will be two part series where we look at different approaches to run both of them in parallel. Both approches are different in many ways i.e. tools used, folder structure.

Using concurrently

Concurrently is a package which can run multiple npm scripts simultaneously.

~ Initial setup

$ mkdir awesome_project && cd awesome_project && npm init -y

This will create a package.json in our project with some default options.

~ Creating react app

$ npx create-react-app client

This will create a folder named client which holds our react app.

~ Some Node.js code

Create index.js in root of your project and paste the following code if you don't have server setup.

#!/usr/bin/env node

const http = require("http");

// Port Environment variable
const PORT = process.env.PORT || 5000;

// Creating the node server
const SERVER = http.createServer();

// Firing up the server on selected port
SERVER.listen(PORT);

SERVER.on("listening", () => {
    console.log("[Server]::LISTEN:%s", PORT);
});

// Callback function for checking connecting or error
SERVER.on("error", error => {
    throw new Error(`[Server]::ERROR:${error.message}`);
});

~ Installing concurrently

npm i -D concurrently

To make concurrently work with React and Node, we have to add some script in package.json.

{
    "scripts": {
        "server": "node index.js",
        "client": "npm start --prefix client",
        "dev": "concurrently \"npm run server\" \"npm run client\""
    }
}

Finally, we'll have a folder structure somewhat like this.

> awesome_project
    > node_modules
    > client # This is our react front-end and else will be our node.js backend
        > node_modules
        > src
        - package.json
    - index.js
    - package.json

Now dev script will run both React and Node.js app in our project and the proxy will connect both of them.

$ npm run dev

Using concurrently is perfectly fine for most of the developer (this is also the same approach which I used initially). But It has one problem that I find annoying which is folder structure (might be different for you).

In the second post we'll be looking at the docker way. So, If you don't know docker just stay here.

Best way to write class methods in javascript?

Vikas Raj — Fri, 19 Jul 2019 14:45:42 +0000

Can anyone tell which is the beat approach to write class methods in js and What are the pros and cons?

First Approach

class Dog {

    constructor(name) {
         this._name = name;
    }

    bark() {
         console.log(`hello ${this._name}`);
    }

}

Second Approach

class Dog {

    constructor(name) {
         this._name = name;
    }

}

Dog.prototype.bark = function bark() {
     console.log(`hello ${this._name}`);
}

Environment variables in Node.js. The Right way!

Vikas Raj — Sat, 13 Jul 2019 04:39:11 +0000

This is my first blog post. Hope y'all like it 🤞.

Environment variables are very fundamental part of developing with Node.js or any server side language. They always contains very sensitive data and doesn't meant to be shared with outside world. You have to make sure that your server is properly configured to make use of correct variables for both development and production environments. Any mistake can lead your server to crash.

Working with environment variable in Node.js is very easy and simple. This post will walk you through the different approaches of using environment variables in Node.js.

If you want to learn about environment variables in Node.js in click here.

1. Using package.json

You are thinking how? But you can pass key=value pairs directly in the npm scripts in the package.json. This is a valid a place to put environment variable but not a secure place.

Below is an example of setting Node.js execution environment to production on the npm's start script.

NOTE: This will probably won't work with Windows OS.

{
    ...
    "scripts": {
        "start": "NODE_ENV=production node bin/www.js"
    }
    ...
}

I also use this approach when I work with debug module or setting the Node.js execution environemnt. Some points to be considered when using this approach:

Shouldn't not put any sensitive data in here as it is visible to everyone and you can't ignore package.json in the .gitignore.
Don't put more than 2 variables as it could quickly becomes a mess.
Separating variables for development and production environment can be very hard.

2. Different keys files

This approach is completely different from first approach and addresses some of the issue of first approach.

Instead of using package.json, we can use keys.dev.js for development and keys.prod.js for production environment. Each file stores different variables for different environment.

Make sure to ignore keys.dev.js in the .gitignore before commiting any changes.

But how we can use them?

Using them can be tricky (when i initially got frustrated), So pay attention. Both files are exported by a third file i.e keys.js which checks the Node.js execution environement i.e. NODE_ENV and exports the correct keys file.

But how can I check Node.js environment before running our code? Look at the first approch for a brief. Below is an example for this approach:

// keys.dev.js ==========
module.exports = {
    PORT: 5000,
};

// keys.prod.js ==========
module.exports = {
    PORT: process.env.PORT,
};

// keys.js ==========
const devKeys = require("keys.dev.js");
const prodKeys = require("keys.prod.js");

if (process.env.NODE_ENV === "production") {
    module.exports = prodKeys;
} else {
    module.exports = devKeys;
}

This approach addresses all the issues of the first approach.

Multiple variables can be easily managed.
Development and production both have their own keys.
Development keys i.e. keys.dev.js can be ignored in the .gitignore keeping secrets away from others.

But no one wants to maintain extra code/file (including me). There must be a better way to do this!

3. `.env` comes to the rescue

.env is a special file which is used to define environment variables in Node.js. It holds key=value pairs to define the variables.

Make sure to ignore .env in the .gitignore before commiting any changes.

But, Node.js doesn't know how to read and parse this file. How do we do that? Either you could write your own logic to read and parse the file or Use a third party module to do the heavy lifting.

One popular module is dotenv (which i use) which can guide through the basic of .env file.

~ Creating the file

First create a file with name .env in the root of the project which contains all variable which will be injected in the environment by the dotenv.

# .env ======
PORT=5000
WHO_AM_I="Who Knows"

~ Configuring the dotenv

First intall the dotenv package from the npm as a dev dependencies as we don't need this in production.

npm i -D dotenv

There are several methods to load dotenv package. But, I will show you the method that i like.

To load the dotenv package and correctly read the .env file you have to modify the scripts in the package.json. Like below

{
    ...
    "scripts": {
        "start": "node bin/www.js",
        "dev": "node -r dotenv/config bin/www.js"
        // For nodemon users ====
        // "dev": "nodemon -r dotenv/config bin/www.js"
    }
    ...
}

As you can see there are two scripts

start for the production
dev for the development which loads the dotenv module

This will make sure that we don't accidentally load the dotenv in production.

~ Run the code

Now you can run the server but typing the following command.

npm run dev

And BOOM! You can now use all the variables defined in the .env file by the following syntax.

process.env.YOUR_VARIABLE_NAME;

So What kind of magic is this? What is going on? In the dev script we are telling node to preload a module by passing -r <module_name> flag. By requiring dotenv/config which read and parse the .env and sets the variable in the environment and provide access to those variable before running our code.

Now, we have a single place to define all the environment variables.

To make life a little easier, you can make a separate file i.e keys.js which exports all those variable like so we do in the second approach. This helps us to organize all the variables we use in our code.

NOTE: If you add variables in the .env then also update your exports in keys.js file.

// keys.js ======
module.exports = {
    PORT: process.env.PORT,
    WHO_AM_I: process.env.WHO_AM_I,
};

Points to be considered

Always ignore your development keys in the .gitignore.
Don't mess with NODE_ENV variable. Values other than development or production can break your app.
Always restart your app after changing environment variables.

DEV Community: Vikas Raj

Testing Node.js. How?

ECMASCRIPT: Optional Chaining | Stage 3

tc39 / proposal-optional-chaining

Optional Chaining for JavaScript

Status

Authors

Overview and motivation

ECMASCRIPT: Nullish Coalescing

tc39 / proposal-nullish-coalescing

Nullish coalescing proposal x ?? y

Nullish Coalescing for JavaScript

Status

Authors

Overview and motivation

Running React and Node.js in one shot with Docker!

TL;DR | If you don't know docker you can just turn back. But, If you still want to read go ahead.

# Initial setup

# Client Setup (React)

~ Create react app

~ Dockerfile for React

# Server Setup (Node.js)

~ Dockerfile for Node Server

# Running with docker-compose

Running React and Node.js in one shot with concurrently!

Using concurrently

~ Initial setup

~ Creating react app

~ Some Node.js code

~ Installing concurrently

Best way to write class methods in javascript?

First Approach

Second Approach

Environment variables in Node.js. The Right way!

1. Using package.json

2. Different keys files

3. .env comes to the rescue

~ Creating the file

~ Configuring the dotenv

~ Run the code

Points to be considered

3. `.env` comes to the rescue