Siirry pääsisältöön

Frontend watch

Avaa ChatGPT:ssä

Frontend-watch rakentaa src/main/frontend -lähteet, kun sovellus toimii ja päivittää selainta, joten frontend-muutokset näkyvät ilman manuaalista rakennusta tai palvelimen uudelleenkäynnistystä. Se on kehityspuoli frontend-bundlerista.

Ajaminen watch

Aja se rinnakkain palvelimesi kanssa, tavoitteena ennen sitä, joka käynnistää sovelluksen. Spring-projekti asettaa tämän oletustavoitteeksi, joten mvn ilman argumentteja käynnistää molemmat:

mvn compile webforj:watch spring-boot:run

Maven Jetty pluginin kanssa, käynnistä se samalla tavalla:

mvn compile webforj:watch jetty:run

Watchina rakennusvaiheena, katso Rakennus ja testit.

Mitä tapahtuu muutoksessa

Kun tallennat lähteen, watch rakentelee uudelleen ja lähettää muuttuneet tiedostot selaimeen. Se, mitä selain tekee, riippuu ulostulosta, ei muokatusta lähteestä:

  • Tyylitiedosto korjataan paikallaan, ilman latausta, joten lomaketiedot ja vierityksen sijainti pysyvät. Täällä päätyy .css, .scss, .sass tai .less muutos.
  • Kuva vaihdetaan paikallaan, ilman latausta.
  • Mikä tahansa muu latautuu uudelleen. Täällä päätyy .ts, .tsx tai .js muutos, koska uusi käyttäytyminen tarvitsee tuoreen sivun.

Jos uudelleenrakennus koskee useita tiedostoja ja kaikki voidaan korjata paikallaan, selain pysyy paikallaan. Jos edes yksi ei voi, se lataa uudelleen, joten et koskaan näe muutosta puolivälissä.

Palvelimen uudelleenkäynnistyksen yhteydessä

Java-muutos käynnistää palvelimen uudelleen Spring DevTools, Maven Jetty pluginin tai JRebelin kautta. Watch pitää frontendin samalla tasolla sen kanssa:

  • Tyylisi pysyvät mukana uudelleenkäynnistämisen aikana, sen sijaan, että vilkkuvat ilman tyyliä.
  • Sivu latautuu, kun sovellus on valmis, ei ennen, joten et kohtaa virhettä liian aikaisesta lataamisesta. Pieni indikaattori näkyy, kun palvelin käynnistyy uudelleen; manuaalinen lataus ei näytä mitään.
  • @BundleEntry:n lisääminen tai poistaminen tulee voimaan seuraavassa uudelleenkäynnistyksessä.

Konfiguraatio

Live-reload on webforJ-asetus, joten se koskee mitä tahansa palvelinta, jota käytät. Spring-sovellus lukee nämä avaimet application.properties-tiedostosta; itsenäinen palvelin, kuten Maven Jetty plugin, lukee samat avaimet webforj.conf-tiedostosta.

application.properties
# Päivitä selain muutoksessa
webforj.devtools.livereload.enabled=true

# Korjaa tyylitiedostot ja kuvat paikallaan lataamisen sijasta (oletus: true)
webforj.devtools.livereload.static-resources-enabled=true

# Portti ja polku, johon selain muodostaa yhteyden (oletukset: 35730, /webforj-devtools-ws)
webforj.devtools.livereload.websocket-port=35730
webforj.devtools.livereload.websocket-path=/webforj-devtools-ws

# Sydämenlyöntiväli millisekunteina (oletus: 30000)
webforj.devtools.livereload.heartbeat-interval=30000