How to connect to a Sqlite db from an HTML file via Javascript

Question

I would like to insert data into a SQlite3 db by pressing a button from an HTML file. In order to achieve this, I wrote a JS script. Unfortunately, when I press the button, I get this error message in my console.log:

script.js:5 Uncaught ReferenceError: require is not defined

Then, I tried to convert my JS file with browserify but then I got this error:

Cannot read property '_handle' of undefined

Here my HTML and JS codes to reproduce the error:

HTML:

<head>
</head>
<body>
    <div>
        <label>SQLite3</label>
        <button type="button">Connection</button>   
    </div>
    <script src="script.js"></script>
</body>

JS:

function addData() {
    const sqlite3 = require('sqlite3').verbose();
    let db = new sqlite3.Database('./data.db');
    db.run('INSERT INTO info (result) VALUES (10)', function(err, row) {
        if(err) {
            console.log(err.message);
        }
        console.log("entry added to table");
    });
}
addData();

does this answer? https://stackoverflow.com/questions/13192643/is-it-possible-to-access-an-sqlite-database-from-javascript — Siva K V, Jan 01 '20 at 17:20

score 1 · Answer 1 · answered Jan 04 '20 at 18:46

Browserify works around the problem that browsers don't have native support for the Node.js module system.

Browserify does not work around most other APIs that are provided but Node.js but not browsers. For example, Node.js has the fs module which allows you to access the file system of the computer the code is running on. Browsers, on the other hand, don't allow access except in very particular and limited ways.

Since new sqlite3.Database('./data.db') tries to read data from a file, it will not work in a browser.

Use a different API that is supported by browsers instead (such as IndexedDB or Web Storage.

Alternatively, if you want to share data between browsers, use Node.js to run a web server (e.g. with Express.js) and write a web service through which the database can be accessed.

Nafish Ahmed · Answer 2 · 2020-01-04T18:37:28.893

0

You can't connect to sqlite databawe from client side you have to connect from server side language. Perhaps you can use NodeJS as server side programming language.

follow those steps then it will work

STEP1 Download and install node js from https://nodejs.org/en/download/

STEP2 Install npm by folloy this instruction https://www.npmjs.com/get-npm

STEP3 Create Node js project by following this guides http://cassandrawilcox.me/setting-up-a-node-js-project-with-npm/

STEP4 Now you can install sqlite3 via npm.

After that you have to run server. If you are beginner then follow this https://www.w3schools.com/nodejs/

edited Jan 04 '20 at 18:37

answered Jan 01 '20 at 17:06

Nafish Ahmed

64
6

I have installed the nodeJS for sqlite3 via this command `npm install sqlite3`. Is it not correct? – H. Dave Jan 01 '20 at 17:11
@HDave it is correct, but you still can't utilize the SQLite database from the client side (e.g. in your HTML or script served in the browser). You'll need to run it on the server side, such as in a request / route handler. – Matt U Jan 01 '20 at 17:20
@H.Dave I've edited the instruction follow this maybe it will work for you. – Nafish Ahmed Jan 01 '20 at 17:25
@Nafish Ahmed if I start my JS file via the shell with this command `node script`, my code works properly and I can insert data into my db. However, I block on how to trigger this action from the button embedded into my `html`. In other words, how can I activate the server without using the shell? – H. Dave Jan 01 '20 at 20:21
Use Ejs modules to render template – Nafish Ahmed Jan 02 '20 at 01:54

How to connect to a Sqlite db from an HTML file via Javascript

2 Answers2