How to connect to a sqlite db from a React app?

As the other answer mentioned, this is probably not recommended. You should really stick your database on the backend somewhere.

However it is possible to do this using sql.js. I had no luck with the sqlite3 module.

Here is the example I used: https://github.com/sql-js/react-sqljs-demo

Start by installing Craco. This is needed for bundling the wasm file.

npm install @craco/craco --save

replace your react scripts with Craco scripts in package.json:

"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
"start": "craco start",
"build": "craco build",
"test": "craco test"
}

Make a craco.config.js file in the root of your project and place this code inside:

module.exports = {
    webpack: {
        configure:{
            // See https://github.com/webpack/webpack/issues/6725
            module:{
                rules: [{
                    test: /\.wasm$/,
                    type: 'javascript/auto',
                }]
            }
        }
    }
};

Then install sql.js

  npm install sql.js --save

You probably need to do some more backend setup after this, but for now import the package:

import initSqlJs from 'sql.js';
// Required to let webpack 4 know it needs to copy the wasm file to our assets
import sqlWasm from "!!file-loader?name=sql-wasm-[contenthash].wasm!sql.js/dist/sql-wasm.wasm";

I had to disable eslint to get the second import to work. Really not ideal, but eslint throws errors if you try using file-loader. These are the lines to remove in package.json:

  "eslintConfig": {
      "extends": "react-app"
  },

Now call the library!

const response = fetch("example.com/sqlitedatabase");
const buf = await response.arrayBuffer();
const SQL = await initSqlJs({ locateFile: () => sqlWasm });
const db = new SQL.Database(new Uint8Array(buf));

You can then query the database; The following code runs a query and then puts it into a more useable form than the default response.

const query = db.exec(`
   SELECT
     *
   FROM
     table;
`);
const columns = query[0].columns;
const values = query[0].values;
let rows = [];
values.forEach(element => {
    let row = {};
    for (let i = 0; i < columns.length; i++) {
       row[columns[i]] = element[i];
    }
    rows.push(row);
});

That should work, but as I mentioned above, you might need to mess with the backend a little. Often times single page applications have trouble with CORS when dealing with bundled files. To fix this on AWS Amplify, I added the following code in a file called customHttp.yml to the root of my project:

customHeaders:
- pattern: '**/*'
  headers:
    - key: Access-Control-Allow-Origin
      value: '*'
- pattern: '*.wasm'
  headers:
    - key: Access-Control-Allow-Origin
      value: '*'

(Edit: Added a more generic pattern to the file, didn't work without it.) Note that it may take some time for the custom headers to update, even though it looks like they update immediately. Also related to single page applications, wasm files need to be added to the list of files exempted from redirects:

Source address: </^((?!.(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|json|map|wasm)$).)*$/>
Target address: /index.html
Type: 200 (Rewrite)

ReactJS is mostly a front end framework, you should create a backend server.

Some NPM packages are not compatible with front-end JS application.

Your react application will call the server and the server manipulate the DB transactions. You can for example use express js. Useful docs below :

ExpressJS - SQLite doc

API Request from react app