I want to build an application with Electron. I have some questions. If I use Electron with Express, would it make my app slow? Because I read this in Electron's discussion or should I use Electron with only React. So if I use only React what should I use for the database?
By the way, I have done Electron with express but when I run the app, I also can see my application inside my web browser. Is that right or I have done something wrong?
const {app,browserWindow}=require('electron');
const server = require('./app');
let mainWindow;
You can build your renderer any frameworks as you want. Even you can build your renderer with just HTML/JS/CSS.
You are running express server on your main process. So it's accessible through your web browser. It's true.
For Database you can use any local database like sqlite3 or even you can just store your data in JSON files. Whatever you wanna be.
Related
I know that it is not possible to serve a react app, using live server. In other words, even though the js is bundled and linked to the HTML file, if you open the file statically, the react code will not render.
I read about static and dynamic servers, but since React happens all on client side, I cannot understand why serving the app using webpack, vite or even a simple express server works, but it cannot be served through a server like live server, or opened manually and work.
What is the difference?
The difference is in how the JavaScript code is executed in the browser. When you serve your React app through a webpack dev server, an express server, or any other kind of server, the JavaScript code is executed in the context of a web page, with access to the DOM and all the Web APIs.
But when you open an HTML file statically, the JavaScript code is executed in an isolated environment, with limited access to the Web API. This is why React code that relies on the DOM and Web API will not work when opened manually.
Webpack, vite, and express provide a dynamic environment with all the necessary APIs and services that React needs to run properly. This is done by serving the app as a web page over HTTP, which the browser then loads and executes.
I have external api hosted in the cloud and I would like to write desktop app for management. Last version of electronjs I worked with was version 8 and over that time a lot of changed especially from security perspective. The concept of preload was introduced and I would like to know is it fine to write renderer as react app with redux toolkit and make api calls that way or should I use preload script to get data on the server side.
I would like to know what is a proper way of writing such app.
Yes, it is totally fine to use react and redux toolkit in your renderer.
To quickly get started, you could use something like electron react boilerplate or one of the several other boilerplates available online.
I don't understand why you would want to use preload to fetch from the server.
You can treat the renderer as just another browser instance and make requests to the server directly from your react app using fetch or xhr.
Preload is generally used to run code before the renderer has loaded. I generally use it as a bypass to turning on nodejsintegrations for my electron apps, but you can read more about it in the official docs
I have a huge project using asp.net and jquery. I want to start migrating to react page by page (it might take a lot of time).
I would like to know what is the best practice to do it.
Can I move pages to react partially (for example half of page), and is it good approach?
Lets say I have main page A with with links to page B and C. Can I move page B and C to react, using routing, without moving page A right now?
I think I will use Vite to create and manager react project. In the production vite generates static files so I will simply host new files next to old ones in my backend server.
The problem is with development, because in this mode vite creates new server with functions like hotreload and in the result I have two diffrent servers hosting frontend asp.net and vite.
I would prefer to have just one server also for development. Is it possible to build development version with vite and copy it to server the same way like in production? Is this good approach?
I know that it would be the best to have backend and frontend server separated, but project is so huge that it is not possible in the foreseeable future
I'm using create-react-app in my latest project and it's great! Now I'm facing one issue that I'm not sure how to solve properly.
I've created app using redux for my state managment, and that all is working well.
Now I don't have much experiance with server side renderin in React, but for my next feature I'll need to take one of the existing / working react components (that are connected to redux store) and render it on server that comes with create-react-app. The reason why I wanna do this is to be able to use some libs like pdf generators and simillar to be able to print out some of them (also some other stuff but that's the basic).
First thing I'm confused with, since I don't want to render everyting on server, what's the best / correct way (for development) to run webpack-dev server and node server that will do all those taks I mentioned above in parallel instead of just changing it's default port to let's say 8000, and run it manually?
Secound, should I be able to just use ReactDOMServer.renderToString on that existing component on server or there is something else that will complicate stuff (I know I'll need to add babel on server definitaly)?
Create React App does not support server rendering. You might want to migrate to Next.js which does.
Unfortunately, Create React App (CRA) doesn't have extensibility points to allow this. But there is a slightly altered version of CRA that allows compiling, testing and running both client-side and server-side code using regular CRA pipeline - npm start will compile and launch both cient-side and server-side portions of your app, using a single instance of Webpack, on the same HTTP port.
You can find more info by visiting React App SDK.
I have read much about this function and I understand how it works in the web environment.
This article gives a good explanation.
How does onUpdated work
What I would like to know is how do I get this to work on Native Apps
When you encapsulate a web app to build a native app using a framework like PhoneGap for example, you have to build the Sencha app in package mode that disable the use of the manifest, finally you have to copy the built app in the native OS specific folder of your app and build it to make the binary, so, the web app sources are inside your native binary and not downloaded from a server.
So, the "onUpdate" event is never triggered in native apps and you have to manually release a new version of the app every time you change the web app sources.