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

The MERN stack tutorial

Nur Islam Sport programmer.

Recent posts:

7 TUI Libraries For Creating Interactive Terminal Apps

7 TUI libraries for creating interactive terminal apps

When writing applications, a good user interface is just as important as the actual app’s functionality. A good user interface […]

Yashodhan Joshi
Jun 14, 2024 ⋅ 18 min read
Expo Router Adoption Guide Overview Examples And Alternatives

Expo Router adoption guide: Overview, examples, and alternatives

Expo Router provides an excellent file-based routing solution with crucial features such as deep linking and native support.

Marie Starck
Jun 13, 2024 ⋅ 8 min read
Superglue Vs. Hotwire For Modern Frontend Development

Superglue vs. Hotwire for modern frontend development

Explore how Superglue and Hotwire revolutionize frontend development with HTML over the wire, enhancing performance, flexibility, and ease of use.

Frank Joseph
Jun 12, 2024 ⋅ 7 min read
Using Pocketbase To Build A Full Stack Application

Using PocketBase to build a full-stack application

PocketBase is a performant Go-based tool that comes with essential features like user auth, file uploads, access control rules, and more.

Rahul Padalkar
Jun 11, 2024 ⋅ 18 min read
View all posts

47 Replies to "The MERN stack 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

Leave a Reply