React SPA - Show loading screen until multiple components are rendered - node.js

Apologies for the relatively conceptual question. I'm attempting to emulate the full-page Heroku loading screen that appears when the page first loads and disappears after the navbar, images, libraries, and other components have mounted:
I know the underlying stack of Heroku is Ember, but is there a good practice/way for accomplishing a similar effect using node.js, webpack, react, react-router, and express. It's not isomorphic and I would prefer all rendering to take place on the client.
Thank you for your help and let me know if there's any other information that would be helpful in understanding what I'm trying to do.

I haven't tried this but I imagine you could simply provide the HTML for your 'full page loading screen' as the initial HTML that comes with your page, and then simply replace it with your ReactDOM.render call which will only get processed after everything has been processed.
More specifically, if you put all of your JS script tags in the footer, then the rest of your document will load and render while the scripts are being loaded, giving you your 'loading screen' effect. It should work to simply put the loading graphic within a div and then render over it with React.

Related

How to render a DOM server-side and record/stream that out?

What I am trying to achieve is to render the DOM of an HTML page with Animations & JavaScript on a Node.js server, then convert that into a stream, which can then be viewed client side in an HTML page. As this would keep the content of the HTML page & its data where it is secure, and only allow the page to be viewed (The use case for this means people don't need to interact with the page, only the server can through code, and people can just view it).
For context, this is part of a NW.js application, which is hosting the Node Server. So there is the possibility of rendering the HTML in a hidden window; however, that is one step closer to not-secure because it would be a window technically accessible by the desktop (I think).
Some of my questions for you all are:
What is the best method of sending video from servers to clients? I have come across WebRTC which actually has a screen sharing solution, however I don't believe that works for rendering the HTML page headless on a Node.js server.
Are there are ways to render (and then convert the DOM into a video stream) on a Node.js server?
If I am simply barking up a tree that doesn't exist, and what I am questioning isn't feasible: are there any completely secure ways of simply displaying a web page? Because from my inexperienced research, you can't truly hide anything and can only obfuscate the HTML & CSS & some JavaScript.
The server needs to be able to edit colors, icons, text, positioning and more of the elements in the page live, and so I believe I can't just put the page & animations in a video file and play that on the client side. It needs to be editable on the fly.
Any thoughts you all have on this matter would be much appreciated. I apologize if this question isn't traditional in any way, this is part of me getting my bearings as a first time questioner on here. :D

React scripts access management with Express (React+Node+Express)

I’m new to React, and I have trouble with finding best solution for my app.
My current (Node.js+Express+Handlebars) app has one main menu with place where I render HTML received from AJAX request made after click on menu element. Then all actions inside this element are done by proper JS script. I wanted to improve it by using React, but I have problem with permissions management.
Currently, after authentication, handlebars receive list of files which user should load and render it as src in element. If user has access to only 5 of 20 modules, he can access only proper JS files. Also, he can’t access HTML he don’t has access to.
How to manage it in React? I want to have one interface for all users, but I don’t want to store logic for all components accessible for every user. I was thinking about something like AJAX loading components for React, but how to manage it?
Is it even possible? As I understand (maybe wrong), all React components are compiled from separated JSX files to one main.js, so is it possible to add separate files with other components?
I believe that the issue that you have encountered is a crucial step on the long stairway of making something great. The solution to your problem is the balance of all the present factors and consolidation of them to cooperate on a mutually beneficial basis. I hope that solves your problem

How to crawl websites that have front end js framework

We are currently trying swiftype and wanted to see how to Crawl our website that has javascript frameworks becauase there are async calls.
I created a engine and was able to run a crawl based my sitemap, but instead of reading the actual content, it is reading my Angular js code.
For eg:
if have an angular code something like
<div ng-class='grey title'> {{ctrl.title}}</div>
and if this data gets binded on page load, instead of reading the title, it reads the actual code as {{ctrl.title}}
so when i search, the page returns something like
"This article is about {{ctrl.title}} . We take you through.... "
Any idea on how to make it compatible with js frameworks?
You can use a "headless" browser through i.e. Playwright.dev. "Headless" means it doesn't have a GUI. Since it's actually a browser it'll interpret the page correctly. It can be started from a JavaScript that runs server-side. Check out Web Scraping : Handling AJAX website part I and the code on GitHub: introWebScraping.

Importing React component from Node

I would like to do the initial render for my React application on the server side, but am having trouble importing and using React components without using something like babel/register (which is not suitable for production).
I would rather not have to compile my server side code for production, but would like to load an node-suitable React component to send to the client via res.send(React.createElement(Html)).
When I run this I get...
Unexpected token <
I assume this is because my components render method returns <!doctype html>...</html.
Is there a way I can have Node render a React component without having to use babel/compiling code before deploying?
Is there a way I can have Node render a React component without having
to use babel/compiling code before deploying?
No. Since JSX isn't real JavaScript, you need to transpile it at some point, either ahead of time (in a build script) or at run time (using babel-register).
Personally I ignore babel's advice to not use babel-register in production. It works just fine, I always cache + prime responses so performance isn't relevant. I'm open to hearing why transpiling with babel-register is bad though.
Short answer, yes.
this is from the official docs:
ReactDOMServer
The react-dom/server package allows you to render your
components on the server.
ReactDOMServer.renderToString
string renderToString(ReactElement element)
Render a ReactElement to its initial HTML. This should only
be used on the server. React will return an HTML string. You can use
this method to generate HTML on the server and send the markup down on
the initial request for faster page loads and to allow search engines
to crawl your pages for SEO purposes.
If you call ReactDOM.render() on a node that already has this
server-rendered markup, React will preserve it and only attach event
handlers, allowing you to have a very performant first-load
experience.
ReactDOMServer.renderToStaticMarkup
string renderToStaticMarkup(ReactElement element)
Similar to renderToString,
except this doesn't create extra DOM attributes such as data-react-id,
that React uses internally. This is useful if you want to use React as
a simple static page generator, as stripping away the extra attributes
can save lots of bytes.
However, if you want to use JSX you have to use babel, otherwise, you can use Reacts JS Syntax.
Here is a link to an example:
https://github.com/mhart/react-server-example

implementing site wide progress indicators

I have a website running on the MEAN Stack (mongo, express, angular, node) and I am using jade as the templating engine for serving partial files.
Now, I already tried ngProgres but according to the API it can be used along with the $http services or file uploads only as only there my javascript function is waiting for response and during that time I can use ngProgress but how do i show progress indicator while the partial template files are being retrieved?
If you would like all the loading mechanism to happen automatically, have a look at this project:
Angular Loading Bar
An automatic loading bar using angular interceptors. It works automatically,
so simply include it as a dependency and it will automatically display
the progress of your $http requests.
For non-angular apps, see: PACE
an Automatic page load progress bar
Hope this helps.

Resources