DEV Community

Cover image for LOVEFIELD - My favorite relational database solution for electronJS Projects (Part 1)
deomaro
deomaro

Posted on

LOVEFIELD - My favorite relational database solution for electronJS Projects (Part 1)

Hello devs....

Few months ago I got a customer who wanted me to develop management system for his local business. He wanted it to be a desktop App with local data storage. I chose to use my favorite electronJS as a framework for this Desktop app but I faced the challenge on how I would implement database on it.

I tried to use mysql drivers on nodeJS but that option didn't provide required portability(It needed database server). So I began a search and I came across this library called LOVEFIELD Made and supported by Google.

Lovefield is a relational database that uses indexedDB on browsers to store data for websites. Since electron framework just provides a chromium-like browser for your app to run, lovefield becomes a cheap and portable solution to implement relational database support for your app.

With a combination of electronJS, (a framework that allows devs to create cross platform desktop Apps with javascript, css & html5) and lovefield developers can create very useful Desktop apps. Now let's see how to configure your electronJS to use lovefield.

CONFIGURING LOVEFIELD IN ELECTRONJS PROJECT
Here we go.. Start by going to the root of your electronJS project and install lovefield using npm's

npm install --save lovefield

. After it has been downloaded the next part is loading it to your project

Loading lovefield
There is a trick here, Lovefield was primarily made for browsers and not the nodeJS environment. But electronJS uses nodeJS and it creates browser environment for your App. So when you require it in your project's javascript file like any other module it may not work as intended (For me it didn't work completely).

So to go around this you have to use the normal browser-like way in your index.html file (or any other html file where lovefield will be used), I mean you should use the <script> tag to load lovefield. You can load it like this

<script src="node_modules/lovefield/dist/lovefield.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

After loading it you can use the lf namespace to access all lovefield APIs and Classes.

Thanks for reading to this far, this is part one of my article on lovefield. The next part will focus more on how to use lovefield, most common errors and what precautions you should always take when using lovefield as your relational database.

Happy coding!

Top comments (0)