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.
Related
I am new to MERN stack and creating one application, and trying to understand few things, my MERN application is having many packages which in-turn is nothing but JavaScript files. So my questions are
Does any of the JavaScript files from package folder (i.e. node_modules) gets transferred to from server to browser
If Yes, then what is the trigger point of transferring any JavaScript file from server at node_module to the browser.
My MERN application is having many React component, which is nothing but a JavaScript files. So which JavaScript file gets transferred from server to the browser
Trying to answer to the best of my ability here:
As far as my knowledge goes, JavaScript is powerful enough to be used for building a full stack application, complete with front end, back end, and middleware.
Node Modules folder is needed to run the application locally, i.e., when using 'npm start'. I'm guessing this is where the server to browser transfer occurs.
React is a component-building library. It's used to create reusable components which get displayed in the browser.
I have an app written in reactjs running on firebase which is completely rendered on client side. The problem is Search engines and SEO.
App's pages are dynamically rendered based on variables in url path.
I am thinking to enable SSR - according to some articles I need to use express server or nextjs server. Also thinking that some data can be loaded from external api before server rendering and some data can be loaded on client side. Is this possible?
Is this good approach? How would you solve this problem without using third party components such as prerender.io?
App was created by using npx create-react-app my-app
Thanks for advices.
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.
Till now I worked on Java based web applications and recently started working on ReactJS applications. Below questions are running in my mind and I appreciate your help in providing solutions for below questions:
I came to know that Babel is going to convert the ECMAScript2015+ code and the JSX code to ECMAScript2015 so that the browser will understand it. So does this translation will happen when we compile the React project using "npm"? And if it happens during the compilation, does the Babel will convert the entire code in the whole project at a time (or) will Babel converts the file which is requested by the client?
Once after creating and developing the React code, we are using Node software to install all the required dependent libraries which are used in our React code and also "npm start" command to start the react application. So here I want to know if NodeJS is the server which runs the React applications and without NodeJS we cannot run React application as a standalone?
When we take Java based web application, that Java application will be running in a server computer and Jboss or Websphere Application Server etc... are responsible of running the Java web application EAR project. Then when a client makes a request to any resource in the EAR, then the server will take the request and send the response as an HTML to the client.
In the same way I want to know how this request response cycle works in React Application? For example, if the react application is running in a server computer and NodeJS has started the React Application in the sever computer, then when the client invokes the React application using the URL corresponding to the React Project, then what the server is going to send back to the client/browser? As Babel will convert the React application to the plain JavaScript (which is understandable to the Browser) and so does the server will be returning the Javascript back to the client?
If the server returns the Javascript code to the client/browser, will the server returns back the Javascript code of the entire React project (all files) to the client or will the server returns the Javascript version of ONLY the request file?
React is a front-end library, which runs in the browser. Like any other frontend library (jQuery, etc), it is happy to be served by any old webserver – Apache, NGINX.
The react application will communicate with the backend in the form of REST API calls, which will only produce the dynamic data rather than the HTML.
The HTML is drawn using the JSX on the frontend (https://reactjs.org/docs/introducing-jsx.html)
The compilation happens every time you start your project (say npm start) or, if the project is already running, on any saved changes, it will recomplile every time as well as give you any errors found during compilation.
Yes, the NodeJS will be the one serving content. Technically, you can still use React as standalone. See This tidbit in official ReactJS Documentation
I'm not really great with technicalities behind React inner workings, so anyone competent feel free to correct me on this, but your server will serve JavaScript code to your browser already working and compiled fully so that even if the React server stops running (terminated or any other reason), you will still be able to work with most of the application since the data has been already loaded. There may be libraries/packages that allow lazy loading of components, but that depends on your usecase, I guess.
See my final bits in the previous point.
Hope this helped you in some way
I am using webpack to bundle a react app in a js file which I want add to client site. So I end up with a app.js and I can provide a url for where the file is hosted to clients https://example.mysite.com/apps/app.js and this can be included via a script tag on client site. Simple enough.
The issue I might run into here is browser side caching. I can't use version tags here because asking a client to continuously update code on their site is not a realistic expectation.
Webpack hashing is also not an option because this would mean updating the file on the client side, which again is something I would like to work around.
Is there a way to prevent my app.js file from being cached and fetching a new version of the file every time the app.js file has changed?