CODEWITHSUNDEEP
javascriptreactjsmongodb
Emanuele
Emanuele

Reputation: 2404

How to properly connect a React js application to MongoDB database

I am having some problems connecting to MongoDB database. After I launch my application using npm start it will not connect to the database.

Below the code that has the problem.

The error I am getting is on the return function below:

function App() {
  return (
    <>    / <-- Error here
    <Navbar /> 
    </>
  );
}

Below the App.js code:

import React from 'react';
import './App.css';
import './GoogleMap.css';
import './ProgressBar.css';
import Home from "./pages/Home";
import Vessels from "./pages/Vessels";
import SingleVessel from "./pages/SingleVessel";
import Error from "./pages/Error";
import GoogleMap from "./pages/GoogleMap";

import {Route, Switch} from "react-router-dom";
import Navbar from "./components/Navbar";

const app = express();
const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require("body-parser");
const cors = require('cors');
const vesselsController = require("../controllers/VesselControllers");

require("../config/keys");

// DB Config
const db = require("../config/keys").MongoURI;

const options = {
    useNewUrlParser: true,
    reconnectTries: Number.MAX_VALUE,
    poolSize: 10
};

mongoose.connect(db, options)
.then(() => console.log('MongoDB Connection established'))
.catch((err) => console.log('Error connecting MongoDB database due to: ', err));

// Bodyparser
app.use(express.urlencoded({ extended: false }));

// Express Session
app.use(
    session({
        secret: 'secret',
        resave: true,
        saveUninitialized: true
    })
);

// Routes
const PORT = process.env.PORT || 3000; // my localhost port

app.use(bodyParser.urlencoded({extended: true, limit: '50mb'}));
app.use(bodyParser.json({limit: '50mb'}));
app.use(cors());
app.route("/vessels/all").get(vesselsController.getBaseAll);
app.route("vessels/:id/track").get(vesselsController.getCurrent);
app.route("/vessels").get(vesselsController.getHistory);
app.listen(PORT, console.log(`Server started on port ${PORT}`));

function App() {
  return (
    <>
    <Navbar /> 
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route exact path="/vessels" component={Vessels}/>
        <Route exact path="/vessels/:slug" component={SingleVessel}/>
        <Route exact path="/map" component={GoogleMap} />
        <Route component={Error} />
      </Switch>
    </>
  );
}

export default App;

What I have done so far:

1) I came across the following post but it was not totally useful to solve the error.

2) I can confirm that all necessary module have been installed and that is not an error of missing any dependency.

3) I also found this blog that helped in setting the connection but that still didn't work.

4) I can also confirm that I properly set the variables I am trying to store in the database according to the official documentation of MongoDB Schema

Thanks for pointing in the right direction for solving this problem

Upvotes: 2

Views: 4879

Answers (4)

Zyncho
Zyncho

Reputation: 447

You need MongoDB Realm. There is a cool tutorial in MongoDB Website with Reactjs & GraphQL, etc...

good luck.

Upvotes: 0

Lorick
Lorick

Reputation: 11

Hello you can use react in node as views with reactjs-express-generator

Upvotes: 0

CoderLee
CoderLee

Reputation: 3479

React works on the client side where as Node and MongoDB work on the server side. What you need to do is build or use an API that lives on the server and communicates via HTTP/HTTPS messages to the client.

A React app can't do both, because it is sent to the client, the web browser, it has no way of connecting to a server outside of making request over the internet. That's why APIs are so helpful in web development. So you'll need an addition application to handle sending and receiving data via messages in HTTP.

Some resources to help you:

  • Here is a light weight tutorial for an easy introduction Medium Full Stack with Mongo and JS

  • Pluralsight's Full Stack JavaScript path and courses. They do a great job with content and will help explain a lot of concepts.

  • Alternatively LinkedIn Learning Learning has great resources as well.
  • YouTube which is a free option. Although with YouTube you may need to do more searching to find the right videos for your interest.

Upvotes: 4

Simone Sanfratello
Simone Sanfratello

Reputation: 1620

Looks like you are trying to execute a node application into a React application, this is not possible

Upvotes: 4

Related Questions