✏ Some Quick Tips to Polish Up your Dev Environment

In this (short) post, I'd like to present a few tools you can use, to enhance your developer environment and make your life easier with these three npm packages:

• nodemon

• concurrently

• colors

---

✏ Project Layout

Let's say you have a project with a React frontend and a backend - a typical structure would be this:

my-project
|
|- package.json
|
|- backend
|   |
|   |-server.js
|
|- frontend
|   |
|   |- package.json
|   |- src

I have a package.json in the root directory and another in the frontend folder (created by create-react-app), but none in my backend folder (to be entirely honest, I'm sometimes not sure if I should have one, and put backend dependencies like express or mongoose there, instead of the root).

The packages I'll install below all go into the root's package.json. Right now, it has some typical backend dependencies, and a script to start the server from the root directory:

  "scripts": {
    "server": "node backend/server.js"
  },
  "dependencies": {
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "mongoose": "^5.11.15"
  }

---

✏ Nodemon

I'm sure most of you already use this anyway, but if you don't, you'll love it. When writing backend code, and making changes in your server.js, you always have to go through the tedious process of stopping/restarting the server. With nodemon installed, it'll watch your files (when you save them) and restart the server for you, if it detects a change. It's only needed during development, so you might want to install it as dev dependency:

npm i nodemon --save-dev

---

✏ Concurrently

The concurrently package allows you to run multiple commands. Usually, my workflow for the project described above is

• open terminal and run npm server

• open another terminal, cd into frontend, and run npm start

I could make that second part easier by adding the following script, but I'd still have to open two terminals to run both the server and the client:

  "scripts": {
    "server": "node backend/server.js",
    "client": "npm start --prefix frontend"
  }

Concurrently now allows you to run both scripts, well, concurrently, so to install it (again as dev dependency):

npm i concurrently --save-dev

Add a third script to the package.json (make sure to escape the double quotes within the outer quotes):

  "scripts": {
    "server": "node backend/server.js",
    "client": "npm start --prefix frontend",
    "dev": "concurrently \"npm run server\" \"npm run client\""
  }

Now, you can start everything in your application conveniently with one command:

npm run dev

---

✏ Colors

Spice up your console by adding colors to the otherwise boring white messages from your code. You'll have to require colors where you want to use it, then chain a list of available commands to any string that you console.log.

For example in server.js:

require('colors');

/* server code */

app.listen(PORT, ()=>console.log(`server running on ${PORT}`.green.bold))

Or in your database connection file:

mongoose
    .connect(connStr, connOptions)
    .then(() => console.log('connected to database'.cyan.bold))
    .catch(err => console.log(`connection error: ${err}`.inverse.red));

You're never going to miss that fat red error message now... also helps with locating specific messages when you log a lot of stuff while debugging. Try chaining .zebra or .rainbow for extra effects!

---

✏ Recap

I've learned

• how to make my life easier with nodemon, concurrently and colors

---

✏ Next:

• more MongoDB/Mongoose

---

✏ Thanks for reading!

I do my best to thoroughly research the things I learn, but if you find any errors or have additions, please leave a comment below, or @ me on Twitter. If you liked this post, I invite you to subscribe to my newsletter. Until next time 👋

---

✏ Previous Posts

You can find an overview of all previous posts with tags and tag search here:

#100DaysOfMERN - The App