Getting started with Preact and the Preact CLI

December 31, 2020 • 2 min read

Hey! Thanks for stopping by! Just a word of warning, this post is 5 years old, wow! If there's technical information in here it's more than likely out of date.

For the past couple of weeks now I have been getting familiar with Preact and the Preact CLI.

It’s great, it’s similar to React

The `{ h }` is needed

I was quite hung up on the { h } import, I use the VS Code setting to organise the imports on save.

"editor.codeActionsOnSave": {
  "source.organizeImports": true
},

That stripped out the { h } I was concerned that it would break but then found out it worked fine without it.

preact-cli automatically imports h for you in any files that have JSX, so you can safely remove those imports.

Local fonts added to the assets folder

The way I got local fonts into the project was by creating a fonts.css file and importing that into the template.html file as a link <link rel="stylesheet" href="./assets/fonts/fonts.css" />

@font-face {
  font-family: 'My Local Font';
  src: url('./MyLocalFont.ttf') format('truetype');
}

As I only have the .ttf font file that is all that I have imported.

If you’re using multiple font files then take a look at the CSS Tricks post on it.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title><% preact.title %></title>
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1"
    />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link rel="stylesheet" href="./assets/fonts/fonts.css" />
    <% preact.headEnd %>
  </head>
  <body>
    <% preact.bodyEnd %>
  </body>
</html>

This can also do this with Google fonts, something like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title><% preact.title %></title>
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1"
    />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link
      href="https://fonts.googleapis.com/css2?family=Baloo+Tamma+2:wght@400;700&family=BioRhyme+Expanded:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <% preact.headEnd %>
  </head>
  <body>
    <% preact.bodyEnd %>
  </body>
</html>

There's a reactions leaderboard you can check out too.

Useful? Share it on Bluesky.

✨ View the stats for this post ✨

Sign up for the newsletter

Want to keep up to date with what I'm working on?

Join other developers and sign up for the newsletter.

I care about the protection of your data. Read the Privacy Policy for more info.