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:

Nx Adoption Guide: Overview, Examples, And Alternatives

Nx adoption guide: Overview, examples, and alternatives

Let’s explore Nx features, use cases, alternatives, and more to help you assess whether it’s the right tool for your needs.

Andrew Evans
Mar 28, 2024 â‹… 9 min read
Understanding Security In React Native Applications

Understanding security in React Native applications

Explore the various security threats facing React Native mobile applications and how to mitigate them.

Wisdom Ekpotu
Mar 27, 2024 â‹… 10 min read
Warp Adoption Guide: Overview, Examples, And Alternatives

warp adoption guide: Overview, examples, and alternatives

The warp web framework for Rust offers many enticing features. Let’s see when and why you should consider using warp in your projects.

Ukeje Goodness
Mar 26, 2024 â‹… 8 min read
Integrating Next Js And Signalr For Enhanced Real Time Web App Capabilities

Integrating Next.js and SignalR to build real-time web apps

In this tutorial, you’ll learn how to integrate Next.js and SignalR to build an enhanced real-time web application.

Clara Ekekenta
Mar 25, 2024 â‹… 8 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