Unable to connect my front end and backend and MySQL together

[ameersaid0302]

How can i connect my static service my backend with mysql database please i am new here help me

this method is in index.html

type or paste code here               
                  fetch('https://qanda-6l91.onrender.com/answers', { 
                    method:'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({Ans_value})
                })


this is also in index.html
            async function Loadanswers(){
                const res = await fetch('https://qanda-6l91.onrender.com/answers');
                const answers = await res.json();

                const ctr = document.querySelector('.container'); 

this one is in index.js

const express = require('express')
const app = express()
const port = 3000

const bodyParser = require('body-parser');


const db = require('./db')

app.use(bodyParser.json())
app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*"); // disabled for security on local
    res.header("Access-Control-Allow-Headers", "Content-Type");
    next();
});

this code is in db.js

async function getConnection() {
    return await typeorm.createConnection({
        type: "mysql",
        host: "localhost",
        port: 3000,
        username: "root",
        password: "password",
        database: "myapplication",
        synchronize: false,
        logging: false,
        entities: [
            AnswerSchema
        ]
    });

Please help me connecting these all together in render for the front end i used static service for the backend i used webservice my database is mysql so how i can make a connection between these services.

[mmaddex]

Hello,

You can get the URL for your MySQL service in the Connect drop-down in the Dashboard. See https://render.com/docs/private-services#connecting-to-a-private-service for more information on how to connect to private services.

Our MySQL quick start might also have some good examples to get you pointed in the right direction: https://render.com/docs/deploy-mysql#connecting-to-your-database

Regards,

Matt

[ameersaid0302]

Hi i have read all the articles but still i am unable to see any response still can not git error i have connected to mydatabase via adminer and enter some entries in the table but still i am unable to see that response.

async function getConnection() {
    return await typeorm.createConnection({
        type: "mysql",
        host: "mysql-q6wy", this is example url not real which i got from my sql render private service this code is in my db.js file.
        port: 3306,
        username: "mysql",
        password: "MYSQL_PASSWORD", this password is from my render private mysql service
        database: "a264133_9mgfgumk", this is the database in my adminer dashboard to which i am connected via mysql private service credintials
        synchronize: false,
        logging: false,
        entities: [
            AnswerSchema
        ]
    }); 

--------------------------------------------this is my index.js backend file---------------------
const express = require('express')
const app = express()
const port = 3306

const bodyParser = require('body-parser');

const scrapers = require('./scrapers');
const db = require('./db')

app.use(bodyParser.json())
app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*"); // disabled for security on local
    res.header("Access-Control-Allow-Headers", "Content-Type");
    next();
});

app.get('/answers', async (req, res) => {
    const answers = await db.getAllAnswers();
    res.send(answers)
})

app.post('/answers', async (req, res) => {
    console.log(req.body)
    const Ans_data = await scrapers.scraptheweb(req.body.Ans_value)
    console.log({Ans_data});
    const answers = await db.insertAnswer(Ans_data.searchresults_quant, Ans_data.searchresultsq_title,Ans_data.searchresultsq1, Ans_data.Q_url1,Ans_data.searchresultsq2,Ans_data.Q_url2,Ans_data.searchresultsq3,Ans_data.Q_url3,Ans_data.searchresultsq4, Ans_data.Q_url4,Ans_data.searchresultsq5,Ans_data.Q_url5,Ans_data.searchresultsq6,Ans_data.Q_url6,Ans_data.searchresultsq7, Ans_data.Q_url7,Ans_data.searchresultsq8,Ans_data.Q_url8,Ans_data.searchresultsq9,Ans_data.Q_url9,Ans_data.searchresultsq10, Ans_data.Q_url10,Ans_data.searchresultsq11,Ans_data.Q_url11, req.body.Ans_value);
    res.send(answers);
})

app.listen(process.env.PORT || port, () => console.log(`Example app listening on port ${port}!`))


-------------------------------------------------------this is my index.html file front end--------------------
            function submit_question(){
                const Ans_value = document.querySelector('.question_input').value;
                //send to server
                fetch('https://jikisiki.onrender.com/answers', { 
                    method:'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({Ans_value})
                })
            }
            function newEl(type, attrs={}){
                const el = document.createElement(type);
                for (let attr in attrs ){
                    const value = attrs[attr];

                    if (attr == 'innerText') el.innerText= value;
                    else el.setAttribute(attr, value);
                }
                return el;
            } 
            function clearAll(){
                const thecontent= document.querySelector('.container')
                thecontent.innerHTML = '';

            }

            async function Loadanswers(){
                const res = await fetch('https://jikisiki.onrender.com/answers');
                const answers = await res.json();

                const ctr = document.querySelector('.container'); 

![mywebservice|690x413](upload://gXZPbFUc4JI7PesEo6RNVNokBGt.png)

[mmaddex]

Hello

It looks like you might be attempting to access your Private Service directly from your Static Site? If that’s the case this won’t work, Private Services can only be accessed by other Render services with the same owner and in the same region. They are not exposed to the public internet, which you need for your static site.

The most straightforward approach would be to create your MySQL database as a web service that would give it a URL that could be accessed from your Static Site. But, it’s usually not a great idea to have your frontend directly interacting with your SQL database.

The more secure approach would be to add an API between your static site and database. The API would have a publically available URL, then connect to your MySQL private service.

This monorepo example demonstrates a nice pattern for adding an API to a static site.

Let me know if I’ve misunderstood the problem you’re trying to solve.

Best,

Matt