Simple connection to mongodb in react app

Question

I have created simple react app using 'create-react-app'. This app contains form, validation and bootstrap things. Nothing fancy yet works like a charm.

I have also signed up to mongo to get a free cluster so I can send over some data to. So I have this URL:

mongodb+srv://matt:[email protected]/test

Now, all I want to do is to send JSON data from the form to mongo but I don't know how.

When I am following tutorials and installing MongoDB, mongoose or whatever packages and adding basic setup for future CRUD operations:

var MongoClient = require('mongodb').MongoClient
  , assert = require('assert');

// Connection URL
var url = 'mongodb+srv://mattOsuch:[email protected]/test';

// Use connect method to connect to the server
MongoClient.connect(url, function(err, db) {
  assert.equal(null, err);
  console.log("Connected successfully to server");

  db.close();
});

The entire application crashes:

./node_modules/mongodb-core/lib/uri_parser.js
Module not found: Can't resolve 'dns' in 'C:\Users\Mateusz\Desktop\brainhub\node_modules\mongodb-core\lib'

I used to send data using jQuery or mysql_query in PHP but I can't overcome this problem. In other words I want to achieve functionality like presented in this video: https://www.youtube.com/watch?v=Jsqz5op4fH8 So as I said, simple data update.

My suspicion is that react-scripts server listener has some sort of conflict with mongo but I am not sure.

Please help me because I am loosing my nerves.

Generally speaking you would want to build such functionality (database CRUD) on the server-side, whereas your react app is running on the client side. What you're doing is not secure because you're hardcoding the database credentials into your client-side application, which any visitor can view the source of. — Niels de Bruin
– Niels de Bruin, Commented Apr 5, 2018 at 19:21
@NielsdeBruin, so what is the correct approach of developing that? I need at least some sort of tips because I am running out of ideas. — Mateusz Osuch
– Mateusz Osuch, Commented Apr 5, 2018 at 19:26
@MateuszOsuch This shouldn't be done in React. You need a separate server side app/ API to do that. React would call that API. — user2652134
– user2652134, Commented Apr 5, 2018 at 19:29
If your react app is the dashboard inside a car, you're asking me how to build an engine.. There's a plethora of options for building a backend, but since you're already working in Javascript you could search for tutorials on how to build a Node.js application with Mongoose. It could either render React views for you or you'd need to build an API. Either way this is a whole different story than simply writing a React app, however it is the correct approach. — Niels de Bruin
– Niels de Bruin, Commented Apr 5, 2018 at 19:31

Santhosh S Kashyap · Accepted Answer · 2018-04-05 20:17:36Z

1

You are using node.js so start server app try using express routing here is a link to a tutorial https://zellwk.com/blog/crud-express-mongodb or https://codeburst.io/hitchhikers-guide-to-back-end-development-with-examples-3f97c70e0073 or try doing a google search(node.js mongodb and express).

Then when returning a request from server send the data required then use your react client to handle the data recived

answered Apr 5, 2018 at 20:17

Santhosh S Kashyap

1,0782 gold badges14 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vishnu Satheesh · Accepted Answer · 2021-08-29 08:13:22Z

1

Hope it works!

handleSubmit(){
let databody = {
    "name": this.state.name,
     // Remaining form Data
}

return fetch('mongodb+srv://mattOsuch:[email protected]/test', {
    method: 'POST',
    body: JSON.stringify(databody),
    headers: {
        'Content-Type': 'application/json'
    },
})
.then(res => res.json())
.then(data => console.log(data)); 
}

render(){
return (
    <div>
        <form onSubmit={this.handleSubmit}>
               // Form Fields
            <input type="submit" value="Save" />
        </form> 
    </div>
);
 }

answered Aug 29, 2021 at 8:13

Vishnu Satheesh

3132 silver badges14 bronze badges

Comments

yolan PIBRAC · Accepted Answer · 2021-10-01 09:11:46Z

1

To connect to MongoDb in javascript, you must use a node.js server. It is therefore impossible to directly connect your React application to your MongoDb cluster.

For more information, visit the official MongoDb documentation

edited Oct 1, 2021 at 9:11

answered Sep 29, 2021 at 19:23

yolan PIBRAC

1912 silver badges7 bronze badges

Comments

Abdulhakim · Accepted Answer · 2021-09-30 11:59:11Z

0

First you need to create a React.js on the frontend and then node.js on the backend web application.
Then, you need to connect your mongodb collection to your Node.js server.
Then you can send your form data to your node.js server and your node.js server will send your form data to your mongodb collection.

Making a full-stack React-NodeJS-MongoDB web application can be a little challenging, if you do not know NodeJS. So you might first start with EJS-NodeJS-MongoDB web application. But in any case, here are links for your question: https://www.youtube.com/watch?v=3isCTSUdXaQ&t=2248s https://www.youtube.com/watch?v=Oa0pMn0tvU4&t=1316s

answered Sep 30, 2021 at 11:59

Abdulhakim

76810 silver badges13 bronze badges

Collectives™ on Stack Overflow

Simple connection to mongodb in react app

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related