🚀 SvelteKit Project Setup / aka Quickstarter

📖 Table of Contents

• What does setup.mjs do?
• Installed Features
• Getting Started
• Using Svelte Inspector
• Additional Information

🛠 What does setup.mjs do?

The setup.mjs script is a custom setup tool for SvelteKit projects. It provides two installation options:

1. 🚀 Default Install: Automatically installs and configures all available features.
2. 🎛 Manual Install: Allows you to choose which features to install step-by-step.

Tasks performed by the script:

• 🧹 Cleans up existing files and folders (except itself)
• 📦 Installs SvelteKit and configures it with adapter-node
• 🎨 Sets up Tailwind CSS and Tailwind Typography
• 🔣 Installs Font Awesome icons
• 🗄️ Configures PocketBase integration
• 📁 Creates necessary folders and files (e.g., .gitignore, demo page)
• 🌓 Updates app.html with dark mode support
• 📱 Creates a layout file with responsive navigation
• ⚠️ Creates a custom error page
• 🔄 Initializes a git repository (optional)
• 🏃‍♂️ Starts the development server (optional)

🚀 Installed Features

This project includes the following features:

• ✅ SvelteKit
• ✅ SvelteKit with adapter-node
• ✅ Tailwind CSS
• ✅ Tailwind Typography
• ✅ Font Awesome Icons
• ✅ PocketBase
• ✅ Svelte Inspector
• ✅ Dark mode support
• ✅ Responsive navigation
• ✅ Custom error page

🏁 Getting Started

1. Clone this repository:

   git clone https://github.com/yourusername/sveltekit-quickstart.git
   cd sveltekit-quickstart
   

2. Set the PB_URL in your .env file to your PocketBase server URL:

   PB_URL=https://your-pocketbase-url.com
   

3. Run the setup script:

   node setup.mjs
   

4. Run the development server:

   npm run dev -- --host --open
   

Your default browser should open automatically and navigate to the local development server (usually http://localhost:5173).

🔍 Using Svelte Inspector

To activate the Svelte Inspector:

• On macOS: Press Command + Shift
• On other systems: Press Ctrl + Shift

The inspector toggle button will always be visible in the bottom-right corner of your app.

📚 Additional Information

For more details on how to use SvelteKit, Tailwind CSS, or any of the other installed features, please refer to their respective documentation:

• SvelteKit Documentation
• Tailwind CSS Documentation
• Font Awesome Documentation
• PocketBase Documentation

Happy coding! 🎉