Typeorm with vue and sqlite working on browser

[kaleming]

Hi @jepiqueau,

I really like this example using typeorm with vue and sqlite.

Everything is working fine, however I could not found a way to use sqlite on browser. I also noticed that last release of sqlite-capacitor 3.2.3-1 provides a plugin that should make this possible.

In order to make this repository to work on web browser (with sqlite), I should only follow this repository (https://github.com/jepiqueau/vue-sqlite-app-starter) example ? Or using typeorm require extra steps ?

Best regards

[jepiqueau]

@kaleming you should try to make a mix of your app and the app starter you may also look at the doc

[kaleming]

Thanks for your answer @jepiqueau.

I have read that :

jeep-sqlite is based on sql.js for SQLite queries and localforagefor database storage in IndexedDB.

Until now, I've been defining typeorm using:

    createConnections([
        {
            name:'test',
            type: 'capacitor',
            driver: sqliteConnection,

In order to use web capabilities, do I need to change to type: 'sqljs' ?

I am trying doing this:

const webDb = async (sqlite: SQLiteConnection) => {
        // Create the 'jeep-sqlite' Stencil component
        const jeepSqlite = document.createElement('jeep-sqlite');
        document.body.appendChild(jeepSqlite);
        await customElements.whenDefined('jeep-sqlite');
        // Initialize the Web store
        await sqlite.initWebStore();
}

const platform = Capacitor.getPlatform();

if (platform === ('web'))  {
    const sqlite: SQLiteConnection = new SQLiteConnection(CapacitorSQLite)

    webDb(sqlite)

    createConnections([
        {
            name:'opConnection',
            type: 'capacitor',
            driver: sqlite,
            database: 'op-offline',
            entities: [
                Templates, 
            ],
            migrations: [
                TemplatesTable1629463391313,
            ],
            logging: ['error', 'query', 'schema'],
            synchronize: false,
            migrationsRun: false,
        }
    ])
    .then(async connections => {
        try {

            // run all migrations
            for (const connection of connections) {
                await connection.runMigrations();
            }
            router.isReady().then(() => {
                app.mount("#app");
            });
        } catch (e) {
            console.log(e.message);
        }
    })

I am getting this error:

Uncaught (in promise) Error: Not implemented on web.

If you have any suggestion, it would be very helpful.

I will keep trying to understand reading the docs you suggest.

[jepiqueau]

@kaleming it is a bit more complex in fact. in browser the database is an in-memory database and must be saved on the jeepSQLiteStore/databases localforage store. As we do not want to close the typeOrm connections when they have been created in the main.ts file we need to use the saveToStore method provided by the web plugin. This is what i did in the updated https://github.com/jepiqueau/vue-typeorm-app release 0.1.0 . Hope this will be helpful for you and you can applied the same principles in your app. Do not forget to copy the sql-wasm.wasm into the public/assets Keep me aware of your progress. Thanks for having post this issue, it force me to look for a solution.

[kaleming]

Thank you very much @jepiqueau.

It is much clear to me with this update you did.

I am doing all the necessary changes to follow your example, then I can tell you if everything is working well.

Best Regards

[jepiqueau]

@kaleming thanks and good luck

[kaleming]

Hi @jepiqueau, I started some tests, and it seems to be working fine.

I just want to share one issue that I faced, and how I am handling it.

I am using @capacitor-community/http plugin to make requests. When I moved to web environment I noticed my requests was no longer working (blocked by CORS policy). A workaround I am using is opening chrome on linux using:

google-chrome --disable-site-isolation-trials --disable-web-security --user-data-dir="~/tmp"

I just updated this issue (https://github.com/capacitor-community/http/issues/28)

[kaleming]

I'll close the issue, since I had no problems.

Thank you very much @jepiqueau.

[jepiqueau]

@kaleming thank you for the feeback good luck with your app