This is a complete Sveltekit Template designed to help you release your SvelteKit App on Cloudflare Pages using the following services:
Auth Flow
Prerequisites
PR.yaml action uses docker containers, you'll have to configure the
following Github Action Secrets in a CI environment in order for the Workflow to
run through without errors. Example Values of these can be cound in the .env.ci file.Running this locally
- Create a
.env.developmentfile (you can just copy the.env.examplefile) - Start up the docker containers (
docker-compose up -d) - Run
pnpm prep. This will generate the prisma schema, push it to the DB and seed the PSQL & Thumbor containers - Run the correct prisma generate command
- Push the schma to the local psql db
- Run the
pnpm psql:seedcommand which will generate a admin user and 10 random users. - Start the dev server (
pnpm dev)
Running this in Production
There is a free tier but even the paid tier isn't very expensive.
You'll also have to create the project in Cloudflare and set it up. For the sake of
convenience I've included the cloudflare:init script. You'll have to set up
the .env.production file.
Note: If you look at
createCloudflareProject.js you'll see that the build & publishing configuration
is disabled. This is because the Github Action will take care of that.
Github Actions Environemnts
I've configured the actions using a CI and a PREVIEW environment. The
Variables keys for both are the same (see .env.example). The CI
environment values should use the same values as in the .env.example file, as these
are used to run the e2e tests against the docker containers. The PREVIEW values need
to be set values from the relevant services.
In addition to these you'll have to configure CLOUDFLARE_API_TOKEN and
CLOUDFLARE_ACCOUNT_ID
to enable preview & production publishing. You can optain the CLOUDFLARE_API_TOKEN in
the cloudflare dashboard. Create a new token which allows editing for Cloudflare Pages. Then set
up a Pages Project. The Github Action should then deply accordingly. You can also assign it to a
domain if you use cloudlfare to manage your domains (I highly reccomend this, it makes life so much
easier).
Scripts in package.json
package.json file. The mostly depend on each
other. The naming follows this pattern in general
[COMMAND]:[ACTION]:[ENV]pnpm prisma:gen:dev.
pnpm psql:dump cloudkit-db-dump.sql file.
You can
./cloudkit-db-dump.sql:/docker-entrypoint-initdb.d/init.sql which will initialize
the psql container with those contents on start up every time.pnpm psql:restore cloudkit-db-dump.sql file, if it exists.pnpm test:e2e:dev pnpm clean ./playwright-report, ./.wrangler and
./.svelte-kit folders for a clean slatepnpm prep Data Proxy
As previously mentioned, prisma doesn't a direct connection to Databases form edge functions. You need to create a Data Proxy, which does some prisma magic and then you can use Prisma in Edge Functions. This is why there are two prisma schemas. The "normal" way of defining your data source is this
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
If you're using the Data Proxy, you have to declare it like this
datasource db {
provider = "postgresql"
url = env("DATA_PROXY")
directUrl = env("DATABASE_URL")
}
The DATABASE_URL refers to the standard Database URL and DATA_PROXY
refers to the connection string you generate when creating a
Cloud Prisma Project
- Its free for mostly everything.
Prisma Code Organization
I couldn't find a good way to keep all my prisma relevant code together so I came up with the
following solution. There are two Repository classes. One for managing Users and one
for managing Images. I've split the Prisma code up like this in order to keep the primsa imports
to a bare minimum. All DB Actions I do via these classes and they are called only from the server.
Note: The ImageRepository can interchangebly be used with the local
thumbor container or with Cloudflare's Image Service.
Understanding the PR.yaml Github Action
INSTALL pnpm-lock.yaml and caches themLINT UNIT_TEST vitestE2E_TEST