oskar-gmerek / surreal-sveltekit

A Starter Kit with SurrealDB and Svelte [ SvelteKit ], featuring Authentication and CRUD Operations + Realtime

Surreal Sveltekit: A Starter Kit with SurrealDB and SvelteKit, featuring Authentication and CRUD Operations + Realtime

Feedback

⭐ Found this project helpful? Show some love with a star! Your support keeps the code evolving. 🚀

Auth

auth.mov

Username Validation

username-validation.mov

CRUD & Realtime

realtime.mov

Requirements:

• Docker
• Ensure that ports 5173 and 8000 are available for use.

Modern Stack:

• SurrealDB - The ultimate multi-model database
• surrealdb.js for interacting with awesome SurrealDB
• sveltekit-superforms + zod to enable super powers in working with forms - Superforms | Zod
• @master/css.svelte as an interesting alternative for TailwindCSS - MasterCSS
• dayjs to enable high level of DX in working with time and dates - Day.js

Setup Process:

1. Clone the repository to your local machine.
2. Install dependencies. For example:

bun install

If you don't have bun installed, you can utilize pnpm or any other Node.js package manager. For instance:

pnpm install

3. Execute the provided npm script. For example:

bun run multitaskum:developum

If you don't have bun installed, you can utilize pnpm or any other Node.js package manager. For instance:

pnpm run multitaskum:developum

This command will initiate SurrealDB within a Docker container and launch SvelteKit in your local development environment.

4. Access http://localhost:5173 using your preferred web browser.
5. Test various functionalities such as creating a new account, logging in, generating new posts, editing posts, and deleting them.

Issues and Contributions:

• If you encounter any issues (as I rushed a bit to meet the hacktoberfest deadline), please feel free to open an issue.
• I am open to any contributions as I aspire to make this starter a top choice for initiating projects that utilize the best modern technologies.

surreal-sveltekit's Issues

websocket can't connect after run a few hours

i install Surrealdb with caprover, database work well. But after 4-5h, i can't connect to surrealdb wss. So my webapp get 500 errors, because websocket can't connect. I use webapp with cloudflare cache ( but when i set cloudflare in developement mode ( no cache), surrealdb still errors after some hours). When i restart surreal app in Caprover, it work again, and still connected. But after some hours, i can't connect using surrealist or webapp can't connect.
When i don't use observeLive ( data.live() ) The surrealdb work well. So what happen? Does we use observeLive right? Or does we have to using in onMount like this:

onMount(async() => {
   await observeLive("watching_list", watchingList)
})

And have to close connect on

onDestroy(() => {
close data connection???....
})

How to fix this errors?

env variable in realtime can't not show in client side

If using realtime, when on the clientside, will the token, user, password, database url be exposed?

const posts = createStore('my_posts', data.my_posts);

	$: $posts;
	observeLive('post', posts);

[Bug] - pnpm dev throws error

After installing the app with pnpm i and making sure that my database was running, I ran pnpm dev.

It says that it is an issue:

> vite dev

▲ [WARNING] Cannot find base config file "./.svelte-kit/tsconfig.json" [tsconfig.json]

    tsconfig.json:2:12:
      2 │   "extends": "./.svelte-kit/tsconfig.json",
        ╵              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Forced re-optimization of dependencies

  VITE v5.0.12  ready in 1605 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
11:01:40 PM [vite] Error when evaluating SSR module /src/master.css.ts: failed to import "@master/css"
|- Error: Cannot find module '@master/css' imported from '/home/vlada/projects/surreal-sveltekit/src/master.css.ts'
    at nodeImport (file:///home/vlada/projects/surreal-sveltekit/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50892:25)
    at ssrImport (file:///home/vlada/projects/surreal-sveltekit/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50799:30)
    at eval (/home/vlada/projects/surreal-sveltekit/src/master.css.ts:3:50)
    at instantiateModule (file:///home/vlada/projects/surreal-sveltekit/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50861:15)

11:01:40 PM [vite] Error when evaluating SSR module /src/hooks.server.ts: failed to import "/src/master.css.ts"
|- Error: Cannot find module '@master/css' imported from '/home/vlada/projects/surreal-sveltekit/src/master.css.ts'
    at nodeImport (file:///home/vlada/projects/surreal-sveltekit/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50892:25)
    at ssrImport (file:///home/vlada/projects/surreal-sveltekit/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50799:30)
    at eval (/home/vlada/projects/surreal-sveltekit/src/master.css.ts:3:50)
    at instantiateModule (file:///home/vlada/projects/surreal-sveltekit/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50861:15)

Error: Cannot find module '@master/css' imported from '/home/vlada/projects/surreal-sveltekit/src/master.css.ts'
    at nodeImport (file:///home/vlada/projects/surreal-sveltekit/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50892:25)
    at ssrImport (file:///home/vlada/projects/surreal-sveltekit/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50799:30)
    at eval (/home/vlada/projects/surreal-sveltekit/src/master.css.ts:3:50)
    at instantiateModule (file:///home/vlada/projects/surreal-sveltekit/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50861:15) {
  code: 'ERR_MODULE_NOT_FOUND'
}

It seems like sveltekit 2.0 is not cool with master/css library, but still, this is easy to reproduce and to test with a fresh clone.

[Poll] Tauri compatible version

I'm learning Sveltekit to build a Tauri app and I believe Surrealdb is a good choice for my use case. However, I've not found yet an example of an app that uses these three stacks together. Have you ever tried this before? Would you consider creating a version of your app using Tauri?

Error: connect ECONNREFUSED 127.0.0.1:8000

npm run multitaskum:developum

> [email protected] multitaskum:developum
> docker compose up -d && vite dev --host

[+] Running 1/0
 ✔ Container database  Started                                                                                                                            0.0s


  VITE v4.5.1  ready in 902 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://10.0.0.243:5173/
  ➜  Network: http://10.0.0.234:5173/
  ➜  Network: http://172.19.0.1:5173/
  ➜  press h to show help

I go to http://localhost:5173/ in the browser and see the following:

node:internal/process/promises:288
            triggerUncaughtException(err, true /* fromPromise */);
            ^

Error: connect ECONNREFUSED 127.0.0.1:8000
    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1555:16) {
  errno: -111,
  code: 'ECONNREFUSED',
  syscall: 'connect',
  address: '127.0.0.1',
  port: 8000
}

Node.js v18.18.0

BTW, I am on Ubuntu 22.04.3 LTS

[Feature request] - Providers (like Google, Facebook) for auth

It would be useful to have providers for auth stuff, mostly because people can abuse create user functionality, and spam the DB with them. It's also the standard for most apps to have those.