A SvelteKit (Typescript) / Postgres template project that is hopefully easy to use with most of the bells and whistles to get a project up and running.
The project has Lucia pre-installed and configured with Postgres to handle user authentication sessions, so be careful when modifying the database schema.
Vitest is used for unit testing and ESLint (Typescript) is used for linting. These can be run using make test.
Logging is provided by Winston and configured to log to console and files, with auto-rotation set. See src/routes/hooks.server.ts for more information. Please use logger instead of console.log for logging; logs are located in the logs folder.
See the Features section for more information.
NOTE: This project uses Docker to run the Postgres database. Make sure you have Docker installed on your machine and running before starting the project.
- Create a .env file in the root directory of the project and add the following variables:
POSTGRES_USER=PICK A USER NAME (i.e. "project_admin")
POSTGRES_PASSWORD=PICK A PASSWORD (i.e. "this is a super awesome and long password!2#4%6)
POSTGRES_DB=PICK A DATABASE NAME (i.e. "project_db")
POSTGRES_HOST="localhost" # No need to change
POSTGRES_PORT="5432" # No need to change
NODE_ENV="development" # No need to change, unless you are deploying
- Run
make install. This will install the Node.js dependencies. - (Optional) In VS Code, create a new "JavaScript Debug Terminal" and then follow step 5 in the terminal. This will allow server side debugging.
- Run
make run. This will start the docker file that has the postgres database and the SvelteKit app. - Open your browser and go to
http://localhost:5173to see the app (unless you are running another Vite instance, then check the logs) - After the Postgres container is running, run
make migrations
Add new pages in the src/routes folder. There are 2 types of pages:
+page.svelte- These can be seen by anyone and don't have a server side component.+page.server.ts and +page.svelte- These pages have a server side component and can be used to fetch data from the database. To ensure that a user has proper permissions to view the path, YOU MUST MANUALLY check the users session, for example:
import { redirect } from "@sveltejs/kit";
import type { PageServerLoad } from "../$types";
export const load: PageServerLoad = (async (event) => {
if (!event.locals.user) redirect(302, "/");
/* Your code here to access the database*/
})
This code checks that the user session is valid and if not, redirects the user to the home page to login. See hooks.server.ts for more information on how the session is validated.
+server.ts files can be added to the src/routes folder. For example, if I want to GET from http://localhost:5173/api/v1/username, I would create a +server.ts file in the src/routes/api/v1 folder and add:
import { error } from '@sveltejs/kit';
import type { RequestHandler } from './$types';
export const GET: RequestHandler = ( event ) => {
if (!event.locals.user) return error(401, 'Unauthorized');
/* Your code here to access the database*/
}
The main difference here is that we are returning an error and not redirecting the user, since this is an API route.
make db-gui- Starts up Drizzle Kit Studio in the browser for inspecting the database.make test- Runs the Vitest and ESLint tests.
- SvelteKit - Super awesome front / backend framework
- Drizzle - Postgres data migration tool. Look at
schema.tsto create new tables and columns. - Docker - Starts up the PostgreSQL database.
- TailwindCSS - Very easy to use CSS styling framework.
- Shadcn-Svelte - Nice looking Svelte component library.
- Lucia - User authentication and authorization with session management using PostgreSQL.
- drizzle-kit - A tool to help with drizzle. Run
make db-guito use Drizzle Kit Studio. - Vitest - Unit Test framework for Typescript. See
src/lib/lib.test.tsfor an example. - Winston - Logging framework. See
src/routes/hooks.server.tsfor configuration.