# viteron

> ⚡ vite + electron ⚡

Latest version **0.2.0** (published 2020-12-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install viteron
pnpm add viteron
yarn add viteron
bun add viteron
```

Provides the command `viteron`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2020-12-01 |
| First published | 2020-11-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 16 |
| Unpacked size | 16.9 KB |
| Known vulnerabilities | 0 (+5 in 4 direct dependencies) |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Shiono Yoshihide |
| Maintainers | saltyshiomix |
| Keywords | electron, vite, vitejs, vue, vuejs, viteron |

## Links

- npm: https://www.npmjs.com/package/viteron
- Repository: https://github.com/saltyshiomix/viteron
- Issues: https://github.com/saltyshiomix/viteron/issues
- npm.io page: https://npm.io/package/viteron

## Dependencies (16)

- [arg](https://npm.io/package/arg.md) 5.0.0
- [chalk](https://npm.io/package/chalk.md) 4.1.0
- [execa](https://npm.io/package/execa.md) 4.1.0
- [webpack](https://npm.io/package/webpack.md) 5.9.0
- [fs-extra](https://npm.io/package/fs-extra.md) 9.0.1
- [@babel/core](https://npm.io/package/@babel/core.md) 7.12.9
- [babel-loader](https://npm.io/package/babel-loader.md) 8.2.2
- [webpack-merge](https://npm.io/package/webpack-merge.md) 5.4.0
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) 7.12.5
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) 7.12.7
- [@babel/runtime-corejs3](https://npm.io/package/@babel/runtime-corejs3.md) 7.12.5
- [@babel/preset-typescript](https://npm.io/package/@babel/preset-typescript.md) 7.12.7
- [@babel/plugin-transform-runtime](https://npm.io/package/@babel/plugin-transform-runtime.md) 7.12.1
- [@babel/plugin-proposal-class-properties](https://npm.io/package/@babel/plugin-proposal-class-properties.md) 7.12.1
- [@babel/plugin-proposal-optional-chaining](https://npm.io/package/@babel/plugin-proposal-optional-chaining.md) 7.12.7
- [@babel/plugin-proposal-object-rest-spread](https://npm.io/package/@babel/plugin-proposal-object-rest-spread.md) 7.12.1

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 0.2.0 (latest) — 2020-12-01
- 0.1.0 — 2020-11-29

## README

<p align="center">
  <a href="https://www.npmjs.com/package/viteron">
    <img src="https://img.shields.io/npm/v/viteron.svg">
  </a>
  <a href="https://www.npmjs.com/package/viteron">
    <img src="https://img.shields.io/npm/dt/viteron.svg">
  </a>
</p>

## viteron vs vite

| viteron | vite |
| --- | --- |
| `v0.x` | `v1.0.0-rc.x` |

## My Belief for viteron

1. Show a way of developing desktop apps only web knowledge
1. Easy to use
1. Be transparent and open to OSS developers

## Roadmaps

- [x] first implementation
- [x] [`create-viteron-app`](https://github.com/saltyshiomix/create-viteron-app)
- [ ] examples
  - [x] with-javascript
  - [ ] with-typescript
  - [ ] and more...
- [x] documentation (README)

## Usage

### Create Application with Template

We can use `examples/*` as a template.

To create the `examples/with-javascript`, run the command below:

```
# with npm
$ npm init viteron-app MY_APP --example with-javascript

# with yarn
$ yarn create viteron-app MY_APP --example with-javascript
```

### Run Electron with Development Mode

Run `npm run dev`, and viteron automatically launches an electron app.

```json
{
  "scripts": {
    "dev": "viteron"
  }
}
```

### Production Build

Run `npm run build`, and viteron outputs packaged bundles under the `dist` folder.

```json
{
  "scripts": {
    "build": "viteron build"
  }
}
```

### Build Options

To build Windows 32 bit version, run `npm run build:win32` like below:

```json
{
  "scripts": {
    "build": "viteron build",
    "build:all": "viteron build --all",
    "build:win32": "viteron build --win --ia32",
    "build:win64": "viteron build --win --x64",
    "build:mac": "viteron build --mac --x64",
    "build:linux": "viteron build --linux"
  }
}
```

**CAUTION**: To build macOS binary, your host machine must be macOS!

### Build Configuration

Edit `electron-builder.yml` properties for custom build configuration.

```yml
appId: com.example.viteron
productName: My Viteron App
copyright: Copyright © 2020 Shiono Yoshihide
directories:
  output: dist
  buildResources: resources
files:
  - from: .
    filter:
      - package.json
      - app
publish: null
```

For more information, please check out [electron-builder official configuration documents](https://www.electron.build/configuration/configuration).

## viteron.config.js

```js
module.exports = {
  // specify an alternate main src directory, defaults to 'main'
  mainSrcDir: 'main',
  // specify an alternate renderer src directory, defaults to 'renderer'
  rendererSrcDir: 'renderer',

  // main process' webpack config
  webpack: (defaultConfig, env) => {
    // do some stuff here
    return defaultConfig;
  },
};
```

### Additional Entries

```js
module.exports = {
  webpack: (defaultConfig, env) => Object.assign(defaultConfig, {
    entry: {
      // electron main process
      background: './main/background.js',
      // we can require `config.js` by using `require('electron').remote.require('./config')`
      config: './main/config.js',
    },
  }),
};
```

## Custom Babel Config

We can extends the default babel config of main process by putting `.babelrc` in our project root like this:

**`.babelrc`**:

```json
{
  "presets": [
    "viteron/babel"
  ]
}
```

## Examples

See [examples](./examples) folder for more information.

### [examples/with-javascript](./examples/with-javascript)

```
# with npm
$ npm init viteron-app my-app --example with-javascript

# with yarn
$ yarn create viteron-app my-app --example with-javascript
```

## Develop

### Basic

```
$ git clone https://github.com/saltyshiomix/viteron.git
$ cd viteron
$ yarn
$ yarn dev # default is examples/with-javascript
```

### Developing `examples/*`

```
$ yarn dev <EXAMPLE-FOLDER-NAME>
```

## Related

- [nextron](https://github.com/saltyshiomix/nextron) - ⚡ NEXT.js + Electron ⚡
- [nuxtron](https://github.com/saltyshiomix/nuxtron) - ⚡ Nuxt.js + Electron ⚡

## License

This project is licensed under the terms of the [MIT license](https://github.com/saltyshiomix/viteron/blob/main/LICENSE).

---
_Source: https://npm.io/package/viteron · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._