@databricks/appkit-ui 0.12.0 → 0.12.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (351) hide show
  1. package/CLAUDE.md +155 -147
  2. package/dist/cli/commands/docs.js +80 -17
  3. package/dist/cli/commands/docs.js.map +1 -1
  4. package/dist/react/charts/area/index.d.ts +2 -2
  5. package/dist/react/charts/bar/index.d.ts +2 -2
  6. package/dist/react/charts/base.d.ts +2 -2
  7. package/dist/react/charts/base.d.ts.map +1 -1
  8. package/dist/react/charts/create-chart.d.ts +2 -2
  9. package/dist/react/charts/create-chart.d.ts.map +1 -1
  10. package/dist/react/charts/heatmap/index.d.ts +2 -2
  11. package/dist/react/charts/line/index.d.ts +2 -2
  12. package/dist/react/charts/options.d.ts.map +1 -1
  13. package/dist/react/charts/pie/index.d.ts +3 -3
  14. package/dist/react/charts/radar/index.d.ts +2 -2
  15. package/dist/react/charts/scatter/index.d.ts +2 -2
  16. package/dist/react/charts/wrapper.d.ts +2 -2
  17. package/dist/react/charts/wrapper.d.ts.map +1 -1
  18. package/dist/react/table/data-table.d.ts +2 -2
  19. package/dist/react/ui/accordion.d.ts +5 -5
  20. package/dist/react/ui/accordion.d.ts.map +1 -1
  21. package/dist/react/ui/alert-dialog.d.ts +12 -12
  22. package/dist/react/ui/alert.d.ts +4 -4
  23. package/dist/react/ui/alert.d.ts.map +1 -1
  24. package/dist/react/ui/aspect-ratio.d.ts +2 -2
  25. package/dist/react/ui/avatar.d.ts +4 -4
  26. package/dist/react/ui/badge.d.ts +4 -4
  27. package/dist/react/ui/breadcrumb.d.ts +8 -8
  28. package/dist/react/ui/button-group.d.ts +6 -6
  29. package/dist/react/ui/button.d.ts +4 -4
  30. package/dist/react/ui/calendar.d.ts +3 -3
  31. package/dist/react/ui/card.d.ts +8 -8
  32. package/dist/react/ui/carousel.d.ts +6 -6
  33. package/dist/react/ui/chart.d.ts +5 -5
  34. package/dist/react/ui/checkbox.d.ts +2 -2
  35. package/dist/react/ui/collapsible.d.ts +4 -4
  36. package/dist/react/ui/command.d.ts +10 -10
  37. package/dist/react/ui/context-menu.d.ts +16 -16
  38. package/dist/react/ui/dialog.d.ts +11 -11
  39. package/dist/react/ui/dialog.d.ts.map +1 -1
  40. package/dist/react/ui/drawer.d.ts +11 -11
  41. package/dist/react/ui/dropdown-menu.d.ts +16 -16
  42. package/dist/react/ui/empty.d.ts +7 -7
  43. package/dist/react/ui/field.d.ts +11 -11
  44. package/dist/react/ui/form.d.ts +7 -7
  45. package/dist/react/ui/hover-card.d.ts +4 -4
  46. package/dist/react/ui/input-group.d.ts +7 -7
  47. package/dist/react/ui/input-otp.d.ts +5 -5
  48. package/dist/react/ui/input.d.ts +2 -2
  49. package/dist/react/ui/item.d.ts +11 -11
  50. package/dist/react/ui/kbd.d.ts +3 -3
  51. package/dist/react/ui/label.d.ts +2 -2
  52. package/dist/react/ui/menubar.d.ts +17 -17
  53. package/dist/react/ui/navigation-menu.d.ts +9 -9
  54. package/dist/react/ui/pagination.d.ts +8 -8
  55. package/dist/react/ui/popover.d.ts +5 -5
  56. package/dist/react/ui/progress.d.ts +2 -2
  57. package/dist/react/ui/radio-group.d.ts +3 -3
  58. package/dist/react/ui/resizable.d.ts +4 -4
  59. package/dist/react/ui/scroll-area.d.ts +3 -3
  60. package/dist/react/ui/select.d.ts +11 -11
  61. package/dist/react/ui/separator.d.ts +2 -2
  62. package/dist/react/ui/sheet.d.ts +9 -9
  63. package/dist/react/ui/sidebar.d.ts +24 -24
  64. package/dist/react/ui/skeleton.d.ts +2 -2
  65. package/dist/react/ui/slider.d.ts +2 -2
  66. package/dist/react/ui/sonner.d.ts +2 -2
  67. package/dist/react/ui/spinner.d.ts +2 -2
  68. package/dist/react/ui/switch.d.ts +2 -2
  69. package/dist/react/ui/table.d.ts +9 -9
  70. package/dist/react/ui/tabs.d.ts +5 -5
  71. package/dist/react/ui/textarea.d.ts +2 -2
  72. package/dist/react/ui/toggle-group.d.ts +3 -3
  73. package/dist/react/ui/toggle.d.ts +2 -2
  74. package/dist/react/ui/tooltip.d.ts +5 -5
  75. package/dist/react/ui/tooltip.d.ts.map +1 -1
  76. package/docs/{docs/api → api}/appkit/Class.AppKitError.md +8 -8
  77. package/docs/{docs/api → api}/appkit/Class.AuthenticationError.md +9 -9
  78. package/docs/{docs/api → api}/appkit/Class.ConfigurationError.md +9 -9
  79. package/docs/{docs/api → api}/appkit/Class.ConnectionError.md +9 -9
  80. package/docs/{docs/api → api}/appkit/Class.ExecutionError.md +9 -9
  81. package/docs/{docs/api → api}/appkit/Class.InitializationError.md +9 -9
  82. package/docs/{docs/api → api}/appkit/Class.Plugin.md +2 -2
  83. package/docs/{docs/api → api}/appkit/Class.ResourceRegistry.md +11 -11
  84. package/docs/{docs/api → api}/appkit/Class.ServerError.md +9 -9
  85. package/docs/{docs/api → api}/appkit/Class.TunnelError.md +9 -9
  86. package/docs/{docs/api → api}/appkit/Class.ValidationError.md +9 -9
  87. package/docs/{docs/api → api}/appkit/Function.createApp.md +3 -3
  88. package/docs/{docs/api → api}/appkit/Function.createLakebasePool.md +1 -1
  89. package/docs/{docs/api → api}/appkit/Function.generateDatabaseCredential.md +2 -2
  90. package/docs/{docs/api → api}/appkit/Function.getLakebaseOrmConfig.md +1 -1
  91. package/docs/{docs/api → api}/appkit/Function.getLakebasePgConfig.md +1 -1
  92. package/docs/{docs/api → api}/appkit/Function.getPluginManifest.md +1 -1
  93. package/docs/{docs/api → api}/appkit/Function.getUsernameWithApiLookup.md +1 -1
  94. package/docs/{docs/api → api}/appkit/Function.getWorkspaceClient.md +1 -1
  95. package/docs/{docs/api → api}/appkit/Interface.ResourceEntry.md +8 -8
  96. package/docs/{docs/api → api}/appkit/Interface.ResourceRequirement.md +1 -1
  97. package/docs/{docs/api → api}/appkit-ui/styling.md +1 -1
  98. package/docs/api/appkit.md +78 -0
  99. package/docs/{docs/api.md → api.md} +4 -4
  100. package/docs/{docs/app-management.md → app-management.md} +2 -2
  101. package/docs/{docs/architecture.md → architecture.md} +6 -6
  102. package/docs/{docs/configuration.md → configuration.md} +2 -2
  103. package/docs/{docs/development → development}/ai-assisted-development.md +5 -3
  104. package/docs/{docs/development → development}/llm-guide.md +7 -6
  105. package/docs/{docs/development → development}/local-development.md +2 -2
  106. package/docs/{docs/development → development}/project-setup.md +3 -3
  107. package/docs/{docs/development → development}/remote-bridge.md +1 -1
  108. package/docs/{docs/development → development}/type-generation.md +2 -2
  109. package/docs/development.md +22 -0
  110. package/docs/{docs/plugins → plugins}/analytics.md +1 -1
  111. package/docs/{docs/plugins → plugins}/custom-plugins.md +6 -6
  112. package/docs/{docs/plugins.md → plugins.md} +2 -2
  113. package/{docs/docs.md → docs.md} +4 -4
  114. package/llms.txt +155 -147
  115. package/package.json +2 -1
  116. package/docs/docs/api/appkit/Class.AppKitError/index.html +0 -79
  117. package/docs/docs/api/appkit/Class.AuthenticationError/index.html +0 -110
  118. package/docs/docs/api/appkit/Class.ConfigurationError/index.html +0 -112
  119. package/docs/docs/api/appkit/Class.ConnectionError/index.html +0 -120
  120. package/docs/docs/api/appkit/Class.ExecutionError/index.html +0 -116
  121. package/docs/docs/api/appkit/Class.InitializationError/index.html +0 -104
  122. package/docs/docs/api/appkit/Class.Plugin/index.html +0 -168
  123. package/docs/docs/api/appkit/Class.ResourceRegistry/index.html +0 -150
  124. package/docs/docs/api/appkit/Class.ServerError/index.html +0 -108
  125. package/docs/docs/api/appkit/Class.TunnelError/index.html +0 -108
  126. package/docs/docs/api/appkit/Class.ValidationError/index.html +0 -106
  127. package/docs/docs/api/appkit/Enumeration.RequestedClaimsPermissionSet/index.html +0 -21
  128. package/docs/docs/api/appkit/Enumeration.ResourceType/index.html +0 -53
  129. package/docs/docs/api/appkit/Function.appKitTypesPlugin/index.html +0 -24
  130. package/docs/docs/api/appkit/Function.createApp/index.html +0 -24
  131. package/docs/docs/api/appkit/Function.createLakebasePool/index.html +0 -24
  132. package/docs/docs/api/appkit/Function.generateDatabaseCredential/index.html +0 -30
  133. package/docs/docs/api/appkit/Function.getExecutionContext/index.html +0 -26
  134. package/docs/docs/api/appkit/Function.getLakebaseOrmConfig/index.html +0 -39
  135. package/docs/docs/api/appkit/Function.getLakebasePgConfig/index.html +0 -27
  136. package/docs/docs/api/appkit/Function.getPluginManifest/index.html +0 -26
  137. package/docs/docs/api/appkit/Function.getResourceRequirements/index.html +0 -28
  138. package/docs/docs/api/appkit/Function.getUsernameWithApiLookup/index.html +0 -35
  139. package/docs/docs/api/appkit/Function.getWorkspaceClient/index.html +0 -22
  140. package/docs/docs/api/appkit/Function.isSQLTypeMarker/index.html +0 -25
  141. package/docs/docs/api/appkit/Interface.BasePluginConfig/index.html +0 -28
  142. package/docs/docs/api/appkit/Interface.CacheConfig/index.html +0 -63
  143. package/docs/docs/api/appkit/Interface.DatabaseCredential/index.html +0 -28
  144. package/docs/docs/api/appkit/Interface.GenerateDatabaseCredentialRequest/index.html +0 -32
  145. package/docs/docs/api/appkit/Interface.ITelemetry/index.html +0 -73
  146. package/docs/docs/api/appkit/Interface.LakebasePoolConfig/index.html +0 -75
  147. package/docs/docs/api/appkit/Interface.PluginManifest/index.html +0 -67
  148. package/docs/docs/api/appkit/Interface.RequestedClaims/index.html +0 -26
  149. package/docs/docs/api/appkit/Interface.RequestedResource/index.html +0 -27
  150. package/docs/docs/api/appkit/Interface.ResourceEntry/index.html +0 -83
  151. package/docs/docs/api/appkit/Interface.ResourceFieldEntry/index.html +0 -26
  152. package/docs/docs/api/appkit/Interface.ResourceRequirement/index.html +0 -51
  153. package/docs/docs/api/appkit/Interface.StreamExecutionSettings/index.html +0 -26
  154. package/docs/docs/api/appkit/Interface.TelemetryConfig/index.html +0 -32
  155. package/docs/docs/api/appkit/Interface.ValidationResult/index.html +0 -29
  156. package/docs/docs/api/appkit/TypeAlias.ConfigSchema/index.html +0 -21
  157. package/docs/docs/api/appkit/TypeAlias.IAppRouter/index.html +0 -18
  158. package/docs/docs/api/appkit/TypeAlias.ResourcePermission/index.html +0 -18
  159. package/docs/docs/api/appkit/TypeAlias.ToPlugin/index.html +0 -23
  160. package/docs/docs/api/appkit/Variable.sql/index.html +0 -98
  161. package/docs/docs/api/appkit/index.html +0 -30
  162. package/docs/docs/api/appkit-ui/data/AreaChart/index.html +0 -29
  163. package/docs/docs/api/appkit-ui/data/BarChart/index.html +0 -29
  164. package/docs/docs/api/appkit-ui/data/DataTable/index.html +0 -36
  165. package/docs/docs/api/appkit-ui/data/DonutChart/index.html +0 -29
  166. package/docs/docs/api/appkit-ui/data/HeatmapChart/index.html +0 -35
  167. package/docs/docs/api/appkit-ui/data/LineChart/index.html +0 -29
  168. package/docs/docs/api/appkit-ui/data/PieChart/index.html +0 -29
  169. package/docs/docs/api/appkit-ui/data/RadarChart/index.html +0 -29
  170. package/docs/docs/api/appkit-ui/data/ScatterChart/index.html +0 -29
  171. package/docs/docs/api/appkit-ui/genie/GenieChat/index.html +0 -26
  172. package/docs/docs/api/appkit-ui/genie/GenieChatInput/index.html +0 -24
  173. package/docs/docs/api/appkit-ui/genie/GenieChatMessage/index.html +0 -24
  174. package/docs/docs/api/appkit-ui/genie/GenieChatMessageList/index.html +0 -24
  175. package/docs/docs/api/appkit-ui/index.html +0 -23
  176. package/docs/docs/api/appkit-ui/styling/index.html +0 -74
  177. package/docs/docs/api/appkit-ui/ui/Accordion/index.html +0 -48
  178. package/docs/docs/api/appkit-ui/ui/Alert/index.html +0 -41
  179. package/docs/docs/api/appkit-ui/ui/AlertDialog/index.html +0 -97
  180. package/docs/docs/api/appkit-ui/ui/AspectRatio/index.html +0 -27
  181. package/docs/docs/api/appkit-ui/ui/Avatar/index.html +0 -41
  182. package/docs/docs/api/appkit-ui/ui/Badge/index.html +0 -27
  183. package/docs/docs/api/appkit-ui/ui/Breadcrumb/index.html +0 -69
  184. package/docs/docs/api/appkit-ui/ui/Button/index.html +0 -27
  185. package/docs/docs/api/appkit-ui/ui/ButtonGroup/index.html +0 -38
  186. package/docs/docs/api/appkit-ui/ui/Calendar/index.html +0 -34
  187. package/docs/docs/api/appkit-ui/ui/Card/index.html +0 -69
  188. package/docs/docs/api/appkit-ui/ui/Carousel/index.html +0 -55
  189. package/docs/docs/api/appkit-ui/ui/ChartContainer/index.html +0 -58
  190. package/docs/docs/api/appkit-ui/ui/Checkbox/index.html +0 -27
  191. package/docs/docs/api/appkit-ui/ui/Collapsible/index.html +0 -41
  192. package/docs/docs/api/appkit-ui/ui/Command/index.html +0 -83
  193. package/docs/docs/api/appkit-ui/ui/ContextMenu/index.html +0 -111
  194. package/docs/docs/api/appkit-ui/ui/Dialog/index.html +0 -90
  195. package/docs/docs/api/appkit-ui/ui/Drawer/index.html +0 -90
  196. package/docs/docs/api/appkit-ui/ui/DropdownMenu/index.html +0 -111
  197. package/docs/docs/api/appkit-ui/ui/Empty/index.html +0 -54
  198. package/docs/docs/api/appkit-ui/ui/Field/index.html +0 -87
  199. package/docs/docs/api/appkit-ui/ui/FormControl/index.html +0 -59
  200. package/docs/docs/api/appkit-ui/ui/HoverCard/index.html +0 -39
  201. package/docs/docs/api/appkit-ui/ui/Input/index.html +0 -27
  202. package/docs/docs/api/appkit-ui/ui/InputGroup/index.html +0 -59
  203. package/docs/docs/api/appkit-ui/ui/InputOTP/index.html +0 -48
  204. package/docs/docs/api/appkit-ui/ui/Item/index.html +0 -78
  205. package/docs/docs/api/appkit-ui/ui/Kbd/index.html +0 -30
  206. package/docs/docs/api/appkit-ui/ui/Label/index.html +0 -27
  207. package/docs/docs/api/appkit-ui/ui/Menubar/index.html +0 -117
  208. package/docs/docs/api/appkit-ui/ui/NavigationMenu/index.html +0 -76
  209. package/docs/docs/api/appkit-ui/ui/Pagination/index.html +0 -69
  210. package/docs/docs/api/appkit-ui/ui/Popover/index.html +0 -45
  211. package/docs/docs/api/appkit-ui/ui/Progress/index.html +0 -27
  212. package/docs/docs/api/appkit-ui/ui/RadioGroup/index.html +0 -33
  213. package/docs/docs/api/appkit-ui/ui/ResizableHandle/index.html +0 -41
  214. package/docs/docs/api/appkit-ui/ui/ScrollArea/index.html +0 -34
  215. package/docs/docs/api/appkit-ui/ui/Select/index.html +0 -82
  216. package/docs/docs/api/appkit-ui/ui/Separator/index.html +0 -27
  217. package/docs/docs/api/appkit-ui/ui/Sheet/index.html +0 -76
  218. package/docs/docs/api/appkit-ui/ui/Sidebar/index.html +0 -183
  219. package/docs/docs/api/appkit-ui/ui/Skeleton/index.html +0 -27
  220. package/docs/docs/api/appkit-ui/ui/Slider/index.html +0 -27
  221. package/docs/docs/api/appkit-ui/ui/Spinner/index.html +0 -24
  222. package/docs/docs/api/appkit-ui/ui/Switch/index.html +0 -27
  223. package/docs/docs/api/appkit-ui/ui/Table/index.html +0 -69
  224. package/docs/docs/api/appkit-ui/ui/Tabs/index.html +0 -48
  225. package/docs/docs/api/appkit-ui/ui/Textarea/index.html +0 -27
  226. package/docs/docs/api/appkit-ui/ui/Toaster/index.html +0 -27
  227. package/docs/docs/api/appkit-ui/ui/Toggle/index.html +0 -27
  228. package/docs/docs/api/appkit-ui/ui/ToggleGroup/index.html +0 -33
  229. package/docs/docs/api/appkit-ui/ui/Tooltip/index.html +0 -46
  230. package/docs/docs/api/appkit.md +0 -78
  231. package/docs/docs/api/index.html +0 -28
  232. package/docs/docs/app-management/index.html +0 -106
  233. package/docs/docs/architecture/index.html +0 -71
  234. package/docs/docs/category/development/index.html +0 -16
  235. package/docs/docs/category/development.md +0 -3
  236. package/docs/docs/configuration/index.html +0 -66
  237. package/docs/docs/core-principles/index.html +0 -38
  238. package/docs/docs/development/ai-assisted-development/index.html +0 -33
  239. package/docs/docs/development/index.html +0 -35
  240. package/docs/docs/development/llm-guide/index.html +0 -84
  241. package/docs/docs/development/local-development/index.html +0 -27
  242. package/docs/docs/development/project-setup/index.html +0 -69
  243. package/docs/docs/development/remote-bridge/index.html +0 -76
  244. package/docs/docs/development/type-generation/index.html +0 -65
  245. package/docs/docs/development.md +0 -22
  246. package/docs/docs/index.html +0 -58
  247. package/docs/docs/plugins/analytics/index.html +0 -53
  248. package/docs/docs/plugins/caching/index.html +0 -23
  249. package/docs/docs/plugins/custom-plugins/index.html +0 -49
  250. package/docs/docs/plugins/execution-context/index.html +0 -40
  251. package/docs/docs/plugins/index.html +0 -29
  252. package/docs/docs/plugins/lakebase/index.html +0 -62
  253. package/docs/docs/plugins/plugin-management/index.html +0 -44
  254. package/docs/docs/plugins/server/index.html +0 -45
  255. /package/docs/{docs/api → api}/appkit/Enumeration.RequestedClaimsPermissionSet.md +0 -0
  256. /package/docs/{docs/api → api}/appkit/Enumeration.ResourceType.md +0 -0
  257. /package/docs/{docs/api → api}/appkit/Function.appKitTypesPlugin.md +0 -0
  258. /package/docs/{docs/api → api}/appkit/Function.getExecutionContext.md +0 -0
  259. /package/docs/{docs/api → api}/appkit/Function.getResourceRequirements.md +0 -0
  260. /package/docs/{docs/api → api}/appkit/Function.isSQLTypeMarker.md +0 -0
  261. /package/docs/{docs/api → api}/appkit/Interface.BasePluginConfig.md +0 -0
  262. /package/docs/{docs/api → api}/appkit/Interface.CacheConfig.md +0 -0
  263. /package/docs/{docs/api → api}/appkit/Interface.DatabaseCredential.md +0 -0
  264. /package/docs/{docs/api → api}/appkit/Interface.GenerateDatabaseCredentialRequest.md +0 -0
  265. /package/docs/{docs/api → api}/appkit/Interface.ITelemetry.md +0 -0
  266. /package/docs/{docs/api → api}/appkit/Interface.LakebasePoolConfig.md +0 -0
  267. /package/docs/{docs/api → api}/appkit/Interface.PluginManifest.md +0 -0
  268. /package/docs/{docs/api → api}/appkit/Interface.RequestedClaims.md +0 -0
  269. /package/docs/{docs/api → api}/appkit/Interface.RequestedResource.md +0 -0
  270. /package/docs/{docs/api → api}/appkit/Interface.ResourceFieldEntry.md +0 -0
  271. /package/docs/{docs/api → api}/appkit/Interface.StreamExecutionSettings.md +0 -0
  272. /package/docs/{docs/api → api}/appkit/Interface.TelemetryConfig.md +0 -0
  273. /package/docs/{docs/api → api}/appkit/Interface.ValidationResult.md +0 -0
  274. /package/docs/{docs/api → api}/appkit/TypeAlias.ConfigSchema.md +0 -0
  275. /package/docs/{docs/api → api}/appkit/TypeAlias.IAppRouter.md +0 -0
  276. /package/docs/{docs/api → api}/appkit/TypeAlias.ResourcePermission.md +0 -0
  277. /package/docs/{docs/api → api}/appkit/TypeAlias.ToPlugin.md +0 -0
  278. /package/docs/{docs/api → api}/appkit/Variable.sql.md +0 -0
  279. /package/docs/{docs/api → api}/appkit-ui/data/AreaChart.md +0 -0
  280. /package/docs/{docs/api → api}/appkit-ui/data/BarChart.md +0 -0
  281. /package/docs/{docs/api → api}/appkit-ui/data/DataTable.md +0 -0
  282. /package/docs/{docs/api → api}/appkit-ui/data/DonutChart.md +0 -0
  283. /package/docs/{docs/api → api}/appkit-ui/data/HeatmapChart.md +0 -0
  284. /package/docs/{docs/api → api}/appkit-ui/data/LineChart.md +0 -0
  285. /package/docs/{docs/api → api}/appkit-ui/data/PieChart.md +0 -0
  286. /package/docs/{docs/api → api}/appkit-ui/data/RadarChart.md +0 -0
  287. /package/docs/{docs/api → api}/appkit-ui/data/ScatterChart.md +0 -0
  288. /package/docs/{docs/api → api}/appkit-ui/genie/GenieChat.md +0 -0
  289. /package/docs/{docs/api → api}/appkit-ui/genie/GenieChatInput.md +0 -0
  290. /package/docs/{docs/api → api}/appkit-ui/genie/GenieChatMessage.md +0 -0
  291. /package/docs/{docs/api → api}/appkit-ui/genie/GenieChatMessageList.md +0 -0
  292. /package/docs/{docs/api → api}/appkit-ui/ui/Accordion.md +0 -0
  293. /package/docs/{docs/api → api}/appkit-ui/ui/Alert.md +0 -0
  294. /package/docs/{docs/api → api}/appkit-ui/ui/AlertDialog.md +0 -0
  295. /package/docs/{docs/api → api}/appkit-ui/ui/AspectRatio.md +0 -0
  296. /package/docs/{docs/api → api}/appkit-ui/ui/Avatar.md +0 -0
  297. /package/docs/{docs/api → api}/appkit-ui/ui/Badge.md +0 -0
  298. /package/docs/{docs/api → api}/appkit-ui/ui/Breadcrumb.md +0 -0
  299. /package/docs/{docs/api → api}/appkit-ui/ui/Button.md +0 -0
  300. /package/docs/{docs/api → api}/appkit-ui/ui/ButtonGroup.md +0 -0
  301. /package/docs/{docs/api → api}/appkit-ui/ui/Calendar.md +0 -0
  302. /package/docs/{docs/api → api}/appkit-ui/ui/Card.md +0 -0
  303. /package/docs/{docs/api → api}/appkit-ui/ui/Carousel.md +0 -0
  304. /package/docs/{docs/api → api}/appkit-ui/ui/ChartContainer.md +0 -0
  305. /package/docs/{docs/api → api}/appkit-ui/ui/Checkbox.md +0 -0
  306. /package/docs/{docs/api → api}/appkit-ui/ui/Collapsible.md +0 -0
  307. /package/docs/{docs/api → api}/appkit-ui/ui/Command.md +0 -0
  308. /package/docs/{docs/api → api}/appkit-ui/ui/ContextMenu.md +0 -0
  309. /package/docs/{docs/api → api}/appkit-ui/ui/Dialog.md +0 -0
  310. /package/docs/{docs/api → api}/appkit-ui/ui/Drawer.md +0 -0
  311. /package/docs/{docs/api → api}/appkit-ui/ui/DropdownMenu.md +0 -0
  312. /package/docs/{docs/api → api}/appkit-ui/ui/Empty.md +0 -0
  313. /package/docs/{docs/api → api}/appkit-ui/ui/Field.md +0 -0
  314. /package/docs/{docs/api → api}/appkit-ui/ui/FormControl.md +0 -0
  315. /package/docs/{docs/api → api}/appkit-ui/ui/HoverCard.md +0 -0
  316. /package/docs/{docs/api → api}/appkit-ui/ui/Input.md +0 -0
  317. /package/docs/{docs/api → api}/appkit-ui/ui/InputGroup.md +0 -0
  318. /package/docs/{docs/api → api}/appkit-ui/ui/InputOTP.md +0 -0
  319. /package/docs/{docs/api → api}/appkit-ui/ui/Item.md +0 -0
  320. /package/docs/{docs/api → api}/appkit-ui/ui/Kbd.md +0 -0
  321. /package/docs/{docs/api → api}/appkit-ui/ui/Label.md +0 -0
  322. /package/docs/{docs/api → api}/appkit-ui/ui/Menubar.md +0 -0
  323. /package/docs/{docs/api → api}/appkit-ui/ui/NavigationMenu.md +0 -0
  324. /package/docs/{docs/api → api}/appkit-ui/ui/Pagination.md +0 -0
  325. /package/docs/{docs/api → api}/appkit-ui/ui/Popover.md +0 -0
  326. /package/docs/{docs/api → api}/appkit-ui/ui/Progress.md +0 -0
  327. /package/docs/{docs/api → api}/appkit-ui/ui/RadioGroup.md +0 -0
  328. /package/docs/{docs/api → api}/appkit-ui/ui/ResizableHandle.md +0 -0
  329. /package/docs/{docs/api → api}/appkit-ui/ui/ScrollArea.md +0 -0
  330. /package/docs/{docs/api → api}/appkit-ui/ui/Select.md +0 -0
  331. /package/docs/{docs/api → api}/appkit-ui/ui/Separator.md +0 -0
  332. /package/docs/{docs/api → api}/appkit-ui/ui/Sheet.md +0 -0
  333. /package/docs/{docs/api → api}/appkit-ui/ui/Sidebar.md +0 -0
  334. /package/docs/{docs/api → api}/appkit-ui/ui/Skeleton.md +0 -0
  335. /package/docs/{docs/api → api}/appkit-ui/ui/Slider.md +0 -0
  336. /package/docs/{docs/api → api}/appkit-ui/ui/Spinner.md +0 -0
  337. /package/docs/{docs/api → api}/appkit-ui/ui/Switch.md +0 -0
  338. /package/docs/{docs/api → api}/appkit-ui/ui/Table.md +0 -0
  339. /package/docs/{docs/api → api}/appkit-ui/ui/Tabs.md +0 -0
  340. /package/docs/{docs/api → api}/appkit-ui/ui/Textarea.md +0 -0
  341. /package/docs/{docs/api → api}/appkit-ui/ui/Toaster.md +0 -0
  342. /package/docs/{docs/api → api}/appkit-ui/ui/Toggle.md +0 -0
  343. /package/docs/{docs/api → api}/appkit-ui/ui/ToggleGroup.md +0 -0
  344. /package/docs/{docs/api → api}/appkit-ui/ui/Tooltip.md +0 -0
  345. /package/docs/{docs/api → api}/appkit-ui.md +0 -0
  346. /package/docs/{docs/core-principles.md → core-principles.md} +0 -0
  347. /package/docs/{docs/plugins → plugins}/caching.md +0 -0
  348. /package/docs/{docs/plugins → plugins}/execution-context.md +0 -0
  349. /package/docs/{docs/plugins → plugins}/lakebase.md +0 -0
  350. /package/docs/{docs/plugins → plugins}/plugin-management.md +0 -0
  351. /package/docs/{docs/plugins → plugins}/server.md +0 -0
package/docs/docs/development/project-setup/index.html DELETED
@@ -1,69 +0,0 @@
1
- <!doctype html>
2
- <html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-development/project-setup" data-has-hydrated="false">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="generator" content="Docusaurus v3.9.2">
6
- <title data-rh="true">Project setup | AppKit</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://databricks.github.io/appkit/docs/development/project-setup"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="Databricks Apps, Node.js, React.js, SDK, TypeScript, SQL, Databricks, AI, full-stack, development"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Project setup | AppKit"><meta data-rh="true" name="description" content="This guide covers the recommended project structure and scaffolding for AppKit applications."><meta data-rh="true" property="og:description" content="This guide covers the recommended project structure and scaffolding for AppKit applications."><link data-rh="true" rel="icon" href="/appkit/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://databricks.github.io/appkit/docs/development/project-setup"><link data-rh="true" rel="alternate" href="https://databricks.github.io/appkit/docs/development/project-setup" hreflang="en"><link data-rh="true" rel="alternate" href="https://databricks.github.io/appkit/docs/development/project-setup" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Development","item":"https://databricks.github.io/appkit/docs/category/development"},{"@type":"ListItem","position":2,"name":"Project setup","item":"https://databricks.github.io/appkit/docs/development/project-setup"}]}</script><link rel="stylesheet" href="/appkit/assets/css/styles.36a38b99.css">
7
- <script src="/appkit/assets/js/runtime~main.05f114de.js" defer="defer"></script>
8
- <script src="/appkit/assets/js/main.215573eb.js" defer="defer"></script>
9
- </head>
10
- <body class="navigation-with-keyboard">
11
- <svg style="display: none;"><defs>
12
- <symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
13
- </defs></svg>
14
- <script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")),document.documentElement.setAttribute("data-theme-choice",t||"system")}(),function(){try{const n=new URLSearchParams(window.location.search).entries();for(var[t,e]of n)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script><div id="__docusaurus"><link rel="preload" as="image" href="/appkit/img/logo.png"><div role="region" aria-label="Skip to main content"><a class="skipToContent_R3I2" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><div class="theme-announcement-bar announcementBar_Upl7" style="background-color:#f0f0f0;color:#000000" role="banner"><div class="announcementBarPlaceholder_Lvio"></div><div class="content_vq0X announcementBarContent_FIMQ">⚠️ AppKit is in an early development phase and is subject to change without notice. <strong>DO NOT</strong> use in production environments.</div><button type="button" aria-label="Close" class="clean-btn close closeButton_J8WU announcementBarClose_jD94"><svg viewBox="0 0 15 15" width="14" height="14"><g stroke="currentColor" stroke-width="3.1"><path d="M.75.75l13.5 13.5M14.25.75L.75 14.25"></path></g></svg></button></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/appkit/"><div class="navbar__logo"><img src="/appkit/img/logo.png" alt="AppKit" class="themedComponent_hkXO themedComponent--light_BgK8"><img src="/appkit/img/logo.png" alt="AppKit" class="themedComponent_hkXO themedComponent--dark_RKPt"></div><b class="navbar__title text--truncate">AppKit</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/appkit/docs/">Documentation</a><a class="navbar__item navbar__link" href="/appkit/contributing">Contributing</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/databricks/appkit" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_miaU"><use href="#theme-svg-external-link"></use></svg></a><div class="toggle_eFYw colorModeToggle_EPbi"><button class="clean-btn toggleButton_HRKp toggleButtonDisabled_bICu" type="button" disabled="" title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_brDO lightToggleIcon_vxPA"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_brDO darkToggleIcon_PZNO"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_brDO systemToggleIcon_A7x6"><path fill="currentColor" d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"></path></svg></button></div><div class="navbarSearchContainer_cVhq"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input id="search_input_react" type="search" placeholder="Loading..." aria-label="Search" class="navbar__search-input search-bar" disabled=""></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper__Y_W"><div class="docsWrapper_cIfN"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_xQFv" type="button"></button><div class="docRoot_FHtD"><aside class="theme-doc-sidebar-container docSidebarContainer_dvCd"><div class="sidebarViewport_GeRf"><div class="sidebar_T8N1"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_uyE9 menuWithAnnouncementBar_Bucd"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/"><span title="Getting started" class="linkLabel_hZzm">Getting started</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/app-management"><span title="App management" class="linkLabel_hZzm">App management</span></a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_P6CU menu__link menu__link--sublist" href="/appkit/docs/plugins/"><span title="Plugins" class="categoryLinkLabel_ShmP">Plugins</span></a><button aria-label="Collapse sidebar category &#x27;Plugins&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/plugins/server"><span title="Server plugin" class="linkLabel_hZzm">Server plugin</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/plugins/analytics"><span title="Analytics plugin" class="linkLabel_hZzm">Analytics plugin</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/plugins/lakebase"><span title="Lakebase plugin" class="linkLabel_hZzm">Lakebase plugin</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/plugins/execution-context"><span title="Execution context" class="linkLabel_hZzm">Execution context</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/plugins/plugin-management"><span title="Plugin management" class="linkLabel_hZzm">Plugin management</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/plugins/custom-plugins"><span title="Creating custom plugins" class="linkLabel_hZzm">Creating custom plugins</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/plugins/caching"><span title="Caching" class="linkLabel_hZzm">Caching</span></a></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/architecture"><span title="Architecture" class="linkLabel_hZzm">Architecture</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/configuration"><span title="Configuration" class="linkLabel_hZzm">Configuration</span></a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_P6CU menu__link menu__link--sublist menu__link--active" href="/appkit/docs/category/development"><span title="Development" class="categoryLinkLabel_ShmP">Development</span></a><button aria-label="Collapse sidebar category &#x27;Development&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/local-development"><span title="Local development" class="linkLabel_hZzm">Local development</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/ai-assisted-development"><span title="AI-Assisted development" class="linkLabel_hZzm">AI-Assisted development</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/"><span title="Development" class="linkLabel_hZzm">Development</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/remote-bridge"><span title="Remote Bridge" class="linkLabel_hZzm">Remote Bridge</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/appkit/docs/development/project-setup"><span title="Project setup" class="linkLabel_hZzm">Project setup</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/type-generation"><span title="Type generation" class="linkLabel_hZzm">Type generation</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/llm-guide"><span title="LLM Guide" class="linkLabel_hZzm">LLM Guide</span></a></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/core-principles"><span title="Core principles" class="linkLabel_hZzm">Core principles</span></a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="categoryLink_P6CU menu__link menu__link--sublist" href="/appkit/docs/api/"><span title="API reference" class="categoryLinkLabel_ShmP">API reference</span></a><button aria-label="Expand sidebar category &#x27;API reference&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></nav></div></div></aside><main class="docMainContainer_P5br"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_poBZ"><div class="docItemContainer_TdBg"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_bEIa" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/appkit/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_sma7"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/appkit/docs/category/development"><span>Development</span></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">Project setup</span></li></ul></nav><div class="tocCollapsible_gJxE theme-doc-toc-mobile tocMobile_ZHYV"><button type="button" class="clean-btn tocCollapsibleButton_uxuR">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Project setup</h1></header>
15
- <p>This guide covers the recommended project structure and scaffolding for AppKit applications.</p>
16
- <h2 class="anchor anchorTargetStickyNavbar_scV4" id="canonical-project-layout">Canonical project layout<a href="#canonical-project-layout" class="hash-link" aria-label="Direct link to Canonical project layout" title="Direct link to Canonical project layout" translate="no">​</a></h2>
17
- <p>Recommended structure (client/server split):</p>
18
- <div class="language-text codeBlockContainer_crgn theme-code-block" style="--prism-color:#000000;--prism-background-color:#ffffff"><div class="codeBlockContent__42J"><pre tabindex="0" class="prism-code language-text codeBlock_CnLD thin-scrollbar" style="color:#000000;background-color:#ffffff"><code class="codeBlockLines_sJEA"><span class="token-line" style="color:#000000"><span class="token plain">my-app/</span><br></span><span class="token-line" style="color:#000000"><span class="token plain">├── server/</span><br></span><span class="token-line" style="color:#000000"><span class="token plain">│ ├── index.ts # backend entry point (AppKit)</span><br></span><span class="token-line" style="color:#000000"><span class="token plain">│ └── .env # optional local dev env vars (do not commit)</span><br></span><span class="token-line" style="color:#000000"><span class="token plain">├── client/</span><br></span><span class="token-line" style="color:#000000"><span class="token plain">│ ├── index.html</span><br></span><span class="token-line" style="color:#000000"><span class="token plain">│ ├── vite.config.ts</span><br></span><span class="token-line" style="color:#000000"><span class="token plain">│ └── src/</span><br></span><span class="token-line" style="color:#000000"><span class="token plain">│ ├── main.tsx</span><br></span><span class="token-line" style="color:#000000"><span class="token plain">│ └── App.tsx</span><br></span><span class="token-line" style="color:#000000"><span class="token plain">├── config/</span><br></span><span class="token-line" style="color:#000000"><span class="token plain">│ └── queries/</span><br></span><span class="token-line" style="color:#000000"><span class="token plain">│ └── my_query.sql</span><br></span><span class="token-line" style="color:#000000"><span class="token plain">├── app.yaml</span><br></span><span class="token-line" style="color:#000000"><span class="token plain">├── package.json</span><br></span><span class="token-line" style="color:#000000"><span class="token plain">└── tsconfig.json</span><br></span></code></pre></div></div>
19
- <h3 class="anchor anchorTargetStickyNavbar_scV4" id="layout-rationale">Layout rationale<a href="#layout-rationale" class="hash-link" aria-label="Direct link to Layout rationale" title="Direct link to Layout rationale" translate="no">​</a></h3>
20
- <p>The AppKit <code>server()</code> plugin automatically serves:</p>
21
- <ul>
22
- <li class=""><strong>Dev</strong>: Vite dev server (HMR) from <code>client/</code></li>
23
- <li class=""><strong>Prod</strong>: static files from <code>client/dist</code> (built by Vite)</li>
24
- </ul>
25
- <h2 class="anchor anchorTargetStickyNavbar_scV4" id="project-scaffolding">Project scaffolding<a href="#project-scaffolding" class="hash-link" aria-label="Direct link to Project scaffolding" title="Direct link to Project scaffolding" translate="no">​</a></h2>
26
- <h3 class="anchor anchorTargetStickyNavbar_scV4" id="packagejson"><code>package.json</code><a href="#packagejson" class="hash-link" aria-label="Direct link to packagejson" title="Direct link to packagejson" translate="no">​</a></h3>
27
- <div class="language-json codeBlockContainer_crgn theme-code-block" style="--prism-color:#000000;--prism-background-color:#ffffff"><div class="codeBlockContent__42J"><pre tabindex="0" class="prism-code language-json codeBlock_CnLD thin-scrollbar" style="color:#000000;background-color:#ffffff"><code class="codeBlockLines_sJEA"><span class="token-line" style="color:#000000"><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;name&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;my-app&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;private&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token boolean">true</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;version&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;0.0.0&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;type&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;module&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;scripts&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;dev&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;NODE_ENV=development tsx watch server/index.ts&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;build&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;npm run build:server &amp;&amp; npm run build:client&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;build:server&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;tsdown --out-dir build server/index.ts&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;build:client&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;tsc -b &amp;&amp; vite build --config client/vite.config.ts&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;start&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;node build/index.mjs&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;dependencies&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;@databricks/appkit&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;^0.1.2&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;@databricks/appkit-ui&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;^0.1.2&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;react&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;^19.2.3&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;react-dom&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;^19.2.3&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;devDependencies&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;@types/node&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;^20.0.0&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;@types/react&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;^19.0.0&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;@types/react-dom&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;^19.0.0&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;@vitejs/plugin-react&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;^5.1.1&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;tsdown&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;^0.15.7&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;tsx&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;^4.19.0&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;typescript&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;~5.6.0&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;vite&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;^7.2.4&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><br></span></code></pre></div></div>
28
- <h3 class="anchor anchorTargetStickyNavbar_scV4" id="clientindexhtml"><code>client/index.html</code><a href="#clientindexhtml" class="hash-link" aria-label="Direct link to clientindexhtml" title="Direct link to clientindexhtml" translate="no">​</a></h3>
29
- <div class="language-html codeBlockContainer_crgn theme-code-block" style="--prism-color:#000000;--prism-background-color:#ffffff"><div class="codeBlockContent__42J"><pre tabindex="0" class="prism-code language-html codeBlock_CnLD thin-scrollbar" style="color:#000000;background-color:#ffffff"><code class="codeBlockLines_sJEA"><span class="token-line" style="color:#000000"><span class="token doctype punctuation" style="color:rgb(4, 81, 165)">&lt;!</span><span class="token doctype doctype-tag">doctype</span><span class="token doctype"> </span><span class="token doctype name">html</span><span class="token doctype punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag" style="color:rgb(128, 0, 0)">html</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">lang</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">en</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag" style="color:rgb(128, 0, 0)">head</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag" style="color:rgb(128, 0, 0)">meta</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">charset</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">UTF-8</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">/&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag" style="color:rgb(128, 0, 0)">meta</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">name</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">viewport</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">content</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">width=device-width, initial-scale=1.0</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">/&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag" style="color:rgb(128, 0, 0)">title</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain">My App</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag" style="color:rgb(128, 0, 0)">title</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag" style="color:rgb(128, 0, 0)">head</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag" style="color:rgb(128, 0, 0)">body</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag" style="color:rgb(128, 0, 0)">div</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">id</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">root</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag" style="color:rgb(128, 0, 0)">div</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag" style="color:rgb(128, 0, 0)">script</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">type</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">module</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">src</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">/src/main.tsx</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token script"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag" style="color:rgb(128, 0, 0)">script</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag" style="color:rgb(128, 0, 0)">body</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag" style="color:rgb(128, 0, 0)">html</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><br></span></code></pre></div></div>
30
- <h3 class="anchor anchorTargetStickyNavbar_scV4" id="clientsrcmaintsx"><code>client/src/main.tsx</code><a href="#clientsrcmaintsx" class="hash-link" aria-label="Direct link to clientsrcmaintsx" title="Direct link to clientsrcmaintsx" translate="no">​</a></h3>
31
- <div class="language-tsx codeBlockContainer_crgn theme-code-block" style="--prism-color:#000000;--prism-background-color:#ffffff"><div class="codeBlockContent__42J"><pre tabindex="0" class="prism-code language-tsx codeBlock_CnLD thin-scrollbar" style="color:#000000;background-color:#ffffff"><code class="codeBlockLines_sJEA"><span class="token-line" style="color:#000000"><span class="token keyword" style="color:rgb(0, 0, 255)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">StrictMode</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;react&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token keyword" style="color:rgb(0, 0, 255)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token imports"> createRoot </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;react-dom/client&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token keyword" style="color:rgb(0, 0, 255)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">App</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;./App&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token function" style="color:rgb(0, 0, 255)">createRoot</span><span class="token punctuation" style="color:rgb(4, 81, 165)">(</span><span class="token dom variable" style="color:rgb(9, 134, 88)">document</span><span class="token punctuation" style="color:rgb(4, 81, 165)">.</span><span class="token method function property-access" style="color:rgb(0, 0, 255)">getElementById</span><span class="token punctuation" style="color:rgb(4, 81, 165)">(</span><span class="token string" style="color:rgb(163, 21, 21)">&quot;root&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">)</span><span class="token operator" style="color:rgb(0, 0, 0)">!</span><span class="token punctuation" style="color:rgb(4, 81, 165)">)</span><span class="token punctuation" style="color:rgb(4, 81, 165)">.</span><span class="token method function property-access" style="color:rgb(0, 0, 255)">render</span><span class="token punctuation" style="color:rgb(4, 81, 165)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">StrictMode</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">App</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">StrictMode</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token punctuation" style="color:rgb(4, 81, 165)">)</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><br></span></code></pre></div></div>
32
- <h3 class="anchor anchorTargetStickyNavbar_scV4" id="clientsrcapptsx-minimal"><code>client/src/App.tsx</code> (Minimal)<a href="#clientsrcapptsx-minimal" class="hash-link" aria-label="Direct link to clientsrcapptsx-minimal" title="Direct link to clientsrcapptsx-minimal" translate="no">​</a></h3>
33
- <div class="language-tsx codeBlockContainer_crgn theme-code-block" style="--prism-color:#000000;--prism-background-color:#ffffff"><div class="codeBlockContent__42J"><pre tabindex="0" class="prism-code language-tsx codeBlock_CnLD thin-scrollbar" style="color:#000000;background-color:#ffffff"><code class="codeBlockLines_sJEA"><span class="token-line" style="color:#000000"><span class="token keyword" style="color:rgb(0, 0, 255)">export</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">default</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(0, 0, 255)">App</span><span class="token punctuation" style="color:rgb(4, 81, 165)">(</span><span class="token punctuation" style="color:rgb(4, 81, 165)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag" style="color:rgb(128, 0, 0)">div</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">className</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">p-8</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag" style="color:rgb(128, 0, 0)">h1</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">className</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">text-2xl font-bold</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text">My App</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag" style="color:rgb(128, 0, 0)">h1</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag" style="color:rgb(128, 0, 0)">div</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">)</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><br></span></code></pre></div></div>
34
- <h3 class="anchor anchorTargetStickyNavbar_scV4" id="clientviteconfigts"><code>client/vite.config.ts</code><a href="#clientviteconfigts" class="hash-link" aria-label="Direct link to clientviteconfigts" title="Direct link to clientviteconfigts" translate="no">​</a></h3>
35
- <div class="language-ts codeBlockContainer_crgn theme-code-block" style="--prism-color:#000000;--prism-background-color:#ffffff"><div class="codeBlockContent__42J"><pre tabindex="0" class="prism-code language-ts codeBlock_CnLD thin-scrollbar" style="color:#000000;background-color:#ffffff"><code class="codeBlockLines_sJEA"><span class="token-line" style="color:#000000"><span class="token keyword" style="color:rgb(0, 0, 255)">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"> defineConfig </span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;vite&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token keyword" style="color:rgb(0, 0, 255)">import</span><span class="token plain"> react </span><span class="token keyword" style="color:rgb(0, 0, 255)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;@vitejs/plugin-react&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token keyword" style="color:rgb(0, 0, 255)">export</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">default</span><span class="token plain"> </span><span class="token function" style="color:rgb(0, 0, 255)">defineConfig</span><span class="token punctuation" style="color:rgb(4, 81, 165)">(</span><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> plugins</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">[</span><span class="token function" style="color:rgb(0, 0, 255)">react</span><span class="token punctuation" style="color:rgb(4, 81, 165)">(</span><span class="token punctuation" style="color:rgb(4, 81, 165)">)</span><span class="token punctuation" style="color:rgb(4, 81, 165)">]</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token punctuation" style="color:rgb(4, 81, 165)">)</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><br></span></code></pre></div></div>
36
- <h3 class="anchor anchorTargetStickyNavbar_scV4" id="tsconfigjson"><code>tsconfig.json</code><a href="#tsconfigjson" class="hash-link" aria-label="Direct link to tsconfigjson" title="Direct link to tsconfigjson" translate="no">​</a></h3>
37
- <div class="language-json codeBlockContainer_crgn theme-code-block" style="--prism-color:#000000;--prism-background-color:#ffffff"><div class="codeBlockContent__42J"><pre tabindex="0" class="prism-code language-json codeBlock_CnLD thin-scrollbar" style="color:#000000;background-color:#ffffff"><code class="codeBlockLines_sJEA"><span class="token-line" style="color:#000000"><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;compilerOptions&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;target&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;ES2022&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;lib&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">[</span><span class="token string" style="color:rgb(163, 21, 21)">&quot;ES2022&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;DOM&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;DOM.Iterable&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">]</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;module&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;ESNext&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;moduleResolution&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;bundler&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;jsx&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;react-jsx&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;strict&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token boolean">true</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;skipLibCheck&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token boolean">true</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;noEmit&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token boolean">true</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;allowImportingTsExtensions&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token boolean">true</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;verbatimModuleSyntax&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token boolean">true</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;include&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">[</span><span class="token string" style="color:rgb(163, 21, 21)">&quot;server&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;client/src&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><br></span></code></pre></div></div>
38
- <h3 class="anchor anchorTargetStickyNavbar_scV4" id="serverindexts"><code>server/index.ts</code><a href="#serverindexts" class="hash-link" aria-label="Direct link to serverindexts" title="Direct link to serverindexts" translate="no">​</a></h3>
39
- <div class="language-ts codeBlockContainer_crgn theme-code-block" style="--prism-color:#000000;--prism-background-color:#ffffff"><div class="codeBlockContent__42J"><pre tabindex="0" class="prism-code language-ts codeBlock_CnLD thin-scrollbar" style="color:#000000;background-color:#ffffff"><code class="codeBlockLines_sJEA"><span class="token-line" style="color:#000000"><span class="token keyword" style="color:rgb(0, 0, 255)">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"> createApp</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"> server </span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;@databricks/appkit&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token keyword" style="color:rgb(0, 0, 255)">await</span><span class="token plain"> </span><span class="token function" style="color:rgb(0, 0, 255)">createApp</span><span class="token punctuation" style="color:rgb(4, 81, 165)">(</span><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> plugins</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">[</span><span class="token function" style="color:rgb(0, 0, 255)">server</span><span class="token punctuation" style="color:rgb(4, 81, 165)">(</span><span class="token punctuation" style="color:rgb(4, 81, 165)">)</span><span class="token punctuation" style="color:rgb(4, 81, 165)">]</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token punctuation" style="color:rgb(4, 81, 165)">)</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><br></span></code></pre></div></div>
40
- <h2 class="anchor anchorTargetStickyNavbar_scV4" id="running-the-app">Running the app<a href="#running-the-app" class="hash-link" aria-label="Direct link to Running the app" title="Direct link to Running the app" translate="no">​</a></h2>
41
- <div class="language-bash codeBlockContainer_crgn theme-code-block" style="--prism-color:#000000;--prism-background-color:#ffffff"><div class="codeBlockContent__42J"><pre tabindex="0" class="prism-code language-bash codeBlock_CnLD thin-scrollbar" style="color:#000000;background-color:#ffffff"><code class="codeBlockLines_sJEA"><span class="token-line" style="color:#000000"><span class="token plain"># Install dependencies</span><br></span><span class="token-line" style="color:#000000"><span class="token plain">npm install</span><br></span><span class="token-line" style="color:#000000"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"># Development (starts backend + Vite dev server)</span><br></span><span class="token-line" style="color:#000000"><span class="token plain">npm run dev</span><br></span><span class="token-line" style="color:#000000"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"># Production build</span><br></span><span class="token-line" style="color:#000000"><span class="token plain">npm run build</span><br></span><span class="token-line" style="color:#000000"><span class="token plain">npm start</span><br></span></code></pre></div></div>
42
- <h2 class="anchor anchorTargetStickyNavbar_scV4" id="integrating-into-an-existing-app">Integrating into an existing app<a href="#integrating-into-an-existing-app" class="hash-link" aria-label="Direct link to Integrating into an existing app" title="Direct link to Integrating into an existing app" translate="no">​</a></h2>
43
- <p>If you already have a React/Vite app and want to add AppKit:</p>
44
- <h3 class="anchor anchorTargetStickyNavbar_scV4" id="1-install-dependencies">1. Install dependencies<a href="#1-install-dependencies" class="hash-link" aria-label="Direct link to 1. Install dependencies" title="Direct link to 1. Install dependencies" translate="no">​</a></h3>
45
- <div class="language-bash codeBlockContainer_crgn theme-code-block" style="--prism-color:#000000;--prism-background-color:#ffffff"><div class="codeBlockContent__42J"><pre tabindex="0" class="prism-code language-bash codeBlock_CnLD thin-scrollbar" style="color:#000000;background-color:#ffffff"><code class="codeBlockLines_sJEA"><span class="token-line" style="color:#000000"><span class="token plain">npm install @databricks/appkit @databricks/appkit-ui react react-dom</span><br></span><span class="token-line" style="color:#000000"><span class="token plain">npm install -D tsx tsdown vite @vitejs/plugin-react typescript</span><br></span></code></pre></div></div>
46
- <p>If you don&#x27;t already have a <code>client/</code> folder, create one and move your Vite app into it:</p>
47
- <ul>
48
- <li class="">Move <code>index.html</code> → <code>client/index.html</code></li>
49
- <li class="">Move <code>vite.config.ts</code> → <code>client/vite.config.ts</code></li>
50
- <li class="">Move <code>src/</code> → <code>client/src/</code></li>
51
- </ul>
52
- <h3 class="anchor anchorTargetStickyNavbar_scV4" id="2-create-serverindexts-new-file">2. Create <code>server/index.ts</code> (New File)<a href="#2-create-serverindexts-new-file" class="hash-link" aria-label="Direct link to 2-create-serverindexts-new-file" title="Direct link to 2-create-serverindexts-new-file" translate="no">​</a></h3>
53
- <div class="language-ts codeBlockContainer_crgn theme-code-block" style="--prism-color:#000000;--prism-background-color:#ffffff"><div class="codeBlockContent__42J"><pre tabindex="0" class="prism-code language-ts codeBlock_CnLD thin-scrollbar" style="color:#000000;background-color:#ffffff"><code class="codeBlockLines_sJEA"><span class="token-line" style="color:#000000"><span class="token keyword" style="color:rgb(0, 0, 255)">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"> createApp</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"> server </span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;@databricks/appkit&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token keyword" style="color:rgb(0, 0, 255)">await</span><span class="token plain"> </span><span class="token function" style="color:rgb(0, 0, 255)">createApp</span><span class="token punctuation" style="color:rgb(4, 81, 165)">(</span><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> plugins</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">[</span><span class="token function" style="color:rgb(0, 0, 255)">server</span><span class="token punctuation" style="color:rgb(4, 81, 165)">(</span><span class="token punctuation" style="color:rgb(4, 81, 165)">)</span><span class="token punctuation" style="color:rgb(4, 81, 165)">]</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token punctuation" style="color:rgb(4, 81, 165)">)</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><br></span></code></pre></div></div>
54
- <h3 class="anchor anchorTargetStickyNavbar_scV4" id="3-update-packagejson-scripts">3. Update <code>package.json</code> Scripts<a href="#3-update-packagejson-scripts" class="hash-link" aria-label="Direct link to 3-update-packagejson-scripts" title="Direct link to 3-update-packagejson-scripts" translate="no">​</a></h3>
55
- <div class="language-json codeBlockContainer_crgn theme-code-block" style="--prism-color:#000000;--prism-background-color:#ffffff"><div class="codeBlockContent__42J"><pre tabindex="0" class="prism-code language-json codeBlock_CnLD thin-scrollbar" style="color:#000000;background-color:#ffffff"><code class="codeBlockLines_sJEA"><span class="token-line" style="color:#000000"><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;scripts&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;dev&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;NODE_ENV=development tsx watch server/index.ts&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;build&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;npm run build:server &amp;&amp; npm run build:client&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;build:server&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;tsdown --out-dir build server/index.ts&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;build:client&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;tsc -b &amp;&amp; vite build --config client/vite.config.ts&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token property">&quot;start&quot;</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;node build/index.mjs&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><br></span></code></pre></div></div>
56
- <h3 class="anchor anchorTargetStickyNavbar_scV4" id="4-complete-setup">4. Complete setup<a href="#4-complete-setup" class="hash-link" aria-label="Direct link to 4. Complete setup" title="Direct link to 4. Complete setup" translate="no">​</a></h3>
57
- <p>AppKit&#x27;s server plugin will automatically serve your Vite app in dev mode and <code>client/dist</code> in production. If your Vite app must stay at the repo root (no <code>client/</code> folder), AppKit can still work, but the recommended layout is <code>client/</code> + <code>server/</code>.</p>
58
- <h2 class="anchor anchorTargetStickyNavbar_scV4" id="adding-analytics-to-an-existing-app">Adding analytics to an existing app<a href="#adding-analytics-to-an-existing-app" class="hash-link" aria-label="Direct link to Adding analytics to an existing app" title="Direct link to Adding analytics to an existing app" translate="no">​</a></h2>
59
- <p>To add SQL query execution capabilities:</p>
60
- <div class="language-ts codeBlockContainer_crgn theme-code-block" style="--prism-color:#000000;--prism-background-color:#ffffff"><div class="codeBlockContent__42J"><pre tabindex="0" class="prism-code language-ts codeBlock_CnLD thin-scrollbar" style="color:#000000;background-color:#ffffff"><code class="codeBlockLines_sJEA"><span class="token-line" style="color:#000000"><span class="token comment" style="color:rgb(0, 128, 0)">// server/index.ts</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token keyword" style="color:rgb(0, 0, 255)">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"> createApp</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"> server</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"> analytics </span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;@databricks/appkit&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token keyword" style="color:rgb(0, 0, 255)">await</span><span class="token plain"> </span><span class="token function" style="color:rgb(0, 0, 255)">createApp</span><span class="token punctuation" style="color:rgb(4, 81, 165)">(</span><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> plugins</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">[</span><span class="token function" style="color:rgb(0, 0, 255)">server</span><span class="token punctuation" style="color:rgb(4, 81, 165)">(</span><span class="token punctuation" style="color:rgb(4, 81, 165)">)</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"> </span><span class="token function" style="color:rgb(0, 0, 255)">analytics</span><span class="token punctuation" style="color:rgb(4, 81, 165)">(</span><span class="token punctuation" style="color:rgb(4, 81, 165)">)</span><span class="token punctuation" style="color:rgb(4, 81, 165)">]</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token punctuation" style="color:rgb(4, 81, 165)">)</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><br></span></code></pre></div></div>
61
- <p>Then create <code>config/queries/</code> and add your <code>.sql</code> files.</p>
62
- <h2 class="anchor anchorTargetStickyNavbar_scV4" id="see-also">See also<a href="#see-also" class="hash-link" aria-label="Direct link to See also" title="Direct link to See also" translate="no">​</a></h2>
63
- <ul>
64
- <li class=""><a class="" href="/appkit/docs/development/local-development">Local development</a> - Running the dev server</li>
65
- <li class=""><a class="" href="/appkit/docs/configuration">Configuration</a> - Environment variables</li>
66
- <li class=""><a class="" href="/appkit/docs/plugins/">Plugins</a> - Plugin configuration</li>
67
- </ul></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col noPrint_Z6Q_"><a href="https://github.com/databricks/appkit/edit/main/docs/docs/development/project-setup.md" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_kMm5" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_mnLK"></div></div></footer></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/appkit/docs/development/remote-bridge"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Remote Bridge</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/appkit/docs/development/type-generation"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Type generation</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_xfIk thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#canonical-project-layout" class="table-of-contents__link toc-highlight">Canonical project layout</a><ul><li><a href="#layout-rationale" class="table-of-contents__link toc-highlight">Layout rationale</a></li></ul></li><li><a href="#project-scaffolding" class="table-of-contents__link toc-highlight">Project scaffolding</a><ul><li><a href="#packagejson" class="table-of-contents__link toc-highlight"><code>package.json</code></a></li><li><a href="#clientindexhtml" class="table-of-contents__link toc-highlight"><code>client/index.html</code></a></li><li><a href="#clientsrcmaintsx" class="table-of-contents__link toc-highlight"><code>client/src/main.tsx</code></a></li><li><a href="#clientsrcapptsx-minimal" class="table-of-contents__link toc-highlight"><code>client/src/App.tsx</code> (Minimal)</a></li><li><a href="#clientviteconfigts" class="table-of-contents__link toc-highlight"><code>client/vite.config.ts</code></a></li><li><a href="#tsconfigjson" class="table-of-contents__link toc-highlight"><code>tsconfig.json</code></a></li><li><a href="#serverindexts" class="table-of-contents__link toc-highlight"><code>server/index.ts</code></a></li></ul></li><li><a href="#running-the-app" class="table-of-contents__link toc-highlight">Running the app</a></li><li><a href="#integrating-into-an-existing-app" class="table-of-contents__link toc-highlight">Integrating into an existing app</a><ul><li><a href="#1-install-dependencies" class="table-of-contents__link toc-highlight">1. Install dependencies</a></li><li><a href="#2-create-serverindexts-new-file" class="table-of-contents__link toc-highlight">2. Create <code>server/index.ts</code> (New File)</a></li><li><a href="#3-update-packagejson-scripts" class="table-of-contents__link toc-highlight">3. Update <code>package.json</code> Scripts</a></li><li><a href="#4-complete-setup" class="table-of-contents__link toc-highlight">4. Complete setup</a></li></ul></li><li><a href="#adding-analytics-to-an-existing-app" class="table-of-contents__link toc-highlight">Adding analytics to an existing app</a></li><li><a href="#see-also" class="table-of-contents__link toc-highlight">See also</a></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Docs</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/appkit/docs/">Getting started</a></li><li class="footer__item"><a class="footer__link-item" href="/appkit/docs/api/">API reference</a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/appkit/contributing">Contributing</a></li><li class="footer__item"><a href="https://github.com/databricks/appkit" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_miaU"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://docs.databricks.com/aws/en/dev-tools/databricks-apps/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Databricks Apps docs<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_miaU"><use href="#theme-svg-external-link"></use></svg></a></li><li class="footer__item"><a href="https://github.com/databricks/cli" target="_blank" rel="noopener noreferrer" class="footer__link-item">Databricks CLI<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_miaU"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2026 Databricks, Inc.</div></div></div></footer></div>
68
- </body>
69
- </html>
package/docs/docs/development/remote-bridge/index.html DELETED
@@ -1,76 +0,0 @@
1
- <!doctype html>
2
- <html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-development/remote-bridge" data-has-hydrated="false">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="generator" content="Docusaurus v3.9.2">
6
- <title data-rh="true">Remote Bridge | AppKit</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://databricks.github.io/appkit/docs/development/remote-bridge"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="Databricks Apps, Node.js, React.js, SDK, TypeScript, SQL, Databricks, AI, full-stack, development"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Remote Bridge | AppKit"><meta data-rh="true" name="description" content="Remote bridge allows you to develop against a deployed backend while keeping your UI and queries local. This is useful for testing against production data or debugging deployed backend code without redeploying your app."><meta data-rh="true" property="og:description" content="Remote bridge allows you to develop against a deployed backend while keeping your UI and queries local. This is useful for testing against production data or debugging deployed backend code without redeploying your app."><link data-rh="true" rel="icon" href="/appkit/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://databricks.github.io/appkit/docs/development/remote-bridge"><link data-rh="true" rel="alternate" href="https://databricks.github.io/appkit/docs/development/remote-bridge" hreflang="en"><link data-rh="true" rel="alternate" href="https://databricks.github.io/appkit/docs/development/remote-bridge" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Development","item":"https://databricks.github.io/appkit/docs/category/development"},{"@type":"ListItem","position":2,"name":"Remote Bridge","item":"https://databricks.github.io/appkit/docs/development/remote-bridge"}]}</script><link rel="stylesheet" href="/appkit/assets/css/styles.36a38b99.css">
7
- <script src="/appkit/assets/js/runtime~main.05f114de.js" defer="defer"></script>
8
- <script src="/appkit/assets/js/main.215573eb.js" defer="defer"></script>
9
- </head>
10
- <body class="navigation-with-keyboard">
11
- <svg style="display: none;"><defs>
12
- <symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
13
- </defs></svg>
14
- <script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")),document.documentElement.setAttribute("data-theme-choice",t||"system")}(),function(){try{const n=new URLSearchParams(window.location.search).entries();for(var[t,e]of n)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script><div id="__docusaurus"><link rel="preload" as="image" href="/appkit/img/logo.png"><div role="region" aria-label="Skip to main content"><a class="skipToContent_R3I2" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><div class="theme-announcement-bar announcementBar_Upl7" style="background-color:#f0f0f0;color:#000000" role="banner"><div class="announcementBarPlaceholder_Lvio"></div><div class="content_vq0X announcementBarContent_FIMQ">⚠️ AppKit is in an early development phase and is subject to change without notice. <strong>DO NOT</strong> use in production environments.</div><button type="button" aria-label="Close" class="clean-btn close closeButton_J8WU announcementBarClose_jD94"><svg viewBox="0 0 15 15" width="14" height="14"><g stroke="currentColor" stroke-width="3.1"><path d="M.75.75l13.5 13.5M14.25.75L.75 14.25"></path></g></svg></button></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/appkit/"><div class="navbar__logo"><img src="/appkit/img/logo.png" alt="AppKit" class="themedComponent_hkXO themedComponent--light_BgK8"><img src="/appkit/img/logo.png" alt="AppKit" class="themedComponent_hkXO themedComponent--dark_RKPt"></div><b class="navbar__title text--truncate">AppKit</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/appkit/docs/">Documentation</a><a class="navbar__item navbar__link" href="/appkit/contributing">Contributing</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/databricks/appkit" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_miaU"><use href="#theme-svg-external-link"></use></svg></a><div class="toggle_eFYw colorModeToggle_EPbi"><button class="clean-btn toggleButton_HRKp toggleButtonDisabled_bICu" type="button" disabled="" title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_brDO lightToggleIcon_vxPA"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_brDO darkToggleIcon_PZNO"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_brDO systemToggleIcon_A7x6"><path fill="currentColor" d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"></path></svg></button></div><div class="navbarSearchContainer_cVhq"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input id="search_input_react" type="search" placeholder="Loading..." aria-label="Search" class="navbar__search-input search-bar" disabled=""></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper__Y_W"><div class="docsWrapper_cIfN"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_xQFv" type="button"></button><div class="docRoot_FHtD"><aside class="theme-doc-sidebar-container docSidebarContainer_dvCd"><div class="sidebarViewport_GeRf"><div class="sidebar_T8N1"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_uyE9 menuWithAnnouncementBar_Bucd"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/"><span title="Getting started" class="linkLabel_hZzm">Getting started</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/app-management"><span title="App management" class="linkLabel_hZzm">App management</span></a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_P6CU menu__link menu__link--sublist" href="/appkit/docs/plugins/"><span title="Plugins" class="categoryLinkLabel_ShmP">Plugins</span></a><button aria-label="Collapse sidebar category &#x27;Plugins&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/plugins/server"><span title="Server plugin" class="linkLabel_hZzm">Server plugin</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/plugins/analytics"><span title="Analytics plugin" class="linkLabel_hZzm">Analytics plugin</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/plugins/lakebase"><span title="Lakebase plugin" class="linkLabel_hZzm">Lakebase plugin</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/plugins/execution-context"><span title="Execution context" class="linkLabel_hZzm">Execution context</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/plugins/plugin-management"><span title="Plugin management" class="linkLabel_hZzm">Plugin management</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/plugins/custom-plugins"><span title="Creating custom plugins" class="linkLabel_hZzm">Creating custom plugins</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/plugins/caching"><span title="Caching" class="linkLabel_hZzm">Caching</span></a></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/architecture"><span title="Architecture" class="linkLabel_hZzm">Architecture</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/configuration"><span title="Configuration" class="linkLabel_hZzm">Configuration</span></a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_P6CU menu__link menu__link--sublist menu__link--active" href="/appkit/docs/category/development"><span title="Development" class="categoryLinkLabel_ShmP">Development</span></a><button aria-label="Collapse sidebar category &#x27;Development&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/local-development"><span title="Local development" class="linkLabel_hZzm">Local development</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/ai-assisted-development"><span title="AI-Assisted development" class="linkLabel_hZzm">AI-Assisted development</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/"><span title="Development" class="linkLabel_hZzm">Development</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/appkit/docs/development/remote-bridge"><span title="Remote Bridge" class="linkLabel_hZzm">Remote Bridge</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/project-setup"><span title="Project setup" class="linkLabel_hZzm">Project setup</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/type-generation"><span title="Type generation" class="linkLabel_hZzm">Type generation</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/llm-guide"><span title="LLM Guide" class="linkLabel_hZzm">LLM Guide</span></a></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/core-principles"><span title="Core principles" class="linkLabel_hZzm">Core principles</span></a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="categoryLink_P6CU menu__link menu__link--sublist" href="/appkit/docs/api/"><span title="API reference" class="categoryLinkLabel_ShmP">API reference</span></a><button aria-label="Expand sidebar category &#x27;API reference&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></nav></div></div></aside><main class="docMainContainer_P5br"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_poBZ"><div class="docItemContainer_TdBg"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_bEIa" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/appkit/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_sma7"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/appkit/docs/category/development"><span>Development</span></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">Remote Bridge</span></li></ul></nav><div class="tocCollapsible_gJxE theme-doc-toc-mobile tocMobile_ZHYV"><button type="button" class="clean-btn tocCollapsibleButton_uxuR">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Remote Bridge</h1></header>
15
- <h2 class="anchor anchorTargetStickyNavbar_scV4" id="prerequisites">Prerequisites<a href="#prerequisites" class="hash-link" aria-label="Direct link to Prerequisites" title="Direct link to Prerequisites" translate="no">​</a></h2>
16
- <ul>
17
- <li class=""><a href="https://nodejs.org" target="_blank" rel="noopener noreferrer" class="">Node.js</a> v22+ environment with <code>npm</code></li>
18
- <li class="">Databricks CLI (v0.287.0 or higher): install and configure it according to the <a href="https://docs.databricks.com/aws/en/dev-tools/cli/tutorial" target="_blank" rel="noopener noreferrer" class="">official tutorial</a>.</li>
19
- <li class="">A new Databricks app with AppKit installed. See the <a class="" href="/appkit/docs/#quick-start">Quick start</a> for more details.</li>
20
- </ul>
21
- <p>Remote bridge allows you to develop against a deployed backend while keeping your UI and queries local. This is useful for testing against production data or debugging deployed backend code without redeploying your app.</p>
22
- <h2 class="anchor anchorTargetStickyNavbar_scV4" id="when-to-use-remote-bridge">When to use Remote Bridge<a href="#when-to-use-remote-bridge" class="hash-link" aria-label="Direct link to When to use Remote Bridge" title="Direct link to When to use Remote Bridge" translate="no">​</a></h2>
23
- <p>Use remote bridge when:</p>
24
- <ul>
25
- <li class="">Testing against production data</li>
26
- <li class="">Debugging deployed backend code</li>
27
- <li class="">Developing UI without running backend locally</li>
28
- <li class="">Collaborating with team members on the same backend</li>
29
- </ul>
30
- <h2 class="anchor anchorTargetStickyNavbar_scV4" id="starting-and-stopping-remote-bridge">Starting and stopping Remote Bridge<a href="#starting-and-stopping-remote-bridge" class="hash-link" aria-label="Direct link to Starting and stopping Remote Bridge" title="Direct link to Starting and stopping Remote Bridge" translate="no">​</a></h2>
31
- <p>To start the remote bridge, run the following command:</p>
32
- <div class="language-bash codeBlockContainer_crgn theme-code-block" style="--prism-color:#000000;--prism-background-color:#ffffff"><div class="codeBlockContent__42J"><pre tabindex="0" class="prism-code language-bash codeBlock_CnLD thin-scrollbar" style="color:#000000;background-color:#ffffff"><code class="codeBlockLines_sJEA"><span class="token-line" style="color:#000000"><span class="token plain">databricks apps dev-remote</span><br></span></code></pre></div></div>
33
- <p>The command will:</p>
34
- <ol>
35
- <li class="">
36
- <p>Obtain app name from the context (either <code>app.yml</code> file or user input in the CLI)</p>
37
- </li>
38
- <li class="">
39
- <p>Start a local Vite development server</p>
40
- </li>
41
- <li class="">
42
- <p>Establish a WebSocket bridge to your deployed app</p>
43
- </li>
44
- <li class="">
45
- <p>Provide two URLs:</p>
46
- <ul>
47
- <li class=""><strong>App URL</strong>: Direct link for your own use (<code>&lt;app-url&gt;?dev=true</code>)</li>
48
- <li class=""><strong>Shareable URL</strong>: Link with tunnel ID for sharing with team members (<code>&lt;app-url&gt;?dev=&lt;tunnelId&gt;</code>)</li>
49
- </ul>
50
- </li>
51
- </ol>
52
- <div class="theme-admonition theme-admonition-note admonition_mylv alert alert--secondary"><div class="admonitionHeading_EXDp"><span class="admonitionIcon_a6gq"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg></span>note</div><div class="admonitionContent_mPbZ"><p>For all available options, run:</p><div class="language-bash codeBlockContainer_crgn theme-code-block" style="--prism-color:#000000;--prism-background-color:#ffffff"><div class="codeBlockContent__42J"><pre tabindex="0" class="prism-code language-bash codeBlock_CnLD thin-scrollbar" style="color:#000000;background-color:#ffffff"><code class="codeBlockLines_sJEA"><span class="token-line" style="color:#000000"><span class="token plain">databricks apps dev-remote --help</span><br></span></code></pre></div></div></div></div>
53
- <p>To stop the remote bridge, press <code>Ctrl+C</code> in the terminal.</p>
54
- <h2 class="anchor anchorTargetStickyNavbar_scV4" id="connection-approval">Connection approval<a href="#connection-approval" class="hash-link" aria-label="Direct link to Connection approval" title="Direct link to Connection approval" translate="no">​</a></h2>
55
- <p>When you start remote bridge, every time you open the URL in your browser from a new device, you&#x27;ll be prompted to approve the connection.</p>
56
- <p>You can provide the URL to your team members to allow them to see the app in their browser. You will still need to approve the connection from your side.</p>
57
- <h2 class="anchor anchorTargetStickyNavbar_scV4" id="how-it-works">How it works<a href="#how-it-works" class="hash-link" aria-label="Direct link to How it works" title="Direct link to How it works" translate="no">​</a></h2>
58
- <p>Remote bridge creates a WebSocket bridge between your local Vite dev server and the deployed backend, allowing you to develop UI locally while using the deployed backend.</p>
59
- <!-- -->
60
- <h3 class="anchor anchorTargetStickyNavbar_scV4" id="details">Details<a href="#details" class="hash-link" aria-label="Direct link to Details" title="Direct link to Details" translate="no">​</a></h3>
61
- <ul>
62
- <li class="">The <strong>Browser</strong> connects to the deployed app backend with <code>?dev=true</code> or <code>?dev=&lt;tunnelId&gt;</code> query parameter</li>
63
- <li class="">The <strong>Deployed Backend</strong> proxies UI requests through a WebSocket tunnel (<code>/dev-tunnel</code>) to your local machine</li>
64
- <li class="">The <strong>WebSocket Bridge</strong> (running locally) receives fetch requests and file read requests from the backend</li>
65
- <li class="">The <strong>Local Vite Dev Server</strong> serves the UI files and provides hot module replacement (HMR)</li>
66
- <li class="">The bridge sends responses back through the WebSocket to the backend, which serves them to the browser</li>
67
- </ul>
68
- <h3 class="anchor anchorTargetStickyNavbar_scV4" id="what-gets-hot-reloaded">What gets hot-reloaded<a href="#what-gets-hot-reloaded" class="hash-link" aria-label="Direct link to What gets hot-reloaded" title="Direct link to What gets hot-reloaded" translate="no">​</a></h3>
69
- <p>With remote bridge you get instant hot-reload for:</p>
70
- <ul>
71
- <li class=""><strong>UI Changes</strong> - Any changes to your React/TypeScript/CSS files in the <code>client/</code> directory</li>
72
- <li class=""><strong>Query Files</strong> - SQL files in the <code>config/queries/</code> directory (<code>.sql</code> files only)</li>
73
- </ul>
74
- <p>Backend code is <strong>not</strong> hot-reloaded. You need to redeploy your app to see changes in the backend code.</p></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col noPrint_Z6Q_"><a href="https://github.com/databricks/appkit/edit/main/docs/docs/development/remote-bridge.mdx" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_kMm5" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_mnLK"></div></div></footer></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/appkit/docs/development/"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Development</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/appkit/docs/development/project-setup"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Project setup</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_xfIk thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#prerequisites" class="table-of-contents__link toc-highlight">Prerequisites</a></li><li><a href="#when-to-use-remote-bridge" class="table-of-contents__link toc-highlight">When to use Remote Bridge</a></li><li><a href="#starting-and-stopping-remote-bridge" class="table-of-contents__link toc-highlight">Starting and stopping Remote Bridge</a></li><li><a href="#connection-approval" class="table-of-contents__link toc-highlight">Connection approval</a></li><li><a href="#how-it-works" class="table-of-contents__link toc-highlight">How it works</a><ul><li><a href="#details" class="table-of-contents__link toc-highlight">Details</a></li><li><a href="#what-gets-hot-reloaded" class="table-of-contents__link toc-highlight">What gets hot-reloaded</a></li></ul></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Docs</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/appkit/docs/">Getting started</a></li><li class="footer__item"><a class="footer__link-item" href="/appkit/docs/api/">API reference</a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/appkit/contributing">Contributing</a></li><li class="footer__item"><a href="https://github.com/databricks/appkit" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_miaU"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://docs.databricks.com/aws/en/dev-tools/databricks-apps/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Databricks Apps docs<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_miaU"><use href="#theme-svg-external-link"></use></svg></a></li><li class="footer__item"><a href="https://github.com/databricks/cli" target="_blank" rel="noopener noreferrer" class="footer__link-item">Databricks CLI<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_miaU"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2026 Databricks, Inc.</div></div></div></footer></div>
75
- </body>
76
- </html>