Replit DB for JavaScript?

Replit Help
1

Is there any way to use Replit DB in JavaScript on the web (in HTML/CSS)? If so, are there any tutorials or documentation on how to use it?

2 Likes
2

I do not believe it is natively made for JavaScript, however there is probably one on replit somewhere that is usable. If not, I could possibly try to rig something up for it.

4 Likes
3
1 Like
4

That’s a nice resource, but from my understanding they wanted to do it in plain HTML/CSS/JS. I could definitely be wrong here, but that’s what I gathered from the original post.

1 Like
5

Gave Perplexity AI a prompt, and checked with @Firepup650.
Fork https://replit.com/@util/Replit-Database-proxy
It says that in a HTML/CSS/JS project, you can link this script
<script src="https://unpkg.com/@replit/database" type="module"></script>

and this code will apparently work in frontend js.

import { Client } from "https://unpkg.com/@replit/database";

// Initialize the Replit DB client
const db = new Client("https://NAMEOFFORK.USERNAME.repl.co");

// Store a value in the database
db.set("myKey", "myValue").then(() => {
  alert("Value stored successfully!");
});

// Retrieve a value from the database
db.get("myKey").then((value) => {
  console.log("Retrieved value:", value);
});

Hopefully, this isn’t some dreamed-up code but https://unpkg.com/@replit/database seems to be a working link so I gave it the benefit of the doubt.

Edit: edited the code.

6

That will not work, as there is no replit db URL locally, and I doubt that the API sends cors headers.

1 Like
7

Taking that into account, I think this would work:

  1. Fork this repl
  2. Implement the above code, changing const db = new ReplitDB(); to const db = new ReplitDB("https:\\database.proxy.repl.co");, replacing database with your repl’s name, and proxy with your username.
8

The extensions api has a DB module which you can use in frontend:
https://docs.replit.com/extensions/api/replDb

9

Well that’s not possible as you can’t use a database from the frontend.

1 Like
10

I tried to combine a few different methods (you can see the Repl here)
This is the current error I’m getting:
image
IDK what it means.
I’m not really sure where to go with the code I have right now
If it’s not at all possible to use Replit DB in HTML/CSS/JS then I’ll attempt to make my own

11
  1. That error implies that the devtools broke somehow, probably safe to ignore.
  2. Yes, you need to put the URL in the 'ReplitDB' function, otherwise it won’t know what repl to connect to.
12

I made some minor adjustments to it (including adding the URL to the function)

Well it’s not working… so I’m not so sure about that…

13

Hm. Try embedding this in the index.html file:

<script>
const db = new ReplitDB("https://database.lightdefusion.repl.co");

db.set("Test", "OK!").then(() => {
  alert("Test Key set!");
});

db.get("Test").then((value) => {
  alert("Test Key is:", value);
});
</script>
14

@Firepup650
I kept everything and just added the code you shared, this is what resulted:
image

15

Try adding this to the top of the script block:

import { Client } from "https://unpkg.com/@replit/database"

and then change new ReplitDB to new Client.

16

Yet another error. This time, though, it’s different
image

17

Try my method of importing the extensions repl db, it should work in only front end.

18

Ah. That’s because it’s a module and it’s not imported as one. I apologize. Try changing

<script src="https://unpkg.com/@replit/database"></script>

to

<script src="https://unpkg.com/@replit/database" type="module"></script>
19

Due to trials and errors I’ve decided to try and implement my own database and use that instead of Replit’s DB.

2 Likes
20

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.