F1 Championship Stats with PlanetScale and Fermyon Cloud

This is a demonstration of building a full-stack JavaScript application that runs on Fermyon Cloud and connects to a serverless database hosted by PlanetScale.

The demo is adapted from the PlanetScale demo of the serverless database driver with examples for edge functions, and uses two Spin components:

• a Spin component to serve a statically built Next.js UI
• a Spin component written in TypeScript that connects to the database running in PlanetScale

Local development

• Spin
• the Spin JavaScript toolchain
• NPM
• a free PlanetScale account, and a database on the dump in ./database
• a free Fermyon Cloud account

Create an auth.json file using the PlanetScale credentials based on the template in auth-template.json.

Finally, install the dependencies for both the front-end and back-end, then run spin build and spin up:

$ npm install && cd api && npm install
$ spin build && spin up --follow-all

Successfully ran the build command for the Spin components.
Serving http://127.0.0.1:3000
Available Routes:
  ui: http://127.0.0.1:3000 (wildcard)
  api: http://127.0.0.1:3000/data.json

At this point, the application should be available at http://localhost:3000.

Deploying to Fermyon Cloud

Now that the application is built, we can deploy it to Fermyon Cloud:

$ spin deploy
Uploading PlanetScale-F1 version 1.0.0+r1d22c05e...
Deploying...
Waiting for application to become ready............ ready
Available Routes:
  ui: https://planetscale-f1-re4cp0sz.fermyon.app (wildcard)
  api: https://planetscale-f1-re4cp0sz.fermyon.app/data.json

You can check an already deployed instance of this application at https://planetscale-f1-re4cp0sz.fermyon.app.

Credits

This application is based on the demo created by PlanetScale, and is adapted to run on Spin and Fermyon Cloud.

The project is available as open source under the terms of the Apache-2.0 license.