DEV Community

Jonathan Atiene
Jonathan Atiene

Posted on • Updated on

Write node apps in ES6

This will be achieved by compiling ES6 javascript code to ES5 this can be possible using a tool called babel.
Babel is a JavaScript compiler.

Let's get started
Ensure you have node js installed in your machine, check with the following command

~$ node -v 
#13.11.0
Enter fullscreen mode Exit fullscreen mode

The next step is creating a Project called nodeapp, lets head on to our terminal and do the following.

~$ mkdir nodeapp && cd nodeapp && npm init -y
Enter fullscreen mode Exit fullscreen mode

the "mkdir" command creates a nodeapp folder, the "cd" command takes us into the folder and "npm init -y" this quickly creates a package.json file.

Next we will have to set up our babel compiler, we can install Babel CLI locally by running:

~$ npm install --save-dev @babel/core @babel/cli
Enter fullscreen mode Exit fullscreen mode

We now have babel compiler all sot up, we also need to specify what folder babel should compile from and where it outputs the compiled code

we simply add a command called "npm run build" to our package.json file

#package.json
"scripts":{
+ "build": "babel src -d dist"
}
Enter fullscreen mode Exit fullscreen mode

The build command technically compiles all the code in the src folder and outputs to a dist folder.

Great let's test this out by creating the src folder and some files to check this out.

mkdir src && touch src/index.js
Enter fullscreen mode Exit fullscreen mode

Now we finished configuring babel we have to tell babel what to do, we have to tell babel that we want to compile to ES5 to do this we will create a .babelrc config file in the root and add some babel plugins.

For now you can use the env preset, which enables transforms for ES5+ (morepluggins)

~$ touch .babelrc 
Enter fullscreen mode Exit fullscreen mode

In .babelrc add the following code

{
  "presets": ["@babel/preset-env"]
}
Enter fullscreen mode Exit fullscreen mode

next we install our plugin via npm

~$ npm install @babel/preset-env --save-dev
Enter fullscreen mode Exit fullscreen mode

let's write some ES6 code in src/index.js and see the magic

//src/index.js
Let foo = "bar"
Enter fullscreen mode Exit fullscreen mode

in our terminal we type

$ npm run build

#> nodeapp@1.0.0 build /home/mixed_code/dev/nodeapp
#> babel src -d dist

#Successfully compiled 1 file with Babel.
Enter fullscreen mode Exit fullscreen mode

boom we have a dist folder where our compiled code lies

//dist/index.js
"use strict";

var foo = "bar";
Enter fullscreen mode Exit fullscreen mode

To wrap things off you can watch for file changes using nodemon to continuously execute the "npm run build" command and rimfaff to remove the previous built file.

~$ npm i -d nodemon rimraff
Enter fullscreen mode Exit fullscreen mode

Up next let's set up our scripts

//package.json

"scripts": {
    "build": "babel src -d dist/index.js"
+   "start": "npm run build && node dist",
+   "restart": "rimraf dist && npm run start",
+   "dev": "nodemon --exec npm run restart"
}
Enter fullscreen mode Exit fullscreen mode

The scripts above simply uses rimraff to remove the dist folder of the previous build and executes the "npm run start" command, the start script executes the "npm run build" command and runs the output using "node dist/index.js".

πŸ“ for this to execute continuously each time we save have to tell nodemon to execute the restart command on each save, that is the function of the dev script above.

⚠️ we have to create a config file for nodemon telling nodemon the folder it has to watch so we don't end up in an infinite loop.

create a nodemon.json file and add the following lines of code

~$ touch nodemon.json
Enter fullscreen mode Exit fullscreen mode
{
    "watch": ["src"]    
}
Enter fullscreen mode Exit fullscreen mode

nice our work environment is all set up let's build a simple express server, hop into the terminal

~$ npm i -s express 
Enter fullscreen mode Exit fullscreen mode

paste the following code in src/index.js

//index.js
import express from "express"

const app = express()

app.listen(8000, () => {
    console.log("server started at http://localhost:8000")
})
Enter fullscreen mode Exit fullscreen mode

in our terminal we simply type

~$ npm run dev

#> nodeapp@1.0.0 dev /home/mixed_code/dev/nodeapp
#> nodemon --exec npm run restart

#[nodemon] 2.0.2
#[nodemon] to restart at any time, enter `rs`
#[nodemon] watching dir(s): src/**/*
#[nodemon] watching extensions: js,mjs,json
#[nodemon] starting `npm run restart`

#> nodeapp@1.0.0 restart /home/mixed_code/dev/nodeapp
#> rimraf dist && npm run start

#> nodeapp@1.0.0 start /home/mixed_code/dev/nodeapp
#> npm run build && node dist/index.js

#> nodeapp@1.0.0 build /home/mixed_code/dev/
#> babel src -d dist

#Successfully compiled 1 file with Babel.

#server started at http://localhost:8000ce
Enter fullscreen mode Exit fullscreen mode

You can add extra plugins from babel to enable you to enjoy more features.

Top comments (4)

Collapse
 
knoxv1lle profile image
knoxv1lle • Edited

Couple of corrections:

//src/index.js
Let foo = "bar"
lower case on the Let ;)

rimraff == rimraf (single f)

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt

Another easy way is to just use TypeScript's compiler; though sometimes not as feature-rich as Babel.

Collapse
 
g33knoob profile image
G33kNoob

It is same if i want to es6 airbnb?

Collapse
 
elizabethonyen6 profile image
Elizabeth Onyenekwe

Awesome