Aiuto utilizzo DB integrato

Buongiorno,
premetto che frequento una università di ingegneria informatica, ma non sono molto esperto riguardo l'hosting di siti web. Ho realizzato una Single Page Application con Vue.js tramite framework Vite divisa in frontend e backend. Quest'ultimo possiede alcuni file "controller" contenenti query che accedono ad un database collegato ed estraggono i dati che poi vengono visualizzati all'interno delle pagine specifiche tramite costrutto iterativo "v-for".

Eseguendo il programma in locale tramite la modalità sviluppatore di vue (npm run dev) non risultano problemi e il database appare come correttamente collegato al frontend permettendomi di accedere ai dati. Quando però eseguo la build del progetto e cerco di caricare i file su altervista tramite FTP con FileZilla, il collegamento al database smette di funzionare e da questo punto in poi non capisco più se magari altervista nonostante la possibilità di avere un DB MySQL collegato non permetta il recupero dati, oppure semplicemente sono io che non ho configurato correttamente qualcosa.

Il sito in questione si trova al link notesync.altervista.org e l'errore in questione è il seguente "GET http://notesync.altervista.org/cocktail 404 (Not Found)", "cocktail:81 Uncaught ReferenceError: start_counter is not defined at onload (cocktail:81:32)" dove cocktail è il nome di una pagina.

Mi piacerebbe capire come risolvere la situazione mantenendo i benefici della Single Page App e non dover invece ripiegare su pagine statiche con inserimento manuale dei dati.

Mi scuso per la forse eccessiva corposità del messaggio e resto disponibile per ulteriori chiarimenti.
Grazie in anticipo

[dreadnaut]

Non ci sono benefici in una Single Page App, sono complessità aggiuntive

Altervista non supporta Node come back-end, ma solo PHP. Quando carichi il tuo sito, il front-end sembra funzionare (nel browser), ma non ha un back-end con cui parlare.

Puoi implementare un back-end equivalente in PHP, o riconsiderare l'intera strategia: se vuoi creare un sito web, implementarlo come un'applicazione JavaScript spesso non è l'idea migliore: il sito sarà più pesante, più fragile, ostico ai motori di ricerca, problematico da mantenere negli anni, etc.

[laravista]

Devi usare Hash Mode nel routing cioè il cancelletto quando poi richiami URL https://router.vuejs.org/guide/essen...mode#Hash-Mode

http://notesync.altervista.org/#/cocktail

Anni fa ho dovuto risolvere lo stesso problema, noterai # (hash, o l'ancora) nel mio URL
https://monastic.netlify.app/#/url/h...ster/README.md

ho implementato la createWebHashHistory() come hai suggerito ed effettivamente così si è risolto il problema del ricaricamento della pagina che produceva un errore. Tuttavia ancora non riesco ad estrare il contenuto delle tabelle del DB MySQL e dopo innumerevoli tentativi, ancora non riesco a capire cosa stia sbagliano, se nel proxy del server per la rotta delle "/api/...", o se nelle chiamate axios alle api..

Inoltre non ho ancora approfondito la prima risposta che ho ricevuto da "dreadnaut" per quanto riguarda la compatibilità tra Node e Altervista.

Mi piacerebbe approfondire per cercare di risolvere, grazie in anticipo

[dreadnaut]

Tuttavia ancora non riesco ad estrare il contenuto delle tabelle del DB MySQL e dopo innumerevoli tentativi, ancora non riesco a capire cosa stia sbagliano

Il tuo sito chiama il back-end, ed il back-end non risponde. Questo perché hai caricato un back-end scritto in JavaScript su uno spazio web che non supporta back-end scritti in JavaScript. I file sono sull'FTP, ma non fanno nulla, sono inerti.

Ho capito. Non avendo la minima esperienza di PHP, non saprei come trascrivere il backend e come includere php nel codice.

[dreadnaut]

Se non devi fare operazioni complesse, ma solo restituire le informazioni contenute nel database, è qualcosa che puoi improvvisare.

Qua mi appoggio a PigroSQL, ma qualcosa del genere legge dal database e restituisce JSON, che puoi elaborare via JavaScript

<?php
require 'PigroSql.php';
$database = Pigro\Database::mysqlAltervista('notesync');
$tutti_i_cocktail = $database->tabella('cocktails')->tutti();

header('Content-Type: application/json');
echo json_encode($tutti_i_cocktail);

Alternativamente, puoi generare l'HTML lato server

<?php
require 'PigroSql.php';
$database = Pigro\Database::mysqlAltervista('notesync');
$tutti_i_cocktail = $database->tabella('cocktails')->tutti();
?>

<ul>
<?php foreach ($tutti_i_cocktail as $c): ?>
  <li>
    <span class="nome"><?= $c['nome'] ?></span>
    <span class="prezzo"><?= $c['prezzo'] ?>€</span>
  </li>
<?php endforeach ?>
</ul>

Nota che per un sito come quello che stai costruendo, ad occhio, la soluzione più performante e solida sarebbe generare intere pagine lato server, senza una riga di JavaScript. Se poi vuoi imparare ad usare Vue e Node, nessun problema, ma tieni presente che è una tecnologia sub-ottimale in questo caso.

Grazie per l'aiuto, è stato veramente utile a capire come organizzare il lavoro. Ho deciso di aggirare il problema del backend con qualcosa di più facile (anche meno performante): un json, funzionamento simile ad un db, sicuramente più scomodo, ma comunque adatto allo scopo prefissato.

Ringrazio ancora,
buona giornata