Seeking faster ways to open the frontend

[chengr4]

Hi,
Every time I want to add a new component in the frontend and see the updates in the website, the only method I know now is:

1. Add new components
2. Manually run npm run build
3. Manually run cargo build --bin site --release
4. and Run the service
   which is lengthy and crazy.

I wonder if there's a way to quickly open just the frontend. Typically, we'd have something like npm run dev for this. But I did not see any here 🫠

[Kobzol]

Hi, this workflow is designed for performing a production build, not local development.

Run npm run watch, and build the site binary in debug mode (without --release). Then the frontend will be automatically rebuilt after any change, and the website will automatically reload the JS/CSS files from disk (you might want to disable browser cache in developer settings or perform force reloads though, the website is quite aggressive with caching).

It's described here, but the information about using cargo build without --release is not mentioned there. It would be nice to add it there.

[chengr4]

@Kobzol
I tested in two ways:

1. Run cargo run --bin site in one terminal and use npm run build in another
   => which works as you said.
   every time I updated frontend and reloaded the website. I could see the new update.
   But I still needed run the build again and again.
2. However, by running cargo run --bin site and using npm run watch
   => it does not work.

I also tested without --no-hmr and also not work

Could you please help me check these two scenarios on your local machine when you have time?

And then let's see what to update in the README.

FYI, I will temporarily use scenario one to develop

[Kobzol]

I use cargo run + npm run watch all the time when working on the web. What exactly didn't work?

[chengr4]

my case: cargo run + npm run watch

E.g.

1. I changed a text in header.vue
2. parcel recompiled
3. the files in dist was truly updated
4. But after I refreshed the page, it showed the original text as usually
5. I checked the fetched file and it was the same original text

I have turned the checkbox of disable cache in Network section in dev tool

[Zentrik]

Maybe the compressed version of the file was served but not updated by parcel, though I don't see why that would have occured unless you altered the compression settings. Either way, try deleting all the auto-generated files.

[chengr4]

I removed whole project and restarted everything and it worked. Very interesting.
Thank you both for helping me solve the problem 🙏.

I will update README for local usage.