Complex Web Applications — Part 1

Photo by Clément H on Unsplash

This is part 1 of the series Complex Web Applications.

Lets get started

Please make sure you follow each step correctly, because they are really important. Some steps might not make sense now, but they will be super helpful later as we build our application.

Install NVM

NVM stands for node version manager. Imagine if you have different node projects in your machine and each of these projects are built using separate node versions. Yes, that’s possible.

As well all know that Node.js is built using JavaScript, which follows ECMAScript standards — and some pretty cool people keep updating these standards. So the peeps behind Node.js need to keep updating it to allow us to use the new JavaScript features. So, obviously it’s possible that any old Node.js project we might be working on might not support the new Node.js version. NVM allows us to switch between different node versions quite smoothly.

To install nvm run this command in your CLI—

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash

Now to set NVM directory path to the shell profile —

nano ~/.bashrc

Copy this code into the .bashrc file and save it —

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"

Run this command to test if NVM got installed correctly —

command -v nvm

If the result looks like below, we are good to go.

Install Node

Now to install node, we use NVM which allows us to install the latest version of node easily. Just the run the following command —

nvm install node

If you want to install a different version of node use the following command —

nvm install VERSION

Where VERSION can be something like 12.11.1.

To switch node versions using NVM, we use —

nvm use VERSION

Using NPM

NPM stands for Node Package Manager. It is the most important tool for working with node applications. NPM is used to fetch third party node modules(JavaScript libraries) that an applications might need for development, testing or production. NPM is also used to run tests and tools used in the development process.

Now, let’s open the command line and create a directory for our application —

mkdir myWebApp

Please use an appropriate name for your web application as per your understanding. Also, you can create your web application directory where ever you want.

Move into the application directory —

cd myWebApp

package.json

Now, we start creating some initial files for our application and do some magic with NPM. Just run the following command —

npm init -y

A file called package.json got create. This is the file where we list all the dependencies(modules) for our project. This is like an entry point to our project. Each project in Node.js is a module. So basically, we are creating our own project module. Now, our project can have several dependencies which are nothing but modules. So, each module will have their own package.json

Let’s open the package.json file. We see an object which looks something like this —

{
  "name": "myWebApp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Now let’s understand some of the most common properties of package.json and we’ll keep learning about new properties as we build our application.

name

This is the name of your project when you publish to the NPM directory(The sacred place where all the third party node modules reside). So, obviously it has to be unique. But, generally we publish our project to node modules if we want to share our project with the Node.js community.

license

This is a very important field. It’s this string that lets our users know at what terms we share our code. The string must be one of SPDX identifiers (short forms), like MIT, GPL-3.0 and etc.

repository

This is the place where we put our link to the repository. It can be public or private depending on the nature of project we are creating.

main

This is the entry point of the project. This is the file that is called by default when we start our project.

scripts

It’s a simple object with keys corresponding to commands and their values to what they should do. At a later point in our project we’ll most likely use script names like “build” or “start”.

dependencies

This is one of the most important property, because we keep changing this as per the requirements of the project. It is not created by default when we first create our package.json file. It will get created with our first node module installation into the project.

Our basic setup of the app is ready now. In next lesson, we’ll look at how to install third part node modules and use some of them to create our first server call from a browser.

Thanks for reading. I hope you learned something new.