Connecting Database with Svelte

Question

I'm new to using Svelte and would like to create a ordering website using Svelte. I know that I will need a database to keep track of the order, customer name, price etc. I have used MySQL before but I haven't learned how to connect a database to a website.

• Is there a specific database that you can use if you are using Svelte? Or is there a way to connect MySQL to Svelte?

• I have searched about this on Youtube and Google but I'm not sure if it's different if you are using Svelte so I wanted to make sure.

Note: I have not started this project yet so I do not have any code to show I just want to know how you can connect a database if you're using Svelte.

Acquainted

This is a nice video on how to build a svelte to-do app with firebase - firestore: youtube.com/watch?v=043h4ugAj4c or read the tutorial here: fireship.io/lessons/svelte-v3-overview-firebase – Pori

Answer 1

Svelte is a front end javascript framework that run on the browser.

Traditionally, in order to use databases like mysql from a front end project such as svelte, (that contains only html,css and js), you would have to do it with a separate backend project. You can then communicate the svelte app and the backend project with the help of REST api. The same applies to other other front end libraries/frameworks like react, angular vue etc.

There are still so many ways to achieve the result. Since you are focusing on Svelte here are few things options

1 Sapper

Sapper is an application framework powered by svelte. You can also write backend code using express or polka so that you can connect to database of your choice (mysql / mongodb)

2 User Server less database

If you want you app simple and just focus on svelte app, you can use cloud based databases such as firebase. Svelte can directly talk to them via their javascript SDK.

3 monolithic architecture

To connect with mysql in the backend, you would need to use one serverside application programming language such as nodejs (express) php or python or whatever you are familiar with. Then use can embed svelte app or use api to pass data to the svelte app.

Watchcase

Answer 2

I can make an example with mongodb

You have to install the library

npm install mongodb

or add in package.json

Then you have to make a connection file that you have to call everytime you need to use the db

const mongo = require("mongodb");

let client = null;
let db = null;

export async function init() {
  if(!client) {
    client = await mongo.MongoClient.connect("mongodb://localhost");
    db = client.db("name-of-your-db");
  }
  return { client, db }
}

for a complete example with insert you can see this video

https://www.youtube.com/watch?v=Mey2KZDog_A

Mathers

Answer 3

You can use pouchdb, which gives you direct access to the indexedDB in the browser. No backend needed for this.

The client-pouchdb can then be replicated/synced with a remote couchdb. This can all be done inside you svelte-app from the client-side.

It is pretty easy to setup.

var db = new PouchDB('dbname');

db.put({
  _id: '[email protected]',
  name: 'David',
  age: 69
});

db.changes().on('change', function() {
  console.log('Ch-Ch-Changes');
});

db.replicate.to('http://example.com/mydb');

more on pouchdb.com

Also the client can save the data offline first and later connect to a remote database.

Sharpeared

Answer 4

As i get question mostly about connection to backend, not a database. It is pity, but svelte app template has no way to connect backend "in box".

What about me, i'm using express middleware in front of rollup server. In this case you able to proxy some requests to backend server. Check code below

const proxy = require('express-http-proxy');
const app = require('express')();

app.use('/data/', proxy(
    'http://backend/data',
    {
        proxyReqPathResolver: req => {
                return '/data'+ req.url;
            }
        }
    )
);

app.use('/', proxy('http://127.0.0.1:5000')); 
app.listen(5001);

This script opend 5001 port where you have /data/ url proxied to backend server. And 5000 port still available from rollup server. So at http://localhost:5001/ you have svelte intance, connected to backend vi /data/ url, here you can send requests for fetching some data from database.

Ethiopia