DEV Community

NextJS Tip: Hot reloading for dynamic servers

Ryosuke on July 27, 2018

Have you been developing a NextJS app with dynamic routing (using maybe Express), and found that every time you make a change you have to do the te...

Read full post

jelugbadebo • Jun 29 '23

I am getting a ECONNREFUSED ::1:64146 error when trying to spin up my app with nodemon script:

"dev": "nodemon -w server/server.js server/server.js",

When I spin up my app with Next script, the app spins up fine. Here is the script:

"dev": "next dev",

Here is my nodemon.json:

{
    "restartable": "false",
    "colours": true,
    "ignore": [".git", "node_modules", ".next"],
    "runOnChangeOnly": false,
    "verbose": true,
    "events": {
        "restart": "osascript -e 'display notification \"App restarted due to:\n'$FILENAME'\" with title \"nodemon\"'"
    },
    "watch": ["components/**/*", "redux/**/*", "app/**/*", "server/**/*"],
    "env": {
        "NODE_ENV": "development"
    },
    "ext": "js json"
}

Here is my server.js:

import * as dotenv from 'dotenv';
dotenv.config({ debug: process.env.DEBUG });

import express from 'express';
import next from 'next';
import cors from 'cors';
import morgan from 'morgan';

// Configure Next App
const port = process.env.PORT || 5000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({
    dir: '.',
    dev: dev,
});
// Handle provides response to request made to front end of app
const handle = app.getRequestHandler();

// Import API Routes
import { authRouter } from './routes/authRoutes.js';

// import { postRouter } from './routes/postRoutes.js';
// Import Database Connect
import connectDB from './db/connect.js';

app
    .prepare()
    .then(() => {
        // Configure Express Backend
        const server = express();

        const corsOptions = {
            origin: '*',
            methods: ['GET', 'HEAD', 'PUT', 'PATCH', 'POST', 'DELETE'],
            preflightContinue: false,
            optionsSuccessStatus: 204, // some legacy browsers (IE11, various SmartTVs) choke on 204
        };

        // Implement Middleware
        server.use(cors(corsOptions));
        server.use(express.json());
        server.use(express.urlencoded({ extended: true }));
        // Invoke morgan logger middleware only in dev environment
        if (process.env.NODE_ENV !== 'production') {
            server.use(morgan('dev'));
        }

        // Establish Backend Routes
        server.use('/api/v1/auth', authRouter);
        // server.use('/api/v1/post', postRouter);

        // Establish Frontend Routes, '*' wildcard is route for frontend
        server.get('*', (req, res) => {
            return handle(req, res);
        });

        // Connect to Database
        // const connectDB = function (url) {
        //  return mongoose.set('strictQuery', true).connect(url);
        // };

        // Start Server
        const startServer = async function () {
            try {
                await connectDB(process.env.MONGO_URL);
                console.log(`SERVER is Connected to DATABASE...`);
                server.listen(port, () => {
                    console.log(`SERVER is Listening on PORT ${port}...`);
                });
            } catch (error) {
                console.error(error);
            }
        };

        startServer();
    })
    .catch((error) => {
        console.log(error);
        process.exit(1);
    });

Here is my next.config:

const nextConfig = {
    reactStrictMode: true,
    eslint: {
        ignoreDuringBuilds: true,
    },
    async rewrites() {
        return [
            {
                source: '/api/:slug*',
                destination: 'http://127.0.0.1:3000/api/:slug*',
            },
        ];
    },
};

export default nextConfig;

Here is the Error I'm getting when using nodemon:

Error: connect ECONNREFUSED ::1:64146
    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16) {
  errno: -4078,
  code: 'ECONNREFUSED',
  syscall: 'connect',
  address: '::1',
  port: 64146
}
GET / 500 25.020 ms - -

Here is my package.json:

{
    "name": "practice12-next-mern-todo",
    "version": "0.1.0",
    "type": "module",
    "private": true,
    "engines": {
        "node": "18.16.0",
        "npm": "9.7.1"
    },
    "scripts": {
        "dev": "nodemon -w server/server.js server/server.js",
        "build": "next build",
        "start": "node server/server.js",
        "lint": "next lint"
    },
    "dependencies": {
        "@reduxjs/toolkit": "^1.9.5",
        "cors": "^2.8.5",
        "dotenv": "^16.3.1",
        "eslint": "8.43.0",
        "eslint-config-next": "13.4.7",
        "express": "^4.18.2",
        "http-status-codes": "^2.2.0",
        "mongoose": "^7.3.1",
        "morgan": "^1.10.0",
        "next": "13.4.7",
        "nodemon": "^2.0.21",
        "react": "18.2.0",
        "react-dom": "18.2.0",
        "react-redux": "^8.1.1"
    }
}

Any thoughts on what the issue is?

Eduardo Alberto • Jul 5 '19

Good one.

Quick correction: you shouldn't use -w on your package.json or it'll ignore your nodemon.json config.

Alexey Vorobyov • Jan 12 '20

Yeah, should not it be just nodemon server.js to start up the main server file and it will trigger server reload
in case any of specified files in nodemon.json were altered?