Tutorial: Building an app with Preact CLI

[addyosmani]

Now that Preact CLI is listed over on the PWA page, it would be 💯 to give developers a clean walk-through they can follow for building their first app using Preact CLI.

A tutorial could replicate building the Weather PWA with Preact CLI or something quite different if we need an app that is more complex, like something using the Hacker News or Wikipedia APIs.

Draft task list:

• [ ] Decide on the app the tutorial would help you build
• [ ] Decide if the tutorial will cover deploying H/2 Server Push (Firebase static hosting?)
• [ ] Write the app we will show developers how to build and validate it's suitable for the tutorial
• [ ] Draft tutorial. Show folks how to validate features + performance are ✔️ using Lighthouse ⚡️
• [ ] Review (perhaps have some Preact community members try it out?) 🤔
• [ ] Ship it! 🚢

Looping in some folks for their thoughts: @lukeed @kristoferbaxter

[lukeed]

I agree 💯% on this -- a lot of the issues we've been getting are related to documentation & tutorial needs.

What if we made full use of your HNPWA effort & rekindle the HN fever to (re)build apps using all the new CLIs for each framework?

We get the added bonus of being able to compare the CLI-built, fully optimized productions vs their original, already-amazing predecessors.

The "spec" is already decided for HN PWA. I think all, or most, of them are already using H/2 push. Then, imo, the only two items that need to be flushed out are:

1) Use Firebase vs use an Express API server (Twitter Refs: foo and bar)

2) Allow SSR & caching or nah. I'd lean towards nah fam since this is a PWA effort, which leans on "client-side optimizations" personally.

Regarding the last point: learning how to offload crucial operations to your server usefully is most definitely an important lesson.... but may be best for a "Part 2" though.

[hassanbazzi]

This is a fantastic idea. I'm currently preparing a talk about Preact CLI that I'll be giving at a few confs this / next year. The talk is basically a tutorial that teaches how to use the CLI, the dos and don'ts, and how to squeeze the best out of it (async routes, etc...).

I'll share the slides and my talk points when I get a chance to help out with this.

We can also convert https://clidemo.preactjs.com/ to a Getting Started tutorial type of thing, while making it and its codebase a prime example of how to use the CLI.

[developit]

Whoops, I remember reading this issue and then never remembered to come back to it! Sorry about that. This is an awesome idea and I might have a chance to work on some draft content next week. I think Hacker News would be great since it's such a simple API, keeping the focus on the CLI/PWA bits.

[selrond]

I would definitely appreciate that! Currently deciding between preact(-cli) and Gatsby

[johnstonbl01]

Hey there! 👋 Is this still something that you think is needed? If so, I can give it a go.