[web] Allows live reloading during development#419
Merged
Conversation
dgdavid
force-pushed
the
hot-reloading
branch
from
67ea833 to
d662730
Compare
To allow HMR connecting to the development websocket
dgdavid
force-pushed
the
hot-reloading
branch
from
d662730 to
89ecfca
Compare
dgdavid
commented
Feb 9, 2023
Comment on lines
+20
to
+27
| While working on the code, you might want to run the [webpack-dev-server](https://github.com/webpack/webpack-dev-server) to get the [Hot Module Replacement](https://webpack.js.org/concepts/hot-module-replacement/) enabled. | ||
|
|
||
| ``` | ||
| npm run server | ||
| ``` | ||
|
|
||
| Or simply run the Webpack watcher for refreshing the build every time you save a change **BUT** reloading | ||
| the code in your browser by yourself. |
Contributor
Author
There was a problem hiding this comment.
Please, help me to improve this text by using the "Add suggestion" Github's feature.
dgdavid
changed the title
To avoid problems/complains in "test" mode.
NODE_ENV is never "development" ¯\_(ツ)_/¯
imobachgs
approved these changes
Feb 10, 2023
Merged
bmwiedemann
pushed a commit
to bmwiedemann/openSUSE
that referenced
this pull request
Feb 16, 2023
https://build.opensuse.org/request/show/1066106 by user IGonzalezSosa + dimstar_suse - Version 0.7 - Do not use a proxy to get the errors lists (gh#agama-project/agama#424). - Add live reloading feature for easing the front-end development process (gh#agama-project/agama#419). - Fix storage section crashing when proposal is not ready (gh#agama-project/agama#418). - Better handling of software repositories (gh#agama-project/agama#414): * Report issues when reading the software repositories. * Inform the user about the software proposal progress. * Add a button to reload the repositories (gh#agama-project/agama#388). - Added a button for displaying the YaST logs (related to gh#agama-project/agama#379) - UI fixes (gh#agama-project/agama#401): * Add a fallback height for the layout * Fix some miss-alignments * Add missing icon * Ensure tooling serving and loading fo
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
Sometimes it's a PITA to have to refresh manually the browser while working in the front end. For example, when you're doing changes in a popup: save the file, goes to the browser, click refresh, open the popup again.
Solution
To configure webpack for allowing the hot reloading
Testing
Tested manually by @dgdavid and @imobachgs
TODO:
In this PR:
In the future:
Allow the live reloading in an external device too. To do that, we could
Use the server IP in the
websocketURL.Transform the
manifest.jsonfile for adding the ip in the "content-security-policy"Make needed configuration for allowing
wsssince seems that browsers does not allow connecting to an unsecure websocket from a secure connection, which makes sense.