×

Getting Started


Follow the steps to get started with the initial setup of our chat application.

Install Visual Studio Code Editor

1) You can use any text editors of your choice, we will use Visual Studio Code editor as this includes built-in terminal and have many features. You can download VS here Visual Code Studio.

2) Install Node.js

Install Latest Stable version LTS version of node.js

3) Open Visual Studio Code Editor

After installing text editor,open the editor and first look might be like this depends on version,


4) Create project folder

Create project folder at the location of your choice. We create project folder with name CommunityChat on Desktop. Spaces are not allowed while choosing names.


5) Open Folder in Text Editor

As you see in VS Code editor, there is an option Open Folder under Start section. Just open the Desktop folder which you created. In our case, it's CommunityChat. Close the New Window .


6) Open an Integrated Terminal

On status bar , you find View > Integrated Terminal.

7) Create files

Create an index.js file from the left navigation menu as shown in given fig.


Run the Commands

Run the following commands in VS Code editor terminal to check node and npm package is working properly. You will get version number of node js with this command.

node -v
npm -v

npm init

Click enter after every step till you get Yes. Finally press enter and Package.json file will be created. You can refer on the left navigaton menu inside CommunityChat.



Install Socket.IO library

npm i --save express nodemon socket.io

Install Babel CLI

npm i --save-dev babel-cli babel-preset-env babel-preset-stage-0

Congratulations :) All modules are set up properly. As you know the basic setup is always lengthy and tricky but things get into flow once you get started. One last step is left, do this

Fianl Step

Create public folder and create index.html file inside public.

Open package.json file and add this line under scripts which is used to tell the server about the entry point.

 "start": "nodemon ./index.js --exec babel-node -e js",

Final package.json file will be like this,

{
  "name": "CommunityChat",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "nodemon ./index.js --exec babel-node -e js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Manish Methani",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.3",
    "nodemon": "^1.18.3",
    "socket.io": "^2.1.1"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-0": "^6.24.1"
  },
  "description": ""
}

Create a file .babelrc

Babel is a transpiler that converts one unsupported language syntax to a supported language. In the case of Babel, what it does is it gets not fully supported functions from ECMAScript 6 (The standard JS is built on top of) and transforming that code into a supported ECMAScript 5.

Create afile named .babelrc and add this code inside it

{
    "presets": [
        "env",
        "stage-0"
    ]
}

Let's see you in the next tutorial with some real coding stuff and make hands dirty in code. Happy learning.