A Svelte5 framework with Username and Password PG Database
Prerequisites: Having Ubuntu24.04 install on the PC via WSL2. Secondly a virtual server running Ubuntu22 or 24.04 associated with a domain-name (eg. myexample.com) - see Virtual Server. Both servers are to have the cpanel 'Webmin' and the Postgres Database Server up and running as per Fundamental Setup
The Sveltekit framework that creates an ideal environment, among many others, for developing creative websites. The following app example demonstrates the integration of these plugins: prettier, eslint, playwright, tailwindcss, drizzle, lucia, mdvex using bun.js, an effective package manager.
With the advent of linux integration from Win10 onwards - that is with WSL2, it makes good sense to use it as a website development platform on the PC.
Part A (step1): Create the Postgres User and Database
Via the browser, activate Webmin. Create a user called: 'root' and a password 'mysecretpassword' - ensure the user is an allowed host. Then create a database 'testdb.
Part A (step2): Download and Install the example Svelte5 app
sammy@imega:$ tar -xzvf handbkV01.tar.gz
sammy@imega:$ chmod -R 744 handbk // set the permissions
sammy@imega:$ cd handbk
sammy@imega /handbk:$ chmod -R 776 .svelte-kit/
sammy@imega /handbk:$ sudo bun install -g bun
**See Configuration Notes below
sammy@imega /handbk:$ bun install
sammy@imega /handbk:$ bun run db:start
sammy@imega /handbk:$ bun run dev Open the browser at http://localhost:5173 Press 'q' to quit.
Configuration Notes:
a. In file: src/lib/components/NavMain.svelte
this line: import '/home/sammy/svelte/handbk/src/app.css';
should be changed to match one's own home user and directories.
b. In files: svelte.config.js and vite.config.ts the wording: myexample.com needs to be change to one's own domain.
c. After running 'build', edit the file: index.js in the build directory to change the 'HOST' reference from 0.0.0.0 to 127.0.0.1
Notes:
a. Via login, register a new user with a strong password.
b. Some aspects worth noting:
b1. @sveltejs/enhanced-img is used to ensure the images resize according to the browser environment.
b2. Instead of the use of +layout.svelte with conditions, two navigation templates were create in the src/lib/components folder to handle the private pages.
b3. The handling of docs and images(enhanced) can be seen from the +page.svelte coding.
Part A (step3): Compact the Svelte5 app for a backup
Delete the following directories and tar zip the app folder after completing any improvements to the app