Where do I connect my mongodb Atlas to my react app? - javascript

I am building a React app with node.js with mongodb Atlas database. I have created the mongodb Atlas cluster and need to connect it to the React app. The mongodb documentation says to use this code
var MongoClient = require('mongodb').MongoClient;
var uri = "mongodb+srv://kay:myRealPassword#cluster0.mongodb.net/test";
MongoClient.connect(uri, function(err, client) {
const collection = client.db("test").collection("devices");
// perform actions on the collection object
client.close();
});
But - I'm not exactly sure where in my React app it should go. I am using react-router-dom and most places I put it breaks the app. Any ideas?

This code is designed to be used on server side of your app. As You've mentioned You have Node.js server, so put it there and use database connection to serve your data to the React client app.
For example, You can send some data to client when your server receives HTTP request with some endpoint.
Here is nice tutorial for that :)

Related

how to add React component with Postgres database

I have a doubt, suppose, I made a React project using npx create-my-app myProject
and in this public folder, I have several folders having NodeJS for Postgres database.
so, my question is if I have to load data from postgres to react component, how will I do it? can I do it using axios? if not then how?
if yes, how will I test it? suppose, my backend nodejs postgres is online, and I am using my react on local:3000, how will I test it, if postgres has get function is like /api/xyz
?
You really should not do this in the Frontend (=React) part of you application.
This would open the door to some serious security issues, as you would have to establish a connection to the database from the client, and in order do so, have to save the databases credentials there. It would be relatively easy for any attacker to get this data.
Basically, create a backend server (maybe with nodejs), create a connection there to postgres, fetch the requested data there and send it to the client. You can use axios for that or any other http library like fetch. Your frontend can run on localhost:3000 and the backend on localhost:4000. Here is a tutorial you can follow.

How can I execute functions in a node.js file hosted by Heroku from a file hosted in a different environment?

I currently use host winds to host a html/css/js files. I need to use Node for a new project aspect, and host winds says id have to use a virtual private server. so I figured ill use Heroku, since I have experience deploying to that environment already.
the heroku application has to execute a stripe operation:
(dummy data)
const stripe = require('stripe')('sk_test_NOFBwvYmIyZln2c64bv84A');
stripe.oauth.token({
grant_type: 'authorization_code',
code: 'ac_123456789',
}).then(function(response) {
// asynchronously called
var connected_account_id = response.stripe_user_id;
});
followed by a firebase firestore write operation
How can I connect to the heroku environment from a file hosted on Hostwinds? Is it as simple as creating an express server in the node.js heroku deployment, and calling a fetch POST/GET to an express endpoint from the web page thats hosted by host winds
Is it as simple as creating an express server in the node.js heroku deployment, and calling a fetch POST/GET to an express endpoint from the web page thats hosted by host winds
Exactly, call one of the routes in your app on heroku servers and then run your function from there.

How to add parameters to a FeathersJS socket connection

I'm developing an app that uses a FeathersJS server, and an Electron app that uses FeathersJS Socket.io client to connect to the server. I'd like to use channels in the Electron app to get notified when some data in the server has changed. The Electron app is an "autonomuos" app, so there isn't any user authentication or interaction. The Electron app will have a unique id that represents each machine it is running on.
Taking into account that there isn't any kind of authentication, how can I add the Electron app's unique id in the socket.io connection so that this id is received in the server and it can create the corresponding channel in the FeathersJS server?
Thank you!
How to pass information on the server from the Socket.io transport to Feathers through a Socket.io middleware is documented in the Socket.io transport API. There also is an example how to pass query parameters from the client to the server in the Socket.io documentation. Put together it looks like this on the client:
const socket = io('http://feathers-server.com', {
query: {
token: 'cde'
}
});
And like this on the server:
app.configure(socketio(function(io) {
io.use(function (socket, next) {
socket.feathers.token = socket.handshake.query.token;
next();
});
}));
socket.feathers is the exact same as the channel connection object so it will now have a token property you can use to join as a channel:
app.on('connection', connection => {
if (connection.token) {
app.channel(connection.token).join(connection);
}
});

Installing Mongodb to existing Node app causes application to stop working

I have built a node application that uses socket.io and express.
A lot of development has passed with this app but I finally decided to add MongoDB to this app. When I install mongo with npm, everything with socket.io stops working completely. No errors are shown on the client or server side. My cpu usage on chrome spikes up to a crazy amount.
It is a really odd issue because mongo does connect to my server successfully and the app works perfectly without mongo installed into the dependencies.
My server side node application has this structure:
var MongoClient = require('mongodb').MongoClient
, assert = require('assert');
var url = 'mongodb://hidingmyipaddress:27017';
MongoClient.connect(url, function(err, db) {
assert.equal(null, err);
console.log("Connected successfully to server");
io.on('connection', function(socket) {
socket.on('name', function(rm, qqquota){

Database connection works in node.js file but not in script tags

I'm trying to connect to my MongoDB database (or to the server actually MongoLab), it works fine when I have the code in name.js file but it doesn't work when I have it in HTML file inside <script> tags.
Also, I only have those 2 files in my folder, and I'm using Cloud9 framework.
This is my JavaScript code:
// JavaScript File
var MongoClient = require('mongodb').MongoClient;
var url = "x";
MongoClient.connect(url, function(err, db) {
if (err) throw err;
var dbo = db.db("mkndb");
var myobj = { name: "Company Inc", address: "Highway 37" };
dbo.collection("test").insertOne(myobj, function(err, res) {
if (err) throw err;
console.log("1 document inserted");
db.close();
});
});
Thank you
The package mongodb you are requiring is a node.js package, it runs only on the server side and not in the browser.
To access a MongoDB on the client side, you can use the REST webservice.
It allows rudimentary queries through XmlHttpRequests.
To enable it, you have to start mongod with the --rest parameter.
Then you can then query it like this:
http://127.0.0.1:28017/someDatabase/someCollection/?filter_name=someFilter
You seem to be using the Mongodb node client. Inserting the script in html page with tags would not work in the same way as you expect. You have few ways to achieve what you are looking for :
1. You can build a nodejs server component which can handle the requests from browser application. The nodejs server then interacts with mongodb and respond. This again can be achieved in few ways.
a. Deploy nodejs in Lambda. Mode details here - https://docs.aws.amazon.com/cloud9/latest/user-guide/lambda-functions.html . You can then connect from the browser as given here - https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/browser-invoke-lambda-function-example.html
b. Deploy in EC2
2. If you do not want to build/deploy the node.js server, try using the mLab Data API. (http://docs.mlab.com/data-api/) . This works only for this special case where you are trying to connect to MongoLab

Categories