ScottSpence.com

Scott's Digital Garden.

🤫This is a private post👀

Getting started with Preact and the Preact CLI

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 } isn’t needed

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

1"editor.codeActionsOnSave": {
2 "source.organizeImports": true
3},

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" />

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

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.

1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <title><% preact.title %></title>
6 <meta
7 name="viewport"
8 content="width=device-width,initial-scale=1"
9 />
10 <meta name="mobile-web-app-capable" content="yes" />
11 <meta name="apple-mobile-web-app-capable" content="yes" />
12 <link rel="stylesheet" href="./assets/fonts/fonts.css" />
13 <% preact.headEnd %>
14 </head>
15 <body>
16 <% preact.bodyEnd %>
17 </body>
18</html>

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

1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <title><% preact.title %></title>
6 <meta
7 name="viewport"
8 content="width=device-width,initial-scale=1"
9 />
10 <meta name="mobile-web-app-capable" content="yes" />
11 <meta name="apple-mobile-web-app-capable" content="yes" />
12 <link
13 href="https://fonts.googleapis.com/css2?family=Baloo+Tamma+2:wght@400;700&family=BioRhyme+Expanded:wght@400;700&display=swap"
14 rel="stylesheet"
15 />
16 <% preact.headEnd %>
17 </head>
18 <body>
19 <% preact.bodyEnd %>
20 </body>
21</html>

Back to Top