soulsam480/elec-sqlite-vue

Testing integration of vue3 + Electron 7.0.0 + SQlite + Sequelize

Vue 3 + Electron + Sqlite + Sequelize

POC for Electron app with Vue 3 frontend and persisted database with SQlite.

Setup

Inside project root folder

note: I prefer using yarn as npm is highly unstable with electron and vue integration

yarn 

yarn electron:serve

To Build App for OS executables

yarn electron:build

File Structure

• The project is a normal Vue CLI project. So the file structure is pretty familiar.
• The electron builder plugin adds a new file src/background.ts , this serves as the entry point of the electron app.
• src/data.db In project SQlite 3 database for testing.
• getdb.ts Initiates the Sequelize instance for using the database.
• main.ts entry of vue app. It creates the vue instance and mounts the app.

Where to code ?

• For adding pages/views for electron app go to > src/views.
• For adding components to be used i Vue pages/views go to > src/components
• To create new app window / or any electron stuff go to > src/background.ts
• For working with database i.e. creating models for sequelize go to > src/getdb.ts

Config Files

• tsconfig.json for configuring typescript.
• vue.config.js Vue config. Not recommended to change anything in this file.

A brief note on Sequelize

• Sequelize is a promise based ORM. So using it is pretty easy.
• Whe using sequelize we don't have to create tables as it creates and syncs tables according to the defined models.
• Sequelize models are a abstaction of the data schema or the table schema of a db. So instead of using SQL queries for creating tables we can make sequelize to do that by using models.
• A sample model User is defined in src/getdb.ts. Learn more about sequelize Models

// a sample model USer
const User = sequelize.define('User', {
    firstName: {
        type: DataTypes.STRING,
        allowNull: false
    },
    lastName: {
        type: DataTypes.STRING
    },

}, {
});

• SQL queries are replaced by sequelize model queries .

// sample query for model User
// inside an async function

User.findAll().then((res)=>{
	console.log(res)
}).catch(err=> console.log(err))

Lean more about model Queries here

• More about Sequelize can be found in their Docs. Not that good but functional.

Notes

• Usage with Vuex is not recommended as it causes the db process to stop on reload.

Known Bugs

• There are no known bugs as the build was successful with no errors.
• To report a bug create an issue.

Errors

For errors try googling or contact me!

References

• Vue CLI Plugin Electron Builder Docs
• Sequelize Docs
• Electron Docs
• Vue 3 Docs

elec-sqlite-vue's Issues

Sequelize + Sqlite3

Hey, I am testing out the same stack. the main error I am facing is with sqlite and sequelize. can you help me out ?

DB Not connected on yarn electron:serve

Hello,

I was trying your template for a little personal project I want to work in and just after installing I faced this issue.

Steps to reproduce:

1. Clone repository.
2. yarn install
3. run yarn electron:serve
4. One you get into the app in the console you can't see connected status.
5. You can't add any record to the database.

This is happening only the first time you open the app and only with yarn electron:serve, after you reload the window it is working again. By the contrary it works perfectly when you run yarn electron:build