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
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:
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.