Front-end development is the area where I feel most out-of-date today. While none of the technologies at play are exactly alien to me, I usually don’t do anything more elaborate than some templated HTML mixed with vanilla javascript plus jquery and bootstrap CSS. But while those sites are functional and even look OK sometimes, they often lack the kind of reactivity that really became table stakes about six years ago. And even if I don’t always need that, they also take a lot of brittle code just to add some of the basic feedback people have come to expect when they use a web application these days.

Most of the world seems to be using React, Angular or Vue for front-end development. A sizable number seem to be opting out of all frameworks and rolling their own equivalents using vanilla javascript. While none of these options seem bad to me, React and Angular seem to each have ties to specific ecosystems that I am not especially invested in. Vue only feels a little bit lighter to me. And I don’t feel opinionated enough to roll my own in vanilla javascript yet.

So in this context, svelte holds significant appeal. Mechanically as you write it, it feels a lot like plain ol' javascript and CSS. It also appears to build sites that carry significantly reduced runtime dependencies next to any of the 3 popular frameworks. The biggest drawback seems to be the need to run the svelte compiler to deploy a site.

Given what certainly feels like a credible server side rendering story with sapper, it feels like a happy balance of a very current stack and relatively low up-front commitment and extremely low runtime cost. So it’s a place I’m happy to start, not having any legacy concerns of my own.

Getting Set Up

Every one of my Linux development systems already has node.js installed on it, so it’s practically no effort to get started from there. When I tried it out on Windows to see if things would work without WSL, all it required was the default 64-bit setup from nodejs.org. In keeping with the spirit of maximizing development convenience, I just opened up a terminal in the same repository I used to build the back-end in the previous post and used degit to pull down a copy of the default svelte template

$ npx degit sveltejs/template frontend
$ cd frontend
$ npm install
$ npm run build

Then I made sure that I had the svelte plugin for JetBrains IDEs installed in pycharm and reopened my backend project in pycharm. Before digging in on any frontend specifics, I made a couple of minor changes to my backend.

I changed my route for / (in main.py) to serve up the index.html from the just-built frontend:

from fastapi.responses import FileResponse

@app.get('/')
def home():
    return FileResponse('frontend/public/index.html')

and added a route after all the other endpoints to serve static files from the node build for my newly generated frontend project:

from fastapi.staticfiles import StaticFiles

app.mount('/', StaticFiles(directory="frontend/public"), name="static")

With that in place, pointing a browser at http://localhost:8000/ showed the Svelte “Hello World” app without disrupting the API I built in the last post. To make this convenient, I added a new project run configuration in pycharm for npm run dev:

run configuration

and made sure to tick the “Allow parallel run” box so that it can be run at the same time as the API server. This makes it easy to start a file watcher that processes my svelte source files into my front end and live reloads any clients that retain a websocket connection to it.

At this point, I took a productive detour into setting up smelte. While it was informative, it did not result in the frontend experience I was hoping for. So for now I’m just going to use tailwind utility classes directly with Svelte. I wrote up how I configured that here.