Vaadin Hilla Reload in Visual Studio Code

Hilla
1

I’m trying to setup vaadin flow and hilla working in visual studio code. The flow changes are appearing on browser after change, however when I edit hilla views changes don’t appear until I reload the page. Is this standard or am I missing the way to enable reloads after I save my .tsx view? I’ve tried adding) vaadin.frontend.hotdeploy to my application properties.

2

Hot reload is supposed to automatically work for both Flow and Hilla changes if you use the default project configuration that we ship through e.g start.vaadin.com or the CLI.

One thing you could check is if there are any errors in the browser console. Certain types of client-side errors are known to break HMR.

3

I’ve downloaded through start.vaadin.com and or npm init vaadin. However, only the file @layout.tsx is instantly rendering the changes on my chrome browser. When I edit views I don’t see changes until I refresh the page. Attached below is my warnings in browser if that may be of any help.
consoleLog

4

For more context, this is my inspect network log.

web-network
web-network1017×513 24 KB

5

It’s supposed to work and I just tested that everything works as expected on my machine. These are the exact steps that I tested:

  1. Go to start.vaadin.com
  2. Click the “Edit” button for the “Hello World Project” section on the bottom of the page
  3. Change “Framework” to “Hilla / React”
  4. Download and unzip
  5. Import the project into VS Code and click the “Yes, I trust the authors” button
  6. Open Application.java and click the “Run” button next to the main method.
  7. Wait until all dependencies are installed so that the main view is shown in the automatically opened browser window
  8. Open @index.tsx and change the label of the text field to “My name” and save the file
  9. Immediately when I save that, the view in the browser is updated to show the new label text

If this doesn’t work for you, then there’s probably something different with your environment but it’s difficult to say what. Some ideas to look into:

  • Try using a different editor. You can run the project without any IDE with the mvn command from the command line and you can edit .tsx files with any “dumb” text editor like Notepad.
  • Look for errors in the server-side log (that’s the Terminal view in VS Code if you run it in the same way that I did) in addition to the client-side console that you already checked.
  • Check if you have any special characters in the project location (including parent directories). If there’s anything beyond ASCII letters, then try moving the project to a simpler location.