User Data File Electronjs application example
While working on my electronjs application that I use to make videos for my you tube channel, and thus also video embeds for my blog posts on threejs I ran into a situation in which I needed to share state data between the renderer and main process. The way of typically doing this is a little convoluted as it requires IPC messaging between the render and main process my way of using the send methods and defining event handers with the on methods of the IPC Main and IPC Renderer classes.
So then for the most part the way that this needs to happen is just my way of IPC and for many situations that might be the best way to go about doing this. However for some things I might want to create a user data folder in the proper standard location and use that as a means to store user data that I can access from the main or render process.
The user data file elecronjs example and what to know first
This is a post on an electronjs application in which I am just creating and viewing a simple user data file that is to be found in the current user folder of the operating system in which the application is running. In Windows and macOS systems this would be the Users folder and on Linux systems there is the home folder. Although I will be keeping this example fairly simple this is still not really any kind of hello world or getting started type example with electronjs. There is also a lot to know about nodejs, and client side javaScipt as well in order to get into making applications with electron that I will not be getting into detail here. However I do often open these posts with a few things that you might want to read up on that are related to the over all content of this post.
The homedir method of the os module in nodejs, and native nodejs features
In this example I am using the home dir method of the os module in nodejs as a way to know where the starting point should be to park user data and any and all application data on a user by user basis. I am also using a lot of other native nodejs modules and features with the path module, as well as the file system module and so forth.
Full Source code on Github
The full source code for this election example, as well as many others can be found in my electronjs example Github repository.
1 - The user data module
In this user data module then I have a number of helper functions that I am using to check if a user data folder is there to begin with, and of so create it. In other worlds I want to do something that is like the mkdir -p command in Linux to make sure that a folder in which I want to park data for the current user is there to begin with.
In older versions of nodejs this was a little involved and required the use of an npm package like that of mkdirp. However in newer versions of node it would seem that native support for recursive creation of folders works well with just the native fs.mkdir method of the file system module in nodejs.
When it comes to the menu that I am using for this I am using the get method of the user data module to get what the start folder value should be from the user data. Once I have that I can then use that for the default path property of the show open dialog and show save dialog of the dialog module.
3 - The preload file
4 - The client system
Now that I have my main and prealod files out of the way I will want to have a little front end code for this to make sure that my preload functions are working the way that they should be.
When the Browser window is up and running it will call the get user data method to get the current state of the user data file.
4.2 - The window_main.html file
Here I have the html that I am using for this example
I had a general idea of what I wanted to do with this example, I wanted to create and refine some things with this kind of user data file and folder before making major changes to my videoground application. What it is that I have worked out here might me worked into a future revision of the video ground project as there is a lot that I would like to do with a user data folder. With that application I could use the user data folder as a standard location to park frame images when I use my export to frames feature of that application. In future revisions in which I might also use ffmpeg as a way to create final videos this can also be used to place such files by default. There are all kinds of things that I would also like to store as user data such as a default start location when opening files that I thing would improve my workflow a little such as what I have worked out for this example on the user data folder.