A Blog about web development and Life

Saturday, July 28, 2018

Electron app with AngularJs and MySQL Database

Hello folks, 
Do you know about Electron API (a GitHub repository, helping a web developer to make standalone cross-platform app)? The electron can make any web app to Desktop Application in all three major OS (i.e. Windows, Mac, Linux). Okay, enough intro about Electron, let's move on Problem...
So, if you are an Angular Developer and you want to make a Desktop app having a database in MySQL, you came to right place! 
The Directory structure should look like this :
AngularElectronMySQL ->
     -WebApp (Angular app)
So, First Initialize your Angular project using angular-cli (you can use also build it simply). Here, I am assuming that you completed your Angular Project and Built it. Just one more thing add a data-service for getting data from MySQL. Subscribe to the MySQL server (for our case: http://localhost:1024). After that, you need to copy the files from the built project to electron folder. I used npm like this : 
Now, for Electron create a main.js file inside the Electron folder. Write down this code : 
Now, for connecting with MySQL, we need to create a Node.JS mini-server. create a mysql.js file inside Electron folder.
That's it!! Run your Electron App. The first time it will prompt you for the database credential and store it in a file.
Here's the list of required npm dependencies to install : 
For Node: http, mysql, electron-prompt
For Copy.js : fs-extra, delete


Post a Comment

Search This Blog