How To Increase Development Efficiency With Nodemon And Opn

By Jeff Lewis

What is Nodemon?

You started your server and it’s finally up and running. You make a change or two, save the file, and open up your browser again. Something is wrong. It didn’t reload and now you find yourself manually restarting the server every time. This is where Nodemon comes in.

Nodemon is a development dependency that monitors for any changes in your Node.js application and automatically restarts the server, saving time and tedious work.

What is Opn?

Opn is a dependency that opens web browser links, files, and executables. We will be using Opn to automatically open a web browser to our local host every time our server restarts.

How Can I Be More Efficient In My Development?

Now that we know what both dependencies do, we can combine them for maximum efficiency (Nodemon’s automatic project monitoring and server restart + Opn’s to automatically open a web browser to local host)

Note: This tutorial will be using Node.js, Express, and Babel 7.

A. Initialize Repository

If you haven’t already, intialize your project through the terminal with NPM or Yarn. This will create a package.json where our dev dependencies will be added. If you have already done this, you can skip this Part A.

Using NPM:

npm init

Using Yarn:

yarn init

B. Install Dependencies

Using NPM:

npm install opn && npm install nodemon -dev

Using Yarn:

yarn add opn && yarn add nodemon -dev

C. Add Script To Package.json

We’re going to add nodemon’s ability to automatically restart the server on our package.json run server script on our server.js file.

Note: babel-node is included in my server script, which converts ES6+ code on my Node.js server to ES5 code for all modern browsers to read. The server script also includes --exec , which will execute the server.js file.

{

"name": "YOURPROJECTNAME",

"version": "1.0.0",

"description": "",

"scripts": {

"server": "nodemon --exec babel-node ./server/server.js"

},

"author": "YOURNAME",

"dependencies": {

"express": "^4.16.4",

"opn": "^5.4.0"

},

"devDependencies": {

"@babel/cli": "^7.1.2",

"@babel/core": "^7.1.2",

"@babel/node": "^7.0.0",

"@babel/preset-env": "^7.1.0",

"nodemon": "^1.18.3"

}

}

D. Import Opn + Automatically Open Browser With Local Host On Server Start

In the bolded line below, we now setup our server file to open the url to our local host. If you’re wondering why those single quotes look weird, it’s because they are ES6 Template Strings. Template Strings allow to dynamically fill in Javascript into a string using `${YOURCODE}`.

// Imports: Dependencies

import express from 'express';

import opn from 'opn'; // Express App

const APP = express(); // Express: Port

const PORT = 4000 || process.env; // Express: Listener

APP.listen(PORT, () => {

console.log(`The server has started on port: ${PORT}`);

console.log(`http://localhost:${PORT}`);

}); // Open URL On Server Start

opn(`http://localhost:${PORT}`); // Exports

export default APP;

E. Babel Setup (.babelrc)

Note: I’m using Babel 7, which is why it has the “@” symbol as a prefix.

{

"presets": [

"@babel/preset-env"

]

}

F. Start Node.js Server

Setup for Nodemon and Opn is all done, so let’s start the server + open a browser with local host in one Terminal command:

npm run server

The server is running and this tutorial is complete. It may not seem like much, but trust me, you’ll wonder why you ever manually opened and refreshed the browser every time. After all, the essence of programming is automating and improving tasks.