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?
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 am using a symlink to a file with a custom extension that acts like a ressource file. The file is used by a proxy API that my React application (made with CRA) uses, so I would like to refresh the app when the file changes so requests can be remade. All I want is to avoid the necessessity of having to manually refresh the browser...
Is there any way this can be done ?
Using react-app and webpack, I was wondering if it's possible to bundle a config.json file such that you can access it after the site builds and be able to change values within it and have that be reflected on the website. This is mainly so that I can have values in my config.json file like "header__1" or "about__description" in my config.json file and hand them over to my clients so that they may change values themselves w/o having to consult me.
Welcome to stackoverflow Shaun,
since you're writing a web application with react and it is all about Javascript, you can't work with files like you can with desktop clients. Neither should you (read more here).
If you want your web clients to be modifiable by the customer you should add something like a config page to your app. The values that change should then be stored in the localStorage of the browser or something similar.
EDIT: Of cause a config file could be loaded from an external source. But then you have to differ between users and their individual configurations (which might be not what you want). Files bundled with webpack can't be edited (permanently) on the users side.
I have recently put an admin-on-rest app into production and it works great. However, when I update the app, the updated files within my project src directory are cached. For example I made a change to the restClient.js file, but this only gets loaded after users do a CTRL+F5 in the app.
What is the recommended way to handle this? Can I somehow add a cachebust to the files? Or should I simply set expires in the index.html file head section?
Ps. this questions is maybe more related to React apps in general then admin-on-rest..
I have created a succesfully working React JS / Redux application on localhost. Now it is time to upload my app. The application is basicly a logger and a complicated line of calculations which runs on front-end. There are no saved datas, once the user refresh the browser the app re-starts. The app relies on several libs as boostrap in react, Redux, Modal, DOM to image saver etc.
How does one migrate such an application for web? Would You upload like a classical static HTML site + the compiled script? Or does the entire file structure must be uploaded to the hosting provider.
Thanks,
Koppany
There are multiple ways of uploading/hosting such an app.
Use webpack and bundle all your code. You will get two output files
index.html
app.js
You can then upload them to services like surge
[Note:-] More files can be generated depending upon your webpack configurations. But the basic idea is the same. Upload them all to the hosting service (like surge).
You can upload your code to codepen. You can then specify external dependencies in codepen and so codepen will take care of it.