React + Redux + Electron desktop application, how to save data on local files - reactjs

As the title says I want my react-redux application running with node-electron to save some data when few actions fires.
Try 1:
So I tried nedb first but it does not actually create any local database file but only does save data in memory and I lose the data when I close the electron window or restart it. I initialize nedb datastore in redux actions file so I think that it may be called in a sub-process of main electron app or something but I don't know how to work around this problem.
Try 2:
After I tried simple json file module with same setup, when a file save action is fired it tries to save payload to a json file with jsonfile.writeFile method but it also fails here with error that "writeFile" is not a method. It is working perfectly with my node-express app but fails with react-electron setup.
Try 3:
I tried redux-persist and nedb-persist libraries but i think they also save data in local storage and not actually to a file system, so they lose data after a restart...
Any solution to above 2 problems or a new way to save data on local json file or any other offline database solution like nedb will work for me.

Related

How can i save a file on react folder from a url

Hello guys i need to download files from my database or my Onedrive and save them into react, this files is for my 3d models and the types is obj and mtl. For can i load dinamyc objects from database i need this feature, how can i do this ? I'm using three.js in this project.
Today the project is loading the files stored in project but i like to find a away to pick this from a database or a storage provider.
I tried to do using fetch or something like else but i can't find a away to do this correctly. I don't now if three.js supports url files i try to find but i don't see anything can help me.
Unless three.js provides a feature to take input from memory (in which case you can simply download the file into memory and pass it to three.js), doing this solely from a react app isn't possible. You will need to host your website on a server to have dynamic access to the public directory serving the react website.
Standalone react builds have static assets and can't be updated without creating another build

what is the best practice from the following in using json data from data.json file in reactjs

what is the best practice from the following in using json data from data.json file in reactjs web application?:-
Storing json data file in the same file system and import it in react component.
run json file on local server and fetch it.
use backend server.
and which option will work fine after deploying the application? and why?
It really depends on the use case.
If the data.json is static, importing it will include the file in your bundle and will create a better user experience since you will not have to make an HTTP call and wait for its response.
fetching a file from your local server will give you a smaller bundle size (quicker initial load) and while you fetch the file (should be quicker than backend since it is local) you can show some loading animation.
If your data file is dynamic you may need to serve it from the backend.
If you are server-side-rendering your page, importing it will include the data in your HTML source which can be an SEO advantage.
For me, if it a small enough static file I would Import it (option 1)

Can I save local disk database inside flutter app? Where does documentsDirectory make path?

I'm trying to make a quiz application with flutter.
I made a sample_quiz.db with DB Browser for SQLite.
I want to save my database that is in my local disk(C) inside a flutter app.
I am never able to find the path.
(I installed both path_provider and path dependencies)
What I found is only for making a new database with CRUD in class DB_helper.dart.
But the CRUD isn't helpful because I don't need to Create or Delete data with phone.
I want to save my own data inside the app so that every person who downloads my quiz app can see the same data.
I thought it might be somewhere in lib or a new dart file.
I try to find where getApplicationDocumentsDirectory(), but there is only the path inside an emulator.
Is there no way to save the database inside the code file?
How to upload, save and read my data in flutter app/ not emulator?
Please help me, Thank you.
create a folder inside your flutter project for example assets
copy your database inside this folder
and in your pubspec.yaml file
assets:
- assets/sample_quiz.db
and now you have access to your database
You can pack the database into an extra "assets" folder (on the same level as directory) and access it through your code (means parsing the data).

Save and get media from MongoDB database

I have a MERN Stack in which the user upload one of the 4 types of files: .pdf, .jpeg, .psd, .ai and I used FileReader to save it as buffer to mongoDB Database. I want to render it back to my React app (automatically download the file) on click. 'react-pdf' didnt help because the data which comes back from the database is buffer type and hence it shows 'Failed to load PDF' How do I solve this issue for all file types?
What I think there is nothing wrong with your client-side part the main cause of this is how you are storing it into DB
To store files in MongoDB you should try to use GridFS
You can find some tutorials about working with GridFS (example).
Check your MongoDB Driver's API and try to implement it in your project

Electron portable build not saving content locally

Use case
I'm building an app that has support for translations. The way I imagined it is that the app will come with English by default and will be sent around to different places. When it arrives in Germany (for example) a user will add German as a translation and then send it to France. The French user will be able to see both the original language (engligh) and German.
Background
The app is a React web app wrapped in Electron.
For the use case I implemented the localStorage API to store content changes and switch between different translations.
Problems
After building the app as a portable exe and testing it I started noticing that the content doesn't carry over to a new PC.
It seems like the data is stored on the system or something else is happening (like localStorage gets wiped when moving the portable exe to another machine).
In my view, because I'm using localStorage and Electron bundles the Chromium browser with the web app I was expecting localStorage to be saved within the portable app.
Would love to hear your opinion on this
Thanks a million.
The localStorage is not saved to your app's binary files but rather to a file on your account's part of your PC's file system.
On Linux, for example, Electron creates a directory for your app in ~/.config and stores your localStorage data there. I imagine that you might find a directory for your application in %APPDATA% (C:\Users\YourUsername\AppData\Roaming\ or similar) on Windows.
What you could try is to write your data to a file in your app's resources bundle which would be preserved while re-distributing, but that's another question and answer.

Resources