{"id":2924,"date":"2026-02-05T04:30:57","date_gmt":"2026-02-05T04:30:57","guid":{"rendered":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/?p=2924"},"modified":"2026-02-05T05:28:42","modified_gmt":"2026-02-05T05:28:42","slug":"dev-server","status":"publish","type":"post","link":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/kivicare-lite\/documentation\/developer-tool\/development-workflow\/dev-server\/","title":{"rendered":"Development Server"},"content":{"rendered":"<div class=\"nolwrap\">\n<p>This guide explains how to use the <strong>Vite Development Server<\/strong> with <strong>Hot Module Replacement (HMR)<\/strong> for fast, real-time development.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Starting the Development Server<\/strong><\/h2>\n\n\n\n<p>Run:<\/p>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">npm run dev\n<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                            <span class=\"line-number\">2<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<p><strong>Expected output:<\/strong><\/p>\n\n\n    <div class=\"docsy-alert-block alert-success\">\n                    <div class=\"alert-icon\">\n                <i class=\"ph-fill ph-check-circle\"><\/i>\n            <\/div>\n                <div class=\"alert-content\">\n            VITE v7.0.0 ready in 234 ms<br>\u279c Local: http:\/\/localhost:8080\/<br>\u279c Network: use &#8211;host to expose<br>\u279c press h to show help        <\/div>\n    <\/div>\n    \n\n\n<p>Keep this terminal running while you develop.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What is HMR?<\/strong><\/h2>\n\n\n\n<p><strong>Hot Module Replacement (HMR)<\/strong> updates your application in the browser <strong>without reloading the page<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Benefits<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Instant UI updates<\/li>\n\n\n\n<li>Application state is preserved<\/li>\n\n\n\n<li>Faster development cycle<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How HMR Works<\/strong><\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>You edit a React or CSS file<\/li>\n\n\n\n<li>You save the file<\/li>\n\n\n\n<li>Vite detects the change<\/li>\n\n\n\n<li>The update is sent to the browser via WebSocket<\/li>\n\n\n\n<li>React replaces the updated module without refreshing the page<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Typical Development Workflow<\/strong><\/h2>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>1. Start the Server<\/strong><\/h5>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">cd \/path\/to\/kivicare-clinic-management-system\nnpm run dev\n<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                            <span class=\"line-number\">2<\/span>\n                                            <span class=\"line-number\">3<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<h5 class=\"wp-block-heading\"><strong>2. Open Your Site<\/strong><\/h5>\n\n\n\n<p>Visit your WordPress dashboard page where KiviCare loads:<\/p>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">http:\/\/your-site.local\/kivicare-dashboard\n<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                            <span class=\"line-number\">2<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<h5 class=\"wp-block-heading\"><strong>3. Open Browser DevTools<\/strong><\/h5>\n\n\n\n<p>Press <code>F12<\/code> or <code>Ctrl + Shift + I<\/code>.<\/p>\n\n\n\n<p>Verify:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Console shows Vite connection logs<\/li>\n\n\n\n<li>Network tab shows files loading from <strong>localhost:8080<\/strong><\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>4. Edit a File<\/strong><\/h5>\n\n\n\n<p>Example<\/p>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">export const Dashboard = () =&gt; {\n  return &lt;h1&gt;My Custom Dashboard&lt;\/h1&gt;;\n};\n<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                            <span class=\"line-number\">2<\/span>\n                                            <span class=\"line-number\">3<\/span>\n                                            <span class=\"line-number\">4<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<p>Save \u2192 the browser updates instantly.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Dev Server Configuration<\/strong><\/h2>\n\n\n\n<p>Located in <code>vite.config.js<\/code>:<\/p>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">export default {\n  server: {\n    host: &#039;localhost&#039;,\n    port: 8080,\n    cors: true,\n    hmr: {\n      protocol: &#039;ws&#039;,\n      host: &#039;localhost&#039;,\n    }\n  }\n}\n<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                            <span class=\"line-number\">2<\/span>\n                                            <span class=\"line-number\">3<\/span>\n                                            <span class=\"line-number\">4<\/span>\n                                            <span class=\"line-number\">5<\/span>\n                                            <span class=\"line-number\">6<\/span>\n                                            <span class=\"line-number\">7<\/span>\n                                            <span class=\"line-number\">8<\/span>\n                                            <span class=\"line-number\">9<\/span>\n                                            <span class=\"line-number\">10<\/span>\n                                            <span class=\"line-number\">11<\/span>\n                                            <span class=\"line-number\">12<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<h5 class=\"wp-block-heading\"><strong>Change the Port<\/strong><\/h5>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">server: { port: 3000 }\n<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                            <span class=\"line-number\">2<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<h5 class=\"wp-block-heading\"><strong>Enable Network Access<\/strong><\/h5>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">server: {\n  host: &#039;0.0.0.0&#039;,\n  port: 8080,\n}\n<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                            <span class=\"line-number\">2<\/span>\n                                            <span class=\"line-number\">3<\/span>\n                                            <span class=\"line-number\">4<\/span>\n                                            <span class=\"line-number\">5<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<h5 class=\"wp-block-heading\"><strong>Access from other devices:<\/strong><\/h5>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">http:\/\/YOUR-IP:8080\n<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                            <span class=\"line-number\">2<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What Happens in Dev Mode<\/strong><\/h2>\n\n\n    <div class=\"docsy-alert-block alert-success\">\n                    <div class=\"alert-icon\">\n                <i class=\"ph-fill ph-check-circle\"><\/i>\n            <\/div>\n                <div class=\"alert-content\">\n            Browser \u2192 Vite Dev Server \u2192 Live compilation \u2192 Unminified code + source maps        <\/div>\n    <\/div>\n    \n\n\n<h5 class=\"wp-block-heading\"><strong>Advantages<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Instant updates<\/li>\n\n\n\n<li>Easier debugging<\/li>\n\n\n\n<li>Clear error output<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Limitations<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Slower load times<\/li>\n\n\n\n<li>Larger files<\/li>\n\n\n\n<li>Not for production use<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Stopping the Server<\/strong><\/h2>\n\n\n\n<p>Press:<\/p>\n\n\n    <div class=\"docsy-alert-block alert-info\">\n                    <div class=\"alert-icon\">\n                <i class=\"ph-fill ph-info\"><\/i>\n            <\/div>\n                <div class=\"alert-content\">\n            Ctrl + C        <\/div>\n    <\/div>\n    \n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Troubleshooting<\/strong><\/h2>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Port Already in Use<\/strong><\/h5>\n\n\n    <div class=\"docsy-alert-block alert-warning\">\n                    <div class=\"alert-icon\">\n                <i class=\"ph-fill ph-warning\"><\/i>\n            <\/div>\n                <div class=\"alert-content\">\n            Error: EADDRINUSE        <\/div>\n    <\/div>\n    \n\n\n<p>Fix:<\/p>\n\n\n    <div class=\"docsy-alert-block alert-info\">\n                    <div class=\"alert-icon\">\n                <i class=\"ph-fill ph-info\"><\/i>\n            <\/div>\n                <div class=\"alert-content\">\n            npx kill-port 8080        <\/div>\n    <\/div>\n    \n\n\n<p>or change the port in <code>vite.config.js<\/code>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>HMR Not Updating<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Restart the dev server<\/li>\n\n\n\n<li>Hard refresh the browser<\/li>\n\n\n\n<li>Check WebSocket connection (DevTools \u2192 Network \u2192 WS)<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Changes Not Appearing<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Confirm the dev server is running<\/li>\n\n\n\n<li>Verify the correct file path<\/li>\n\n\n\n<li>Check the terminal and console for syntax errors<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>White Screen<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Run <code>npm install<\/code><\/li>\n\n\n\n<li>Fix build errors<\/li>\n\n\n\n<li>Ensure plugin is active<\/li>\n\n\n\n<li>Confirm <code>window.kc_frontend<\/code> exists<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Best Practices<\/strong><\/h2>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Do<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Keep the dev server running<\/li>\n\n\n\n<li>Monitor terminal output<\/li>\n\n\n\n<li>Use DevTools for debugging<\/li>\n\n\n\n<li>Save often<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Don\u2019t<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use dev mode in production<\/li>\n\n\n\n<li>Run multiple dev servers on the same port<\/li>\n\n\n\n<li>Ignore errors<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Dev vs Production<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Feature<\/th><th>Dev Server<\/th><th>Production<\/th><\/tr><\/thead><tbody><tr><td>HMR<\/td><td>\u2705<\/td><td>\u274c<\/td><\/tr><tr><td>Source Maps<\/td><td>\u2705<\/td><td>Optional<\/td><\/tr><tr><td>File Size<\/td><td>Large<\/td><td>Optimized<\/td><\/tr><tr><td>Performance<\/td><td>Slower<\/td><td>Faster<\/td><\/tr><tr><td>Use Case<\/td><td>Development<\/td><td>Deployment<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Terminal Shortcuts<\/strong><\/h2>\n\n\n\n<p>Press <code>h<\/code> while the server runs:<\/p>\n\n\n    <div class=\"docsy-alert-block alert-info\">\n                    <div class=\"alert-icon\">\n                <i class=\"ph-fill ph-info\"><\/i>\n            <\/div>\n                <div class=\"alert-content\">\n            r \u2192 restart server<br>o \u2192 open browser<br>u \u2192 show URL<br>c \u2192 clear console<br>q \u2192 quit        <\/div>\n    <\/div>\n    \n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Advanced: Proxy Example<\/strong><\/h2>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">export default {\n  server: {\n    proxy: {\n      &#039;\/api&#039;: {\n        target: &#039;http:\/\/localhost:3000&#039;,\n        changeOrigin: true,\n      }\n    }\n  }\n}\n<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                            <span class=\"line-number\">2<\/span>\n                                            <span class=\"line-number\">3<\/span>\n                                            <span class=\"line-number\">4<\/span>\n                                            <span class=\"line-number\">5<\/span>\n                                            <span class=\"line-number\">6<\/span>\n                                            <span class=\"line-number\">7<\/span>\n                                            <span class=\"line-number\">8<\/span>\n                                            <span class=\"line-number\">9<\/span>\n                                            <span class=\"line-number\">10<\/span>\n                                            <span class=\"line-number\">11<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Quick Reference<\/strong><\/h2>\n\n\n\n<p><strong>Start:<\/strong><\/p>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">npm run dev\n<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                            <span class=\"line-number\">2<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<p><strong>Stop:<\/strong><\/p>\n\n\n    <div class=\"docsy-alert-block alert-info\">\n                    <div class=\"alert-icon\">\n                <i class=\"ph-fill ph-info\"><\/i>\n            <\/div>\n                <div class=\"alert-content\">\n            Ctrl + C        <\/div>\n    <\/div>\n    \n\n\n<p><strong>Kill port:<\/strong><\/p>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">npx kill-port 8080\n<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                            <span class=\"line-number\">2<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<p>Next \u2192 <strong>Building for Production<\/strong><br><br><\/p>\n\n\n\n<p><\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>This guide explains how to use the Vite Development Server with Hot Module Replacement (HMR) for fast, real-time development. Starting the Development Server Run: Expected output: Keep this terminal running while you develop. What is HMR? Hot Module Replacement (HMR) updates your application in the browser without reloading the page. Benefits How HMR Works Typical [&hellip;]<\/p>\n","protected":false},"author":12,"featured_media":0,"parent":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[82],"tags":[],"class_list":["post-2924","post","type-post","status-publish","format-standard","hentry","category-development-workflow"],"featured_image_src":null,"author_info":{"display_name":"wordpressadminiq","author_link":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/author\/wordpressadminiq\/"},"_links":{"self":[{"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/posts\/2924","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/comments?post=2924"}],"version-history":[{"count":5,"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/posts\/2924\/revisions"}],"predecessor-version":[{"id":2932,"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/posts\/2924\/revisions\/2932"}],"wp:attachment":[{"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/media?parent=2924"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/categories?post=2924"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/tags?post=2924"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}