Getting problem in starting a first node.js project with ES6?

Let’s get started with the solution (ft. Babel) …

While using the the ES6 version of javascript with node.js often the server does not run and throws unexpected error if you are new to node.

SyntaxError: Unexpected token import

Follow these simple steps to create your own starter express application that can be reused for any of your Node.js projects, along with the ability to write code in ES6+ syntax.

Note: Have Node.js installed on your machine.

Getting Started

mkdir node-test-project
cd node-test-project/

Initializing the Node project

Assuming you’re inside of your starter project’s directory (node-test-project), run the following command:

npm init -y

Here, “ -y ” allows you to skip all of the default questions npm asks when initializing your node project. If you’d like to fill out the questions,

The above command npm init will make the node modules required for the process.

Installing Dependencies

> NODEMON

The first module we will be installing for this project is nodemon.

If you haven’t used nodemon, I’m sure you’re used to manually restarting your server, which can become time consuming and inefficient at times.

Nodemon removes the need to constantly restart your server because it does it for you! As you are developing your project, nodemon will listen for new changes and will automatically restart your server once those changes have been detected. This gets rid of the need to do it yourself and allows you to develop a lot quicker.

To install Nodemon, run the following:

npm install nodemon --save-dev

or if you use yarn, run hte following:

yarn add nodemon --save-dev

Significance of “-dev” : –save-dev forces nodemon to be installed as a devDependency. Dev Dependencies are libraries that are needed for the developers only and are not needed for the application to run in production.

Examples of developer dependent libraries are webpack, or unit testing libraries like mocha.

> EXPRESS

Express is one of the most popular Node web frameworks. It allows us to respond to http requests. With this in mind, we’re able to setup routes and decide what to return back.

To install Express, run:

npm install express --save

–save means that the library you are installing is required to run the application. It is important that express is being utilized in order for our application to run.

Testing with ES5

Inside of node-test-project, create a file “server.js” directory.

This will be the entry point of your application. When we run our application, nodemon will be pointing to this file.

Paste the following demo code into server.js:

This is basic vanilla javascript using ES5 syntax. We’ll work with ES5 for testing purposes, then we’ll integrate ES6 syntax once babel is setup.

var express = require('express');
var app = express();

app.get('/', function (req, res) {
  res.send('Hello World!');
});

app.listen(3000, function () {
  console.log('Test app listening on port 3000!');
});

Test Running the Application

Before we run our application, we’ll need to make some adjustments to package.json.

In the scripts section, add the following script.

"start": "nodemon src/index.js"

We just configured a new script that can be ran with the command start. The command tells nodemon to start our server.

Your package.json should look something like this:

{
  "name": "test",
  "version": "1.0.0",
  "description": "demo code",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon server.js"
  },
  "keywords": [],
  "author": "demo",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "nodemon": "^1.19.2"
  }
}

Run the following:

npm start

In a browser of your choice, go to localhost:3000

By now you should see “Hello World” in written in your browser. So far, we have set up a starter express app… but we want to write ES6 code!

Now moving one step ahead, try pasting the below ES6 code into server.js and see what happens.

Note: By default the localhost is 3000 but here we changed the local host to port 9000, just for the knowing to change to new port.

import express from "express";
//app config
const app = express();
const port = process.env.PORT || 9000;
//api routes
app.get("/", (req, res) => res.status(200).send("hello demo"));
//listen
app.listen(port, () => console.log(`Listening on localhost:${port}`));

You should be given an error that says: SyntaxError: Unexpected token import. This is where babel comes into the picture.

Running Your Node.js project with ES6 using Babel

Node.js won’t run ES6 code, which is why we need an external library like babel that compiles ES6 (2015 javascript) code down to ES5.

To learn more about babel: https://babeljs.io/docs/en/index.html

To install babel, run the following:

npm install @babel/core @babel/node @babel/preset-env --save-dev

These will be downloaded as devDependencies.

We’re almost done! We just need to create a .babelrc file and make some adjustments to our npm start script in package.json.

Create a new filed named .babelrc

touch .babelrc

Inside this file, copy and paste the code below:

{
  "presets": [
    "@babel/preset-env"
  ]
}

This allows us to code in the latest possible version of javascript without having to manually configure that ourselves.

Lastly, we need to update package.json. Update the start script with the following code:

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

Your package.json file should appear like this:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon --exec babel-node server.js"
  },
  "keywords": [],
  "author": "demo"
  "license": ISC",
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "nodemon": "^1.19.2",
    "@babel/core": "^7.6.0",
    "@babel/node": "^7.6.1",
    "@babel/preset-env": "^7.6.0"
  }
}

You should now be able to write ES6 syntax in your project stress-free, just run npm start.

Happy Coding Webinions!