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
Related
I am using React in my project and I have problem with client-side prerendering.
More specifically, it would be necessary to configure SEO
Which is the least painless way to prerender existing reactjs app wiht react-routes
Some examples I have researched:
Gatsby.js - https://www.gatsbyjs.org/docs/porting-from-create-react-app-to-gatsby/
Next.js - https://nextjs.org/docs#custom-document
Netlify - https://dev.to/joelvarty/prerender-your-spa-using-netlify-for-better-seo-3h87
React-snap - https://web.dev/prerender-with-react-snap/
Prerender.io - https://prerender.io/
Keen’s Server Side Rendered - https://medium.com/keen-studio/keens-server-side-rendered-react-wordpress-rest-api-boilerplate-bb58edb7cc0a
Razzle - https://reactresources.com/topics/razzle
React Helmet - https://github.com/nfl/react-helmet
Can anyone suggest what option I should choose that is the least painless.
I have headless wordpress as backend and reactjs client-side as frontend.
Or are there other faster options besides the prerendering?
Thanks.
IMO you really don't need to use a framework to achieve SSR if you want to keep control without turning your codebase into a blackbox and choose your own stack.
I created some boilerplate using Node Express. It supports:
SSR using StaticRouter on the server and BrowserRouter in the client
ES6 webpack transpilation + hot reloading both client and server and auto-updating browser
Redux, data preloading and client store hydration
https://github.com/kimgysen/isomorphic-react-setup
Last time I ran it, I noticed that I hadn't saved the favIcon in the public folder and perhaps there are some minor bugs that I will fix soon (I've fixed them in my projects but didn't update this repo because nobody looks at it anyway (lol!)), but what happens here isn't all that difficult to understand.
I created some basic SSR websites with it in a matter of hours.
I enjoy redux-observable to initiate server ajax calls before rendering the content (using forkJoin), but this is not included in the boilerplate (I haven't actually supported it since I uploaded the first time).
But in terms of setup, I don't really see a point in using a framework for this necessarily, it really isn't that painful / difficult to do yourself.
The benefit that I particularly like is that you don't depend yourself on the scope and dependencies of the framework. You don't get into trouble with things like 'the framework will support this feature or fix that bug in one of the upcoming releases'.
Although ultimately, it comes down to personal choice. So it's not like I want to downgrade these frameworks.
Note: The way Redux achieves pre-rendering is simply by adding Redux store (state) objects to the window object in the html that is sent back to the client.
Then at the client, the it initializes the stores with these objects.
So very simply, this is something that is easy to achieve, even if you decide not to implement any other SSR features.
to create server side applicantion with painless integration you can use my cli to generate a default configuration like create react app cli from facebook, https://github.com/ghondar/crassa
In an article I read that
React uses server-side rendering.
But in another articles I came across this:
Client-Side-Rendering is a relatively new approach to rendering
websites, and it didn't really become popular until JavaScript
libraries started incorporating it into their style of development.
Some notable examples are Vue.js and React.js
Now Which statement is correct?
When I use create-react-app and run npm start, it seems to me that React uses the Client-Side-Rendering. isn't it?
It’s client side. But React, like some other client side libraries, can be used on the server to prerender it with node, usually for SEO.
Out of the box it renders on the client side.
But, if you have a requirement to render pages on a server, you can achieve this with:
Next.js or
Hypernova or any other tool (there is a bunch of them nowadays!)
Note, that SSR will require a bit more experience than a regular React app.
The main goal of this approach is to allow search engine robots crawl information form web pages(SEO).
create-react-app uses client side rendering by default. There are some tools like next js and gatsby js which pre-render pages on the server side. You can also do Server Side Rendering from scratch.
A few years on from the last answer, it is now quite difficult to implement a client-only React app - serving it on Node is trivial and absolutely what it expects, trying to use it as a client library with other server-side support is more of a challenge and documentation about how to do this is patchy and much of it out of date.
I've got an old app I wrote in Node, Mongo, Express and Handlebars. It seems to be a bit outdated in the sense that it was more static and all data was called locally off the same domain and rendered with Handlebars on the server side, which I thought was always necessary for SEO and it wasn't built with the idea of later building and connecting the data to a mobile version.
I've been using React a lot lately as well as looking into building mobile apps and with the tutorials out there, it seems like most apps these days are designed in a way that the backend is mostly a remote api with cross site origin requests enabled and a frontend that just gets the data from it and parses it on the frontend whether it's a desktop client or a mobile client.
What would be the best way to modernize my old app that'd keep it rendering on the server side using react instead of handlebars for SEO, while also having an api service for if I were to develop a mobile version that could get and parse the data?
There's a lot of server side rending react tutorials out there, but I'm not sure what the best approach is.
To turn your current app into a SSR (server side rendered) react application would be a big ask.
You would have more luck ripping out the html / handle bars response and just returning JSON instead, effectively turning it into an API.
In terms of adding a SSR react layer, the easiest option would be to use something like Next.JS. This does the heavy lifting for you to create server side rendering. There are plenty of other options out there but Next is one of the best and probably the easiest to get going with.
You would then make API calls from your SSR Next / React app to the Node API.
You can reuse the same API for a mobile application if you chose to go down that path at a later stage.
You would then make API calls from your SSR Next / React app to the Node API.
You can reuse the same API for a mobile application if you chose to go down that path at a later stage.
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'm starting building a react native application for both iOS and Android. I've read through the documentation of react native application, but there is one thing now I do not understand:
Is react-native app fully native application?
They say in react-native, that it would be. Then why am I asking this question? Well, I found the reason to ask the question through https://github.com/Microsoft/react-native-code-push. According to code push, they are able to dynamically update the application. And this is done by updating the javascript part of the application. But wait, if the application is real native app, then in the final version of the app there shouldn't be any javascript, am I right? So how are they doing it? Are they compiling the application at code push servers, and then sending the compiled app to the user or what? This really worries me that the react-native app is really not fully native app.
The CodePush plugin helps get product improvements in front of your end users instantly, by keeping your JavaScript and images synchronized with updates you release to the CodePush server. This way, your app gets the benefits of an offline mobile experience, as well as the "web-like" agility of side-loading updates as soon as they are available. It's a win-win!
Also, the reason I'm doubting this is because they say also in code-push documentation, that they are unable to update the native part of the react-native application:
Note: Any product changes which touch native code (e.g. modifying your AppDelegate.m/MainActivity.java file, adding a new plugin) cannot be distributed via CodePush, and therefore, must be updated via the appropriate store(s).
If the react-native app would be fully native, then in the end, all code should be native code. So I don't really understand why would it be harder to update the native native code, than the code that has been compiled to native?
If you change only code in /src/ folder (JS code) and without adding native modules
you can use CodePush to update your application.
If you change code in /src/ folder (JS code) and add some natives modules, you can't use CodePush to update your application.
You're JS code is compiled and read by native components. That's why you can update the JS layer.
If you take a look into your .ipa file and open main.jsbundle (unminify required) you can see your JS code. example: