create-huck

More about Huck

• Documentation about huck.config.js
• About the @finn-no/huck-config module
• Vite

Using frameworks with Huck

The following examples show how to set up a typical Layout with Vite providing hot-reloading.

Svelte

See a complete layout example in the huck-examples repo.

or

See a complete podlet example in the huck-examples repo.

Install dependencies

pnpm add -D svelte @sveltejs/vite-plugin-svelte

Configure Vite

Ensure the following content in vite.config.js

import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  //...
  plugins: [svelte()],
  //...
})

Initialize the client

Ensure the following content in client/main.js

import App from './App.svelte'

const rootEl = document.querySelector('#app')

new App({ target: rootEl })

and create the client/App.svelte file

<script>
let count = 0
const handleClick = () => count += 1
</script>

<button on:click={handleClick}>
  Count is {count}
</button>

Vue

See a complete example in the huck-examples repo.

Install dependencies

pnpm add -D vue @vitejs/plugin-vue

Configure Vite

Ensure the following content in vite.config.js

import vue from '@vitejs/plugin-react'

export default defineConfig({
  //...
  plugins: [vue()],
  //...
})

Initialize the client

Ensure the following content in client/main.js

import { createApp } from 'vue'
import App from './App.vue'

const rootEl = document.querySelector('#app')

createApp(App).mount(rootEl)

and create the client/App.vue file

<script setup>
import { ref } from 'vue'

const count = ref(0)
const handleClick = () => count.value += 1
</script>

<template>
  <button @click="handleClick">
    Count is {{ count }}
  </button>
</template>

React

See a complete example in the huck-examples repo.

Setup

Install dependencies

pnpm add -D react react-dom @vitejs/plugin-react

Configure Vite

Ensure the following content in vite.config.js

import react from '@vitejs/plugin-react'

export default defineConfig({
  //...
  plugins: [react()],
  //...
})

Initialize the client

Ensure the following content in client/main.jsx, and rename any references to main.js into main.jsx.

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'

const rootEl = document.querySelector('#app')

ReactDOM.createRoot(rootEl).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

and create the client/App.jsx file

import { useState } from 'react'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <button onClick={() => setCount((count) => count + 1)}>
        Count is {count}
      </button>
    </>
  )
}

export default App

Get hot-reloading working

The server-emitted HTML must be wrapped by a helper in Vite. The Vite server can be referenced on server.vite, and server is available as an argument to the render hook.

const rootEl = await server.vite.transformIndexHtml(req.url, `<div class="page-container" id="app" ${config}></div>`)
reply.podiumSend(`
  ${$header}
  ${rootEl}
  ${$footer}
`)