2022-12-02
6006
#full stack#node#react
Nur Islam
3640
Dec 2, 2022 ⋅ 21 min read

The MERN stack tutorial

Nur Islam Sport programmer.

Recent posts:

Build Full-Stack App React Goxygen

Build a full-stack app with React and Goxygen

We show how to use Goxgen to scaffold a full-stack React app. See how to integrate React with Go and modify Goxygen to suit your project requirements.

Clara Ekekenta
Dec 6, 2023 ⋅ 8 min read
Express Js Adoption Guide Overview Examples Alternatives

Express.js adoption guide: Overview, examples, and alternatives

Express.js is a Node.js framework for creating maintainable and fast backend web applications in JavaScript. In the fast-paced world of […]

Antonello Zanini
Dec 6, 2023 ⋅ 17 min read
Nesting web components in vanilla JavaScript

Nesting web components in vanilla JavaScript

Web components are underrated for the performance and ergonomic benefits they provide in vanilla JS. Learn how to nest them in this post.

Mark Conroy
Dec 5, 2023 ⋅ 10 min read
Using Defer In Angular 17 To Implement Lazy Loading

Using defer in Angular 17 to implement lazy loading

Angular’s new defer feature, introduced in Angular 17, can help us optimize the delivery of our apps to end users.

Lewis Cianci
Dec 4, 2023 ⋅ 10 min read
View all posts

45 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…

Leave a Reply