{"id":7086,"date":"2022-12-13T17:45:54","date_gmt":"2022-12-13T16:45:54","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=7086"},"modified":"2026-09-14T11:01:13","modified_gmt":"2026-09-14T10:01:13","slug":"react-fast-developing-with-vite","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/react-fast-developing-with-vite\/","title":{"rendered":"React: fast developing with Vite"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/vitejs.dev\">https:\/\/vitejs.dev<\/a><\/p>\n\n\n\n<div class=\"wp-block-file\"><a id=\"wp-block-file--media-147dca0a-71e5-4246-aac0-dc6f5f4211d5\" href=\"https:\/\/solidt.eu\/site\/wp-content\/uploads\/2026\/09\/new-vite-project.zip\">new-vite-project<\/a><a href=\"https:\/\/solidt.eu\/site\/wp-content\/uploads\/2026\/09\/new-vite-project.zip\" class=\"wp-block-file__button wp-element-button\" download aria-describedby=\"wp-block-file--media-147dca0a-71e5-4246-aac0-dc6f5f4211d5\">Download<\/a><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">new-vite-project.ps1<\/p>\n\n\n\n<div style=\"height: 250px; position:relative; margin-bottom: 50px;\" class=\"wp-block-simple-code-block-ace\"><pre class=\"wp-block-simple-code-block-ace\" style=\"position:absolute;top:0;right:0;bottom:0;left:0\" data-mode=\"powershell\" data-theme=\"monokai\" data-fontsize=\"14\" data-lines=\"Infinity\" data-showlines=\"true\" data-copy=\"false\">#requires -version 5\n\n&lt;#\n.SYNOPSIS\n    Creates a new Vite (React + TypeScript) project in a new subfolder.\n#>\n\n$projectName = Read-Host \"Enter the name of the new project\"\n\nif ([string]::IsNullOrWhiteSpace($projectName)) {\n    Write-Error \"Project name cannot be empty.\"\n    exit 1\n}\n\nif (Test-Path $projectName) {\n    $answer = Read-Host \"Folder '$projectName' already exists. Delete it? (y\/n)\"\n    if ($answer -eq \"y\") {\n        Remove-Item -Path $projectName -Recurse -Force\n    }\n    else {\n        Write-Error \"Aborted because folder '$projectName' already exists.\"\n        exit 1\n    }\n}\n\nNew-Item -ItemType Directory -Path $projectName | Out-Null\nPush-Location $projectName\n\ntry {\n    git init\n\n    npx create-vite@latest . --template react-ts  --no-interactive  \n\n    npm install\n    \n    npm install --save-dev typescript@latest\n\n    Write-Host \"Project '$projectName' has been created in $(Get-Location).\" -ForegroundColor Green\n\n    code .\n}\nfinally {\n    Pop-Location\n}\n<\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">new-vite-project.cmd (Invoke powershell script)<\/p>\n\n\n\n<div style=\"height: 250px; position:relative; margin-bottom: 50px;\" class=\"wp-block-simple-code-block-ace\"><pre class=\"wp-block-simple-code-block-ace\" style=\"position:absolute;top:0;right:0;bottom:0;left:0\" data-mode=\"sh\" data-theme=\"monokai\" data-fontsize=\"14\" data-lines=\"Infinity\" data-showlines=\"true\" data-copy=\"false\">@echo off\npushd \"%~dp0\"\npowershell.exe -ExecutionPolicy Bypass -File .\/new-vite-project.ps1\npopd\npause<\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/vite.dev\/guide\/features.html#transpile-only\">https:\/\/vite.dev\/guide\/features.html#transpile-only<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/github.com\/fi3ework\/vite-plugin-checker\">https:\/\/github.com\/fi3ework\/vite-plugin-checker<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Vite Hot Reload Persist (HMR)<\/h2>\n\n\n\n<div style=\"height: 250px; position:relative; margin-bottom: 50px;\" class=\"wp-block-simple-code-block-ace\"><pre class=\"wp-block-simple-code-block-ace\" style=\"position:absolute;top:0;right:0;bottom:0;left:0\" data-mode=\"typescript\" data-theme=\"monokai\" data-fontsize=\"14\" data-lines=\"Infinity\" data-showlines=\"true\" data-copy=\"false\">\/\/ helper function: hotReloadPersist or createPersistentSingleton\nexport function hotReloadPersist&lt;T>(\n    key: string,\n    factory: () => T,\n    hot?: ImportMeta['hot']\n): T {\n    \/\/ eslint-disable-next-line @typescript-eslint\/no-explicit-any\n    const data = hot?.data as Record&lt;string, any> | undefined;\n    if (data) {\n        if (!data[key]) data[key] = factory();\n        return data[key];\n    }\n    return factory();\n}\n\n\/\/ reuse same class when hot reloading module\nexport const domainPorts = hotReloadPersist(\"domainPorts\", () => new DomainPorts(), import.meta.hot);\n<\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>https:\/\/vitejs.dev new-vite-project.ps1 new-vite-project.cmd (Invoke powershell script) https:\/\/vite.dev\/guide\/features.html#transpile-only https:\/\/github.com\/fi3ework\/vite-plugin-checker Vite Hot Reload Persist (HMR)<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":true,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-7086","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/7086","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=7086"}],"version-history":[{"count":18,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/7086\/revisions"}],"predecessor-version":[{"id":10282,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/7086\/revisions\/10282"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=7086"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=7086"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=7086"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}