{"id":9866,"date":"2024-04-02T14:41:16","date_gmt":"2024-04-02T12:41:16","guid":{"rendered":"https:\/\/via-internet.de\/blog\/?p=9866"},"modified":"2024-04-08T11:30:00","modified_gmt":"2024-04-08T09:30:00","slug":"astro-tutorial-working-with-preact","status":"publish","type":"post","link":"https:\/\/via-internet.de\/blog\/2024\/04\/02\/astro-tutorial-working-with-preact\/","title":{"rendered":"Astro Tutorial – Working with Preact"},"content":{"rendered":"\n

TL;DR<\/h2>\n\n\n\n

Code for this tutorial is on Github<\/a><\/p>\n\n\n\n

Starter Project<\/h2>\n\n\n\n

Create Starter<\/h3>\n\n\n\n
\u276f npm create astro@latest \"Tutorial - Working with Preact\"\n...\/21.6.2\/pnpm\/store\/v3\/tmp\/dlx-99714   |  +39 ++++\n...\/21.6.2\/pnpm\/store\/v3\/tmp\/dlx-99714   | Progress: resolved 39, reused 39, downloaded 0, added 39, done\n\n astro   Launch sequence initiated.\n\n      \u25fc  dir Using Tutorial - Working with Preact as project directory\n\n  tmpl   How would you like to start your new project?\n         Empty\n\n    ts   Do you plan to write TypeScript?\n         Yes\n\n   use   How strict should TypeScript be?\n         Strict\n\n  deps   Install dependencies?\n         Yes\n\n   git   Initialize a new git repository?\n         Yes\n\n      \u2714  Project initialized!\n         \u25a0 Template copied\n         \u25a0 TypeScript customized\n         \u25a0 Dependencies installed\n         \u25a0 Git initialized\n\n  next   Liftoff confirmed. Explore your project!\n\n         Enter your project directory using cd \".\/Tutorial - Working with Preact\"\n         Run pnpm dev to start the dev server. CTRL+C to stop.\n         Add frameworks like react or tailwind using astro add.\n\n         Stuck? Join us at https:\/\/astro.build\/chat\n\n\u256d\u2500\u2500\u2500\u2500\u2500\u256e  Houston:\n\u2502 \u25e0 \u25e1 \u25e0  Good luck out there, astronaut! \ud83d\ude80\n\u2570\u2500\u2500\u2500\u2500\u2500\u256f<\/pre>\n\n\n\n
Run Starter<\/h3>\n\n\n\n
\u276f cd \"Tutorial - Working with Preact\"\n\u276f npm run dev\n\n> tutorial---working-with-preact@0.0.1 dev \/Users\/Shared\/CLOUD\/Programmier-Workshops\/Kurse\/Astro\/Einsteiger\/Tutorial - Working with Preact\n> astro dev\n\n\n astro  v4.5.13 ready in 156 ms\n\n\u2503 Local    http:\/\/localhost:4321\/\n\u2503 Network  use --host to expose\n\n14:34:39 watching for file changes...<\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Modify Project Structur and add helper code<\/h2>\n\n\n\n
tsconfig.json<\/h4>\n\n\n\n
{\n  \"extends\": \"astro\/tsconfigs\/strict\",\n  \"compilerOptions\": {\n    \"allowJs\": true,\n    \"strictNullChecks\": true,\n    \"baseUrl\": \".\",\n    \"lib\": [\"es2022\", \"dom\", \"dom.iterable\"],\n    \"paths\": {\n      \"@\/*\": [\"src\/*\"]\n    }\n  },\n  \"exclude\": [\"node_modules\", \"**\/node_modules\/*\", \".vscode\", \"dist\"]\n}\n<\/pre>\n\n\n\n
Replace relative path with reference to path alias in every page<\/h4>\n\n\n\n
import Layout from '..\/..\/layouts\/BlogPost.astro';<\/pre>\n\n\n\n
becomes to <\/p>\n\n\n\n
import Layout from '@\/layouts\/BlogPost.astro';<\/pre>\n\n\n\n
import Layout from '..\/styles\/global.css';<\/pre>\n\n\n\n
becomes to <\/p>\n\n\n\n
import Layout from '@\/styles\/global.css';<\/pre>\n\n\n\n
Install Preact Integration<\/h2>\n\n\n\n
Add integration for preact<\/h3>\n\n\n\n
\u276f npx astro add preact\n\u2714 Resolving packages...\n\n  Astro will run the following command:\n  If you skip this step, you can always run it yourself later\n\n \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\n \u2502 pnpm add @astrojs\/preact@^3.1.2 preact@^10.20.1  \u2502\n \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\n\n\u2714 Continue? \u2026 yes\n\u2714 Installing dependencies...\n\n  Astro will make the following changes to your config file:\n\n \u256d astro.config.mjs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\n \u2502 import { defineConfig } from 'astro\/config';  \u2502\n \u2502                                               \u2502\n \u2502 import preact from \"@astrojs\/preact\";         \u2502\n \u2502                                               \u2502\n \u2502 \/\/ https:\/\/astro.build\/config                 \u2502\n \u2502 export default defineConfig({                 \u2502\n \u2502   integrations: [preact()]                    \u2502\n \u2502 });                                           \u2502\n \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\n\n\u2714 Continue? \u2026 yes\n\n   success  Added the following integration to your project:\n  - @astrojs\/preact\n\n  Astro will make the following changes to your tsconfig.json:\n\n \u256d tsconfig.json \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\n \u2502 {                                                                    \u2502\n \u2502   \"extends\": \"astro\/tsconfigs\/strict\",                               \u2502\n \u2502   \"compilerOptions\": {                                               \u2502\n \u2502     \"allowJs\": true,                                                 \u2502\n \u2502     \"strictNullChecks\": true,                                        \u2502\n \u2502     \"baseUrl\": \".\",                                                  \u2502\n \u2502     \"lib\": [                                                         \u2502\n \u2502       \"es2022\",                                                      \u2502\n \u2502       \"dom\",                                                         \u2502\n \u2502       \"dom.iterable\"                                                 \u2502\n \u2502     ],                                                               \u2502\n \u2502     \"paths\": {                                                       \u2502\n \u2502       \"@\/*\": [                                                       \u2502\n \u2502         \"src\/*\"                                                      \u2502\n \u2502       ]                                                              \u2502\n \u2502     },                                                               \u2502\n \u2502     \"jsx\": \"react-jsx\",                                              \u2502\n \u2502     \"jsxImportSource\": \"preact\"                                      \u2502\n \u2502   },                                                                 \u2502\n \u2502   \"exclude\": [                                                       \u2502\n \u2502     \"node_modules\",                                                  \u2502\n \u2502     \"**\/node_modules\/*\",                                             \u2502\n \u2502     \".vscode\",                                                       \u2502\n \u2502     \"dist\"                                                           \u2502\n \u2502   ]                                                                  \u2502\n \u2502 }                                                                    \u2502\n \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\n\n\u2714 Continue? \u2026 yes\n\n   success  Successfully updated TypeScript settings<\/pre>\n\n\n\n
Install preact\/signale<\/h3>\n\n\n\n
npm install preact\/signal<\/pre>\n\n\n\n
Modify src\/pages\/index.astro<\/h2>\n\n\n\n
---\nimport Counter from \"@\/components\/Counter\";\nimport { signal } from \"@preact\/signals\";\n\nconst count = signal(0);\n---\n\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" \/>\n    <meta name=\"viewport\" content=\"width=device-width\" \/>\n    <meta name=\"generator\" content={Astro.generator} \/>\n    <link rel=\"icon\" type=\"image\/svg+xml\" href=\"\/favicon.svg\" \/>\n    <style>\n      html,\n      body {\n        font-family: system-ui;\n        margin: 0;\n      }\n      body { padding: 2rem; }\n      h1 { text-align: center; }\n    <\/style>\n  <\/head>\n  <body>\n    <main>\n      <h1 style=\"halign:center\">Working with Astro and Preact<\/h1>\n      <Counter count={count} client:visible><h3>Hello, Preact 1!<\/h3><\/Counter>\n      <Counter count={count} client:visible><h3>Hello, Preact 2!<\/h3><\/Counter>\n    <\/main>\n  <\/body>\n<\/html>\n<\/pre>\n\n\n\n
Create Component Counter<\/h2>\n\n\n\n
Create folder src\/components<\/code><\/p>\n\n\n\n
mkdir src\/components<\/pre>\n\n\n\n
Create file Counter.tsx<\/h3>\n\n\n\n
import type { ComponentChildren } from \"preact\";\nimport type { Signal } from \"@preact\/signals\";\nimport { lazy, Suspense } from \"preact\/compat\";\n\nimport \".\/Counter.css\";\n\nconst Message = lazy(async () => import(\".\/Message\"));\nconst Fallback = () => <p>Loading...<\/p>;\n\ntype Props = {\n  children: ComponentChildren;\n  count: Signal<number>;\n};\n\nexport default function Counter({ children, count }: Props) {\n  const add = () => count.value++;\n  const subtract = () => count.value--;\n\n  return (\n    <>\n      <div class=\"counter\">\n        <button onClick={subtract}>-<\/button>\n        <pre>{count}<\/pre>\n        <button onClick={add}>+<\/button>\n      <\/div>\n      <Suspense fallback={Fallback}>\n        <Message>{children}<\/Message>\n      <\/Suspense>\n    <\/>\n  );\n}<\/pre>\n\n\n\n
Create file Counter.css<\/h3>\n\n\n\n
.counter {\n\tdisplay: grid;\n\tfont-size: 2em;\n\tgrid-template-columns: repeat(3, minmax(0, 1fr));\n\tmargin-top: 2em;\n\tplace-items: center;\n}<\/pre>\n\n\n\n
Create Message.tsx<\/h3>\n\n\n\n
import type { ComponentChildren } from 'preact';\nimport '.\/Message.css';\n\nexport default function Message({ children }: { children: ComponentChildren }) {\n\treturn <div class=\"message\">{children}<\/div>;\n}<\/pre>\n\n\n\n
Create Message.css<\/h3>\n\n\n\n
.message {\n\ttext-align: center;\n}<\/pre>\n\n\n\n
Run App<\/h2>\n\n\n\n
npm run dev<\/pre>\n","protected":false},"excerpt":{"rendered":"
TL;DR Code for this tutorial is on Github Starter Project Create Starter Run Starter Modify Project Structur and add helper code tsconfig.json Replace relative path with reference to path alias in every page becomes to becomes to Install Preact Integration Add integration for preact Install preact\/signale Modify src\/pages\/index.astro Create Component Counter Create folder src\/components Create file Counter.tsx Create file Counter.css Create Message.tsx Create Message.css Run App<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[160],"tags":[],"class_list":["post-9866","post","type-post","status-publish","format-standard","hentry","category-astro"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/9866","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/comments?post=9866"}],"version-history":[{"count":7,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/9866\/revisions"}],"predecessor-version":[{"id":9879,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/9866\/revisions\/9879"}],"wp:attachment":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media?parent=9866"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/categories?post=9866"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/tags?post=9866"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}