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.
Related
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?
When creating an app with create-react-app,there is only one index.html,does that means React can only handle one SPA at a time? What if I want to develop multiple pages? Should I create another SPA with create-react-app and then put them together after building each of them?
Update:
Parceljs can do that. here is docs.
You can use Parcel instead of Webpack (which being used in create-react-app) and it provide you zero config environment to develop web apps (using react or anything else).
Having multiple pages (instead of SPA) is not what most React environments had in mind [before - see update above].
You can have different page URL's using react-router or similar client side routing solutions.
If the concern is bundle size, there are solutions using webpack or parcel to lazy load each bundle whenever they needed or cache bundle (using service workers) and so on (Tree shaking, ...). (check Code Splitting in React Docs)
Other concern I might have in my brain is SEO, in this case you may find Isomorphic app (react server side rendering) useful which initialize first view of requested URL HTML and sends it to client, then client will load react and react will take control of UI. This will help Google (or other search engines) find your URLs fast and user experience in transitions between pages will remain seamless.
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.
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.
I'm using create-react-app in my latest project and it's great! Now I'm facing one issue that I'm not sure how to solve properly.
I've created app using redux for my state managment, and that all is working well.
Now I don't have much experiance with server side renderin in React, but for my next feature I'll need to take one of the existing / working react components (that are connected to redux store) and render it on server that comes with create-react-app. The reason why I wanna do this is to be able to use some libs like pdf generators and simillar to be able to print out some of them (also some other stuff but that's the basic).
First thing I'm confused with, since I don't want to render everyting on server, what's the best / correct way (for development) to run webpack-dev server and node server that will do all those taks I mentioned above in parallel instead of just changing it's default port to let's say 8000, and run it manually?
Secound, should I be able to just use ReactDOMServer.renderToString on that existing component on server or there is something else that will complicate stuff (I know I'll need to add babel on server definitaly)?
Create React App does not support server rendering. You might want to migrate to Next.js which does.
Unfortunately, Create React App (CRA) doesn't have extensibility points to allow this. But there is a slightly altered version of CRA that allows compiling, testing and running both client-side and server-side code using regular CRA pipeline - npm start will compile and launch both cient-side and server-side portions of your app, using a single instance of Webpack, on the same HTTP port.
You can find more info by visiting React App SDK.