Database connection in Browser with JS

Question

I'm currently writing a frontend plugin for Grafana with typescript react. For testing purposes I want to connect to a mysql database, which is locally hosted on my maschine with xampp.

This is my code for the connection:

var mysql = require('mysql');

var con = mysql.createConnection({
  host: "localhost",
  user: "myusername",
  password: "mypassword"
  database: "plugin-test"
});

con.connect(function(err) {
  if (err) throw err;
  console.log("Connected!");
});

If start the plugin (with yarn watch) and open the console in Browser I get:

Uncaught TypeError: Net.createConnection is not a function

After some research I discovered that this error is because JS in Browser is working different from JS with node.js.

I know this is intentionally because of security issues and not exposing the database, but as mentioned before this is just for testing purposes.

It would be very good, if someone know how to get some sort of workaround for this.

Another thing I read was that it is possible, to make two parts and connect them with a (Rest?) API. But I dont know much about how to code such API. If anyone has some tips on that it would be very nice.

I hope someone can help me with this.

Thank you in advance.

With kind regards
Tobias