Upload React JS app front-end only - reactjs

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.

Related

Serve a React app from a different domain

I am currently working on a legacy app, and we are starting to migrate some pages to a new React app.
Because of various reasons, we have to split the legacy app and the new React in two different domains.
The React app is embed in my legacy domain. It looks like this:
The customer goes to legacy.mydomain.com
The app loads the React in a part of its page from react.mydomain.com
The React is rendered correctly
My current problem here is regarding assets, not the ones in the public folder, but the one compiled with my app.
Currently, react-scripts build generates those files and the HTML with a relative path (src="/my-image-rtybghb.png" for example), but I would like to force, during the build, the absolute path of the image so it is handled by the React domain and not the legacy one (I want to get src="react.mydomain.com/my-image-rtybghb.png).
I could not find anything regarding this in the React documentation, and I'm asking myself if I would need to configure something with React App Rewired

Using config map in React JS project deployed on kubernetes

I building a react application and deploying it on Kubernetes. On page load i have to show certain elements and i want them to be configurable. I am driving them from json file.
I want to keep that json on config map and whenever i want to make change. Updating config map should be sufficient.
My react application is not server side application, hence not sure for approach. Is it possible to keep some file in project and then later replace it with config using docker or something.

How do I prevent browser caching of webpack bundle?

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?

Admin-on-rest (React) - How to handle browser caching of JS files

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..

deploying basic angularjs app

What do you need to deploy a simple AngularJS app on a server? I have never done any kind of deployment before.
The app is really basic and contains a few html files and one js file which contains the module, config, controller and a few variables. I run the app locally using brackets
What do I need to deploy this app on a server and how do I achieve that?
You should be able to just upload the files to the server...
There are hundreds of articles about deploying an AngularJS application (with minifying, uglifying, etc.) but it sounds like you just want to get your application to a publicly accessible place, so you should be fine to just upload the files.

Resources