feernandobraga / vitesvelctron

Vite + Svelte + Electron + Tailwind

Vite + Svelte + Electron + Tailwind

🚀 Description

The "Vite + Svelte + Electron + Tailwind" repository is a powerful template designed to streamline the development process of modern applications. By leveraging the combined strengths of Vite, Svelte, Electron, and Tailwind CSS, this template provides an efficient and flexible foundation for building cross-platform desktop applications with a delightful user interface.

🧋 Technologies

Vite: Vite is a lightning-fast build tool for web applications. It optimizes the development experience with near-instantaneous hot module replacement (HMR) and an efficient build process.

Svelte: Svelte is a revolutionary JavaScript framework that compiles your code to highly efficient JavaScript at build time. It offers a refreshing approach to building web applications by eliminating runtime overhead and delivering exceptional performance.

Electron: Electron enables the development of desktop applications using web technologies. It brings the power of Node.js and Chromium to build cross-platform apps with ease.

Tailwind: Tailwind CSS is a utility-first CSS framework that empowers developers to rapidly build custom user interfaces. With its extensive set of utility classes, Tailwind CSS enables you to create visually stunning and responsive designs effortlessly.

👨‍💻 Installation and Usage

To get started with building your app using this template, follow these simple steps (assuming you already have Node.js installed):

Get a copy of this template by running the following command:

npx degit feernandobraga/vitesvelctron my-app-name

Alternatively, you can clone the repo instead:

git clone https://github.com/feernandobraga/vitesvelctron

Next, cd into the project directory and install the dependencies:

cd my-app-name
npm install

Finally, start the development server:

npm run dev

When your app is ready, you can build by running the following command:

npm run make

🍑 Donation

If you are feeling generous or if you found this template helpful because it saved you a lot of time and headaches, you can contribute by buying me a coffee!

Thank you for considering a donation. Your support is greatly appreciated! 🧡

🧙‍♂️ Contributing

Contributions are always welcome! If you find any bugs, have feature requests, or would like to contribute in any other way, please feel free to open an issue or submit a pull request.

📝 License

This project is licensed under the MIT License.

vitesvelctron's Issues

TypeScript Support

Wow, thank you for making this project! Seems like all of the other demos for Vite and Electron out there use some kind of other tool which abstracts away the steps to combine the tooling manually, and this one actually shows how to do it.

I was curious how to combine these configurations with TypeScript? I recently moved my own vanilla CommonJS Electron project over to TypeScript, and it's working really well! I also recently found out that Electron natively supports ESM out of the box now too, so I also implemented that to see how support for it feels so far (It's nice! the only holdup is that preload scripts still have to be in CommonJS).

The next stage to make it even better would be to add Vite, and optionally Svelte (similar to this project). I was going to try adding full TypeScript, or even allowJs / checkJs support to this project, but I wasn't quite sure how that would fit in with the current configurations for this project.

I'd be happy to help work on adding support too! I just wasn't sure where the best place to start was, after trying solo myself by cloning the repo.