How to connect MySQL database to ReactJS app?

Question

I have build a Todo App with create-react-app. The store I'm using is based on Local Storage(JS attribute of object window). Now I created a MySQL databases and want to connect to that database, so the state will show the values from database, and will be updated through actions.

I've tried to connect to db and output values through 'node' console using db.js. It works.

const mysql = require('mysql');

const con = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "root",
  database: 'root'
});

con.connect(function(err) {
  if (err) throw err;
  con.query("SELECT * FROM tasks", function (err, result, fields) {
    if (err) throw err;
    console.log(result);
  });
});

Is it possible to connect the state of app to database using this script?

Never get your web app to login to the database as root. Root can do whatever it likes, so if your app has any vulnerabilities this just leaves your database an open book for hackers. Instead create a separate user account specifically for this application which has only the permissions it actually needs in order to work properly. Don't even use the root account as a shortcut during development or testing, because you need to test your account permissions as well - otherwise when you go live you might have unexpected errors relating to the user account setup. — ADyson
– ADyson, Commented Jan 23, 2019 at 10:44
"Is it possible to connect the state of app" ...you'll have to explain in more detail specifically what you mean by this and what your concern is. Basically you can write any data you wish into the database, and also read out any data you wish from it. The data can represent any kind of state, or any other information you want it to. It's up to you. NodeJS is the intermediate step between your React front-end and the database server - it receives requests from the front-end, queries the database, and returns the result. That's a very standard setup for a web application. — ADyson
– ADyson, Commented Jan 23, 2019 at 10:47

Quentin · Accepted Answer · 2022-04-29 10:50:19Z

25

You can't connect them directly.

JavaScript running in a web browser cannot speak the MySQL protocol (nor can it make raw network connections that would be needed to write an implementation in JS).

Instead, create a web service (in the programming language of your choice, which could be JavaScript running on Node.js (e.g. the code you have already + Express.js + some glue)) and use Ajax to communicate with it.

edited Apr 29, 2022 at 10:50

answered Jan 23, 2019 at 10:45

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

Comments

Thomas Brok · Accepted Answer · 2019-01-23 11:03:25Z

22

The general solution for a question like this is the following framework:

Back-end (Node.js, Express, Database connection including authorization)
Front-end (React(, Redux to manage state))

If you then launch the React app, it should populate its state based on data retrieved from the database, which is a process to which you can add authorization (make retrievable data depend on the role/status of the user).

In the back-end you can define functions that take in a certain subset of parameters, which performs database actions, to which you can add business rules for your application. The React app then just sends HTTP requests to the Express server, which handles everything that needs verification and authorization before even touching the data.

If you search the internet for any configuration of a fullstack architecture using React and MySQL, you'll find similar results to what I mentioned.

answered Jan 23, 2019 at 11:03

Thomas Brok

4092 silver badges8 bronze badges

3 Comments

djack109 Over a year ago

How would you manage security as the react app and the web service are two different URLs so cookies wont work

Thomas Brok Over a year ago

@djack109 In fact, a properly deployed React app originates from the same URL as the server it speaks to. In this server you can configure the allowance of cookies and the corresponding CORS settings to make it all work together nicely. If you search for any combination of the terms 'React', 'Deployment', 'CORS' and 'Cookies', you'll get a ton of answers.

BreadBored Over a year ago

@djack109 set same-site: strict, secure: true, and http-only: true when setting a cookie from the API. http-only: true is important and required by Chromium and Safari to work across domains, and means you have to set credentials: true in axios (or similar) to use the cookie, because you can't access the cookie from JS client side code but your outgoing API requests will without input. After that, as long as both URLs are on HTTPS, it works. We do this with subdomains (https://api.site.xyz and https://site.xyz) even though subdomains are technically different domains.

Collectives™ on Stack Overflow

How to connect MySQL database to ReactJS app?

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related