Create a new directory called "client":
Open a new file in that directory called "index.html", and start it off with a nearly empty page and a link to a stylesheet.
Then let's add our stylesheet in a new file, "styles.css". We'll just paste in all the styles we'll need for the tutorial at once for convenience.
aft, pointing at our client directory:
This time you should see aft print out two messages:
Open up the URL for the client in your browser, and you should see the page title from your HTML—off to a good start!
For a sophisticated frontend, we'd probably want to use a full-featured framework with some kind of build step, but to keep things easy for this tutorial, we're going to rely on a single frontend library, Preact, and not worry about supporting older browsers.
Aft doesn't come with its own frontend, so you can just as easily make an app using Vue, React, Flutter, native iOS or Android frameworks, or low-code tools like Bubble.
Let's add our first component in a module script tag, and drop the body tag—we don't need it anymore!
For those who've done some React development before, the use of
html template literals fills a similar role to JSX, but with no build step required.
Refresh the page in your browser and you should still see the greeting!
Next, we'll get started on our app.