Giter VIP home page Giter VIP logo

electron-vite-react's Introduction

Electron 11 + TypeScript 4.0 + Vite 2 + React 17 + Tailwind 2 + twstyled starter

Electron + Vite + React Starter

Blazing fast Electron starter including

  • Vite for next generation frontend tooling
  • Typescript
  • ESBuild for building all assets including the main process
  • React as the front end framework
  • Tailwind CSS for styling without templates
  • twstyled tailwind compiler for no PostCSS processing and full-featured CSS in JS
  • Framer Motion for animation transitions
  • React fast refresh for hot module reloading
  • electron-builder and electron-notarize for distribution release
  • Zero dependency on Vue, tsc or styled-components, emotion or other runtime CSS in JS (but supports all the same API)

Configured with best practices.

Installation

yarn

Development

yarn dev

Build

yarn build

Release

Add any configuration to the build section of package.json, add an .env-secrets.json file in the .config folder with any environment secrets that you need for your publisher, and then run

yarn publish

Prior art

Inspired by https://github.com/appinteractive/electron-vite-tailwind-starter and https://github.com/maxstue/vite-reactts-electron-starter

License

MIT

electron-vite-react's People

Contributors

guybarnard avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

electron-vite-react's Issues

typeorm

any way to add typeorm for this template

Router

Consider adding a router?

How to use twstyled?

Hello. I see not all tw properties are there when you do tw=".." , and there doesn't appear to be any config file where to change what properties are activated. How is this done?

Bad alias resolution when the main process references the common folder

I'm sorry I'm not a native English speaker. This is my problem
When I tried to reference the common configuration, I couldn't find the correct path in the packed dist directory,
It seems that my configuration is not bundled correctly

import { app, BrowserWindow, Tray, Menu } from 'electron'
import type { BrowserWindowConstructorOptions } from 'electron'
import windowStateKeeper from 'electron-window-state'
import config from '@/common/config'

index.js in dist directory

var import_electron = __toModule(require("electron"));
var import_electron_window_state = __toModule(require("electron-window-state"));
var import_config = __toModule(require("@/common/config"));
...

error stack

Error: Cannot find module '@/common/config'
Require stack:
- F:\code\project\electron-vite-react\dist\index.js
- F:\code\project\electron-vite-react\node_modules\electron\dist\resources\default_app.asar\main.js
-
    at Module._resolveFilename (internal/modules/cjs/loader.js:887:15)
    at Function.n._resolveFilename (electron/js2c/browser_init.js:261:1128)
    at Module._load (internal/modules/cjs/loader.js:732:27)
    at Function.f._load (electron/js2c/asar_bundle.js:5:12684)
    at Module.require (internal/modules/cjs/loader.js:959:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (F:\code\project\electron-vite-react\dist\index.js:22:32)
    at Module._compile (internal/modules/cjs/loader.js:1078:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1108:10)
    at Module.load (internal/modules/cjs/loader.js:935:32)

tree

├─.config
├─.vscode
├─public
├─scripts
└─src
    ├─common
    │  ├─config
    │  └─event
    ├─main
    │  ├─ipc
    │  └─work_thread
    └─renderer
        ├─components
        │  ├─DropZone
        │  └─HtmlHead
        ├─layouts
        └─pages
            └─home

how can i fix it ?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.