I was doing a Vite demo last week, I changed some markup, and visited the local web server. The markup changed, but the state persisted. What?! This is Vite’s Hot Module Replacement API. The Vite React application server logged this when I saved my file: 9:32:15 AM [vite] (client) hmr update /src/App.tsx “hmr” is Hot Module Replacement. With it, we get “precise updates without reloading the page or blowing away application state.” So cool! ...
New Vite TypeScript/React apps create themselves like this: createRoot(document.getElementById('root')!).render(<App />); What’s going on with that !? The ! is TypeScript is the non-null assertion operator. It’s a way of saying to our TypeScript compiler: “I know that this is not null; don’t check it.” Without it, you’ll see this on apps that have been converted to TypeScript, checking for root before loading the app. const root = document.getElementById('root'); if (!root) { throw new Error('Root element not found'); } createRoot(root).render(<App />); Type safety is great, here we control both index.html and this bootstrap code, so we know the element exists. If someone removed it, the application couldn’t start. The non-null assertion operator states this explicitly. ...
Vite’s default port, 5173, is leet code for the project’s name: 5 = “V” (Roman numerals 😉) 1 = “I” 7 = “T” 3 = “E” It also happens to be a different number from any project I’ve worked on, so that’s a DX win, too. Vite pull request