I want to implement Live Reloading which will try to watch for changes in the front end page UI files and then automatically recompile the Sass and ES6 JS to raw CSS and browser compatible ES5 JS and also refresh the page.
This will allow us to see the changes we make instantly in the browser without having to kill the server and stand it up again.
Is there any configuration to enable this?
You should be able to get this functionality with Webpack Hot Module Replacement.
This is a seed project for React.
Related
I have a React app that is deployed in amazon aws. Whenever i update the code, i need to force hard reload manually on the client side(on Chrome ctrl+f5).
Is there a way to not have to do this manually in React?
I've noticed some posts about setting a query string param with a versioning system, and many solutions for angular CLI, but nothing on React.
Is there i flag i can pass in the build of the code?
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 am working on angularjs 1.5 and i want to reload css stylesheet without hard refresh because currently it's creating caching so without hard refresh it's not possible to see changes most of changes are dynamic in css file that's why i need to reload is there any way in angularjs ?
If your browser cache is the problem you can try one of the following things:
If you are developing on chrome, you can open dev tools and under the network section, you can disable browser cache. Everytime you reload now will fetch all resources fresh.
You can fingerprint your CSS by appending a hash or a version number to your filename at the build step. Ex: http://example.com/path/to/style-v01.css
You can make the link tag which includes the css to use a randomized query parameter which ensures the cache does not kick in. Ex: http://example.com/path/to/style.css?v=1.0
Ideally, in a production environment, your files are fingerprinted to avoid this problem.
Is there any way with AngularJS to force a page to refresh after it has been changed. What I mean by this is that I have multiple users actively working in the app but a change is required to the controller.js file. At this point the only way I'm aware of is for them to manually push refresh on the browser. Is there any code that I can use to make it "actively" watch that file for changes and reload when necessary without the users having to manually push refresh?
This isn't really an angular problem. You can do polling on the client side with setInterval, hitting the file on the server to trigger a refresh on the client.
If you're looking for something to speed up development, then you're probably looking for hot module loading. The solution depends on what version of angular and build tool you're using (e.g. grunt/webpack/npm).
Check out this article for angular 2, but you can find similar solutions for angular 1:
http://blog.mgechev.com/2015/10/26/angular2-hot-loader-hot-loading-tooling/
But if you just want to force a page refresh from the client side, you would just call: $window.location.reload()
I inherited an app that uses backbone.js and require.js. I wanted to cache CSS, Images and JS files on the browser for infinite time and did not want to cache HTML. So, when I have any changes to the CSS or JS or images I can update the query parameter in the HTML and the browser would fetch the latest version of the asset.
Our app is on Glassfish 3.1.2 so I could not use mod_headers like in Apache to control the behavior. What I ended up doing was add a filter and add Cache-control response header to all css, js and images. This works for css and images fine but all those models and collections that are a result of using backbone.js are not being updated. Well, I could not figure out how to erase them from the cache if I have an updated version on the server.
Any pointers on this issue would help me figure this out.
Thanks.
You should use bust ( look here ), so when you have a new version, just update it's version in bust, something like this in production.
urlArgs: "bust=" + v2
and all older js stuff will be fetched again.
Cheers !