I've recently taken a break from coding and I'm getting back into it, focusing on HTML and CSS to create various styled elements for personal projects. One is to design an eye-catching email signature, and another is to make custom HTML/CSS elements for use in Joplin.
While I can build everything from scratch, I'm curious about the best way to implement "live reloading" in VSCode so I can see real-time changes as I edit. I've been trying Vite (`yarn create vite`), but I feel it might be too complex for my needs since I'm not interested in frameworks like React. Should I stick to building everything from the ground up, or can I use a simpler framework or tool to expedite my workflow? Any recommendations would be appreciated!
7 Answers
Astro could be another good option for you since it helps structure your code as components while ultimately giving you plain HTML/CSS. It also uses Vite for live reloading. If you feel Vite is too heavy, you could just keep it basic with HTML and CSS in a simple setup.
For a super straightforward solution, just use the Live Server extension in VSCode. It's quick and easy to see your changes as they happen without any heavy frameworks involved.
You're on the right track with Vite! If you want to avoid any JavaScript frameworks, just select the vanilla JS option when setting it up. It provides a great dev server with live reload, which is exactly what you need!
Honestly, you can just use plain HTML files. For a quick setup, add the Emmet plugin for boilerplate coding, and preview your files directly in a browser. It keeps things simple and straightforward!
Seriously, just open your HTML file in a browser. That's the easiest way to see your work.
Check out 11ty (Eleventy) as a static site generator. It's perfect for simple projects, and you could host it on Netlify for free. Just make sure to use SCSS if you want to spice up your styles a bit!
You could also consider using Svelte for this! It allows you to write HTML and CSS while providing hot reload functionality. Plus, it's a lot of fun to work with!
You might want to check out the "Live Server" extension for VSCode. It's super handy, as it allows you to open your HTML file in a browser with hot reloading. Just right-click the file you want to view and select "Open with Live Server" to see your changes instantly!
Best response! The Live Server extension worked perfectly for my simple HTML/CSS setup.
I tried it too, and it was really smooth for viewing my basic site.
Totally agree! Astro is lightweight and lets you avoid JavaScript if you don’t want it.