What is the reason why live server cannot be used in React application?

Question

I know it's not possible to serve a React application using a live server. In other words, even if the js is bundled and linked to the HTML file, the React code will not render if you open the file statically.

I learned about static and dynamic servers, but since React all happens on the client, I can't understand why serving the app using webpack, vite, or even a simple express server would work, but not via a live server , also cannot be opened and worked manually.

What’s the difference?

Answer 1

The difference is how the JavaScript code is executed in the browser. When you serve a React application through a webpack development server, express server, or any other type of server, the JavaScript code is executed in the context of the web page, with access to the DOM and all of the Web API. However, when you open an HTML file statically, the JavaScript code is executed in an

isolated environment

, and access to the Web API is limited. This is why React code that relies on DOM and Web API doesn't work when opened manually.

Webpack

, vite and express provide a dynamic environment with all the necessary APIs and services required for React to run. This is done by serving the application as a web page over HTTP, which is then loaded and executed by the browser.