2023-11-29
5839
#full stack#node#react
Nur Islam
3640
Nov 29, 2023 ⋅ 20 min read

The MERN stack: A practical tutorial

Nur Islam Sport programmer.

Recent posts:

Wasm 3 Before GTA 6 LogRocket Article

We got Wasm 3.0 before GTA 6: Meet the web’s new engine

Discover how WebAssembly 3.0’s garbage collector, exception handling, and Memory64 transform Wasm into a true mainstream web platform.

Ikeh Akinyemi
Oct 3, 2025 ⋅ 2 min read

How to use AI to build accurate ShadCN components

AI agents often break shadcn/ui components with outdated docs or made-up props. The MCP server fixes this by giving live access to registries. In this tutorial, we’ll set it up and build a Kanban board to show it in action.

Chizaram Ken
Oct 3, 2025 ⋅ 5 min read
Rust Project for Web Services LogRocket Article

The best way to structure Rust web services

Learn how to structure Rust web services with clean architecture, Cargo workspaces, and modular crates for scalable, maintainable backends.

Jude Miracle
Oct 2, 2025 ⋅ 2 min read
andrew evans headshot

A spec-first workflow for building with agentic AI

Andrew Evans gives his take on agentic AI and walks through a step-by-step method to build a spec-first workflow using Claude Code.

Andrew Evans
Oct 1, 2025 ⋅ 18 min read
View all posts

48 Replies to "The MERN stack: A practical tutorial"

  1. Great tutorial, but isn’t the line
    ‘app.use(‘/api/books’, books);
    missing from app.js if we want to test our routes with Postman/Insomnia?

    1. This was a really helpful tip! The path just need to be adjusted 🙂

      const routes = require(‘./routes/api/books’);

  2. Hi, i’m getting the error below when trying to connect:

    failed to connect to server [cluster0-shard-00-00-ehcci.mongodb.net:27017] on first connect [MongoNetworkError: connect ECONNREFUSED 3.227.163.176:27017]

    although i have my IP whitlisted and even switched to accepting request from any IP but still getting this error

  3. When I connect PC’s developing((192.168.1.116:3000 / localhost:3000) to MongoDB Atlas, that’s OK I can add update DB. So I try to connect other PC same LAN network to PC’s developing URL:192.168.1.116:3000 I saw the WEB page but I cannot get Book list , I cannot ADD book.

    How can I solve the problem?

  4. Hello, I´d like to ask, what can I do, if i have this error:

    TypeError: connectDB is not a function

    at Object. (/mnt/c/Users/Michael/Desktop/WebApps/mern_stack/app.js:7:1)
    at Module._compile (internal/modules/cjs/loader.js:955:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
    at Module.load (internal/modules/cjs/loader.js:811:32)
    at Function.Module._load (internal/modules/cjs/loader.js:723:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1043:10)
    at internal/main/run_main_module.js:17:11
    [nodemon] app crashed – waiting for file changes before starting…
    [nodemon] restarting due to changes…
    [nodemon] starting `node app.js`
    /mnt/c/Users/Michael/Desktop/WebApps/mern_stack/app.js:7
    connectDB();
    ^

    [nodemon] starting `node app.js`
    /mnt/c/Users/Michael/Desktop/WebApps/mern_stack/app.js:7
    connectDB();
    ^

    Thank you for your response.

    1. Copying and pasting my comment to Aumkar:

      I believe the issue may be that you don’t have ‘module.exports = connectDB;’ at the bottom of the file. So app.js is not actually importing the specific connectDB function you wrote.

  5. There’s a bug in the db.js instructions. The word “parser” should be capitalized in: useNewUrlparser: true

  6. This is a great tutorial! Got one more issue: With just the code in Part 1, it’s not possible to use Postman to test the APIs. To make it work, app.js needs to be updated to include:

    const books = require(‘./routes/api/books’);
    app.use(‘/api/books’, books);

    That will wire up the APIs so they can be tested.

  7. Can someone help me? I’m getting the same error as @MichaelRydl, where I am able to connect to the DB. I replaced the url in the default.json with the url on the ATLAS, with the username and password that I set for the user, however am still facing this error.

  8. I believe the issue may be that you don’t have ‘module.exports = connectDB;’ at the bottom of the file. So app.js is not actually importing the specific connectDB function you wrote.

  9. I had to initialize the body-parser in order to get the server to work.

    var bodyParser = require(‘body-parser’)

    // parse application/json
    app.use(bodyParser.json())

  10. If you encounter the following error/warning when running the react app:
    “Warning: Functions are not valid as a React child.This may happen if you return a Component instead of from render.”

    The error is located in App.js.
    The solution to fix this issue is below, pay special attention to how I wrapped each element in :

    class App extends Component {
    render() {
    return (

    <Route exact path='/' element={} />
    <Route path='/create-book' element={} />
    <Route path='/edit-book/:id' element={} />
    <Route path='/show-book/:id' element={} />

    );
    }
    }

  11. Can someone help? Great tutorial, but for some reason when I update the app.js file with the recommended code, my database crashes when I try to run it with the following console message. The db runs without any errors before this step. Any suggestions?

    Error: Cannot find module ‘./routes/api/books’
    Require stack:
    – /Users/michaelbmagruder/Documents/PROJECTS/MERN/project001/app.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:889:15)
    at Function.Module._load (internal/modules/cjs/loader.js:745:27)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at Object. (/Users/michaelbmagruder/Documents/PROJECTS/MERN/project001/app.js:24:15)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12) {
    code: ‘MODULE_NOT_FOUND’,
    requireStack: [
    ‘/Users/michaelbmagruder/Documents/PROJECTS/MERN/project001/app.js’
    ]
    }
    [nodemon] app crashed – waiting for file changes before starting…

    1. If you go to line 5 in “./routes/api/books.js” the module needs to be pluralized. The code has “/Book” when it should be “Books”.

  12. Hey there! What if my package.json is missing a couple of the dependencies listed in this project? I went through everything step by step but it seems your package.json has a lot more scripts and dependencies than mine…

  13. Has anyone tried using functional components and hooks? My apps front end wont work because I’m not using functional components

    1. The react-router-dom version 6 syntax is a bit different than what’s shown. You should update your App.js file as follows:

      import React, { Component } from ‘react’;
      import { BrowserRouter, Routes,Route }
      from “react-router-dom”;
      import ‘./App.css’;
      import CreateBook from “./components/CreateBook”;
      import ShowBookDetails from ‘./components/ShowBookDetails’;
      import ShowBookList from ‘./components/ShowBookList’;
      import UpdateBookInfo from ‘./components/UpdateBookInfo’;

      class App extends Component {
      render() {
      return (

      <Route exact path='/' element={} />
      <Route path='/create-book' element={} />
      <Route path='/edit-book/:id' element={} />
      <Route path='/show-book/:id' element={} />

      );
      }
      }

      export default App;

      1. Sorry about the above replay from an earlier version of my code. You should update your App.js file as follows:

        import React, { Component } from ‘react’;
        import { BrowserRouter, Routes,Route }
        from “react-router-dom”;
        import ‘./App.css’;
        import CreateBook from “./components/CreateBook”;
        import ShowBookDetails from ‘./components/ShowBookDetails’;
        import ShowBookList from ‘./components/ShowBookList’;
        import UpdateBookInfo from ‘./components/UpdateBookInfo’;

        class App extends Component {
        render() {
        return (

        <Route exact path='/' element={} />
        <Route path='/create-book' element={} />
        <Route path='/edit-book/:id' element={} />
        <Route path='/show-book/:id' element={} />

        );
        }
        }

        export default App;

        1. That got me close, this got it to work for me.

          import React, { Component } from ‘react’;
          import { BrowserRouter, Routes, Route } from “react-router-dom”;
          import ‘./App.css’;
          import CreateBook from “./components/CreateBook”;
          import ShowBookDetails from ‘./components/ShowBookDetails’;
          import ShowBookList from ‘./components/ShowBookList’;
          import UpdateBookInfo from ‘./components/UpdateBookInfo’;

          class App extends Component {
          render() {
          return (

          <Route exact path='/' element={} />
          <Route path='/create-book' element={} />
          <Route path='/edit-book/:id' element={} />
          <Route path='/show-book/:id' element={} />

          );
          }
          }

          export default App;

        1. I solved this by going into my project directory (server folder) and running:
          npm i react-router-dom
          npm install

          And doing the same in my books-app (or client folder) and running the same thing. This is the part that runs the actual rendering of the page.

  14. This blog provides very useful information and knowledge about MERN stack development, Mongo db, and react.js, technologies. It also gives a very clear understanding about how we build, use and utilize of all these technologies

  15. Hello, Experiencing below error after adding db.js and default.json in config folder. Any solution?

    node_modules/mongodb/lib/operations/add_user.js:16
    this.options = options ?? {};
    ^

    SyntaxError: Unexpected token ‘?’
    at wrapSafe (internal/modules/cjs/loader.js:915:16)
    at Module._compile (internal/modules/cjs/loader.js:963:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object. (/home/rodgersmm/OneDrive/Akode/MERN Sites/MERN Template/backend/node_modules/mongodb/lib/admin.js:4:20)
    at Module._compile (internal/modules/cjs/loader.js:999:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)

  16. As was said, you must add that to your app.js in order to test the api:

    const routes = require(‘./routes/books’);

    app.use(‘/api’, routes);

  17. [nodemon] restarting due to changes…
    [nodemon] starting `node app.js`
    node:internal/modules/cjs/loader:959
    throw err;
    ^

    Error: Cannot find module ‘../../models/Books’
    Require stack:
    – C:\Users\M.SURYA CHAITANYA\OneDrive\Desktop\MERN\routes\api\books.js
    – C:\Users\M.SURYA CHAITANYA\OneDrive\Desktop\MERN\app.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:956:15)
    at Function.Module._load (node:internal/modules/cjs/loader:804:27)
    at Module.require (node:internal/modules/cjs/loader:1028:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object. (C:\Users\M.SURYA CHAITANYA\OneDrive\Desktop\MERN\routes\api\books.js:5:12)
    at Module._compile (node:internal/modules/cjs/loader:1126:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
    at Module.load (node:internal/modules/cjs/loader:1004:32)
    at Function.Module._load (node:internal/modules/cjs/loader:839:12)
    at Module.require (node:internal/modules/cjs/loader:1028:19) {
    code: ‘MODULE_NOT_FOUND’,
    requireStack: [
    ‘C:\\Users\\M.SURYA CHAITANYA\\OneDrive\\Desktop\\MERN\\routes\\api\\books.js’,
    ‘C:\\Users\\M.SURYA CHAITANYA\\OneDrive\\Desktop\\MERN\\app.js’
    ]
    }
    [nodemon] app crashed – waiting for file changes before starting…

  18. Thank you authors for the initial write up and the recent updates!

    Received an error for the files created in the component directory:

    [ERROR] The JSX syntax extension is not currently enabled
    The esbuild loader for this file is currently set to “js” but it must be set to “jsx” to be able to parse JSX syntax. You can use “loader: { ‘.js’: ‘jsx’ }” to do that.

    The linked Github repo in the tutorial show those files were named to have a .jsx extension which resolved the errors. Alternatively, this post https://stackoverflow.com/a/76726872 also resolved the errors. Happy coding

  19. This blog offers practical, easy-to-follow insights on MERN stack development, including MongoDB and React.js, and explains how these technologies are built, used, and combined in real projects.

Leave a Reply