Electron + SvelteKit Template

A modern starter template for building cross-platform desktop applications using Electron and SvelteKit with TypeScript support.

Features

• ⚡ Electron 37 + SvelteKit 2 integration
• 🛠️ TypeScript support (via tsconfig.json)
• 📦 Vite-powered build system (vite.config.ts)
• 🔄 Hot-reload during development
• 🖥️ Cross-platform support (Windows, macOS, Linux)
• 🛡️ Preload script security (preload.cjs)
• 📁 Organized project structure with separate main and renderer processes
• 🎨 Global styling with app.css
• 🔧 Development utilities in scripts/ folder

Prerequisites

• Node.js 18+
• npm 9+ or yarn 1.22+
• Git

Installation

# Clone the repository
git clone https://github.com/chinni-03/electron-sveltekit-template.git
cd electron-sveltekit-template

Install dependencies

npm install

Start development server

npm run dev

Project Structure

electron-sveltekit-template/
├── electron            # Electron folder for main and preload files
|   ├── main.js            # Electron main process entry
|   ├── preload.cjs        # Preload script (CommonJS)
├── src/
│   ├── lib/           # Shared libraries and utilities
│   ├── routes/        # SvelteKit routes and pages
│   ├── app.css        # Global styles
│   ├── app.d.ts       # TypeScript declarations
│   ├── app.html       # Main HTML template
├── scripts/
│   └── dev-electron.js # Electron development script
├── static/            # Static assets (images, fonts, etc.)
├── .gitignore         # Git ignore rules
├── .npmrc             # npm configuration
├── package-lock.json  # Exact dependency tree
├── package.json       # Project metadata and scripts
├── README.md          # This file
├── svelte.config.js   # SvelteKit configuration
├── tsconfig.json      # TypeScript configuration
└── vite.config.ts     # Vite configuration

Available Scripts

Configuration Guide

Main Process

Edit main.js to configure:

• Window settings
• Native menus
• Application lifecycle

Preload Script

Modify preload.cjs to:

• Expose safe Node.js APIs
• Set up IPC communication
• Manage security policies

Build Configuration

Adjust vite.config.ts for:

• Custom build options
• Environment variables
• Renderer process settings

Development Tips

• Hot Reloading: Both renderer and main processes support hot reload during development
• Debugging: Use Chrome DevTools for renderer process and VS Code for main process
• Static Assets: Place images/fonts in static/ folder
• Type Checking: Run tsc --noEmit to check types without compiling

Building for Production

# Build the application
npm run build

Troubleshooting

Issue: "Module not found" errors

Solution:
Delete node_modules and package-lock.json, then run:

npm install

Issue: Preload script not working

Solution:

1. Ensure all exposed APIs are properly defined in preload.cjs
2. Verify the preload script path in main.js is correct:

   // In main.js
   webPreferences: {
     preload: path.join(__dirname, 'preload.cjs')
   }
   

3. Check for any TypeScript errors in the preload script
4. Ensure the preload script is using CommonJS syntax (.cjs extension)

Contributing

We welcome contributions! Here's how to get started:

1. Fork the repository
2. Create a new branch:

   git checkout -b feature-branch
   

3. Commit your changes:

   git commit -am 'Add new feature'
   

4. Push to the branch:

   git push origin feature-branch
   

5. Open a Pull Request with: - Description of changes - Screenshots if applicable - Reference to related issues

License

This project is licensed under the MIT License - see the LICENSE file for full details.

Support

For support, please:

1. Open an issue on GitHub
2. Include:
   • OS version
   • Node.js version
   • Steps to reproduce
   • Expected vs actual behavior
   • Screenshots if applicable

Built with ❤️ by chinni-03