`, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n return (\n <>\n {raw(\"<!DOCTYPE html>\")}\n <html lang=\"en\">\n <head>\n <meta charSet=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>React Hono Val Town Starter

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_388":389,"_390":391},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_294":-5,"_20":295,"_22":296,"_297":298,"_299":300,"_26":301,"_24":302,"_303":-5,"_304":-5,"_305":54,"_306":307,"_308":45,"_309":-5,"_310":-5,"_311":312},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","jonasolof","name","training-coach","branchName","main","version","path","frontend/components/App.tsx","project",{"_33":236,"_13":14,"_46":237,"_238":-5,"_239":54,"_240":241,"_242":241,"_243":244,"_245":-5,"_246":247,"_248":88,"_249":45,"_250":-5,"_251":-5,"_252":135,"_253":254,"_255":256,"_257":258,"_259":260,"_261":-5,"_262":263,"_264":263,"_265":266,"_267":266,"_268":266,"_269":263,"_270":263,"_271":272,"_273":274,"_275":276,"_277":54},"tree",[59,60,61,62,63,64,65,66],"file",{"_33":34,"_13":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_18":56},"contents",[],"upstream","pull","ahead","behind","envVars","id","7bc5b6a6-76aa-43a4-861d-854632e31fdb","App.tsx","fileId","01a02b61-7568-77b9-9da3-99977f31242f","parentId","01a02b61-7568-77b9-9da3-a1cc4d4143fb","branchId","60471d74-2b50-43e0-a779-1eff6bc1aaa3","branchVersion",9,"latest",true,"createdAt",["D",1787434820099],1,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { CheckCircle2, RefreshCw } from \"https://esm.sh/lucide-react@0.468.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport type { Bootstrap, Page, Session, Template } from \"../types.ts\";\nimport { HistoryView, HomeView, ProgressView, WorkoutsView } from \"./Views.tsx\";\nimport { Nav } from \"./Nav.tsx\";\nimport { WorkoutMode } from \"./WorkoutMode.tsx\";\n\nexport function App() {\n const [data, setData] = useState(null);\n const [error, setError] = useState(\"\");\n const [page, setPage] = useState(() => {\n const value = location.hash.replace(\"#\", \"\") as Page;\n return [\"home\", \"workouts\", \"history\", \"progress\"].includes(value) ? value : \"home\";\n });\n const [workout, setWorkout] = useState