Nuxt.js+Electronを試してみる

# 注意

本記事はElectronなどのバージョンが古いときのもののため新しく記事を書き直しました。
[最新版はこちら](https://qiita.com/tamfoi/items/aa5b795d4559fa06f0e3)

#はじめに

[electron-template](https://github.com/nuxt-community/electron-template)があまりメンテされてない感じだったり、ビルド後もローカルでサーバーを立てて実行していたりだったので、一度自分で環境を作ってみようって感じの記事です。

この記事の手順で作ったものをいれたリポジトリ → クローズしました

#セットアップ
##Nuxt.jsの環境用意
とりあえず[create-nuxt-app](https://github.com/nuxt/create-nuxt-app)でNuxt.jsの環境を用意する

```bash
npx create-nuxt-app my-project
```

セットアップのときに選択した項目は下記

```bash
? Project name my-project
? Project description My badass Nuxt.js project
? Use a custom server framework none
? Use a custom UI framework none
? Choose rendering mode Single Page App
? Use axios module no
? Use eslint no
? Use prettier no
? Author name tamfoi
? Choose a package manager npm
```

## Nuxt.jsの設定周りを変更する
###pagesなどのディレクトリを変更
appディレクトリに全部いれるようにする

```javascript:nuxt.config.js
module.exports = {
  ...
  srcDir: 'app',
  ...
}
```

###buildした時にサーバー無しで実行できるようにする

```javascript:nuxt.config.js
module.exports = {
  ...
  router: {
    mode: 'hash'
  },

  build: {
    extend(config, ctx) {
      config.output.publicPath = './_nuxt/'
    }
  },
  ...
}
```

##electron周りの準備
electronとelectron-builderをインストール

```bash
npm install --save-dev electron
npm install --save-dev electron-builder
```

基本的に[electron-template](https://github.com/nuxt-community/electron-template)を参考にしながら設定を追加していく。
違うのはmain.jsでexe化後はローカルサーバーは建てずに起動するようにしたとかくらい

```json:package.json
{
  "name": "my-project",
  "version": "1.0.0",
  "description": "My perfect Nuxt.js project",
  "author": "tamfoi",
  "private": true,
  "main": "main.js",
  "scripts": {
    "dev": "cross-env NODE_ENV=development electron .",
    "build": "nuxt build && electron-builder"
  },
  "build":{
    "appId": "my-project",
    "directories": {
      "output": "build"
    }
  },
  "dependencies": {
    "cross-env": "^5.2.0",
    "nuxt": "^2.0.0"
  },
  "devDependencies": {
    "electron": "^3.0.10",
    "electron-builder": "^20.38.0",
    "nodemon": "^1.11.0"
  }
}

```

```javascript:nuxt.config.js
module.exports = {
  ...
  dev: process.env.NODE_ENV === 'development',
  ...
  build: {
    extend(config, ctx) {
      config.output.publicPath = './_nuxt/'
      config.target = 'electron-renderer'
    }
  }
}
```

```javascript:main.js
/*
**  Nuxt
*/
const http = require('http')
const { Nuxt, Builder } = require('nuxt')
let config = require('./nuxt.config.js')
config.rootDir = __dirname // for electron-builder
// Init Nuxt.js
const nuxt = new Nuxt(config)
const builder = new Builder(nuxt)
const server = http.createServer(nuxt.render)
// Build only in dev mode
let _NUXT_URL_ = '';
if (config.dev) {
	builder.build().catch(err => {
		console.error(err) // eslint-disable-line no-console
		process.exit(1)
  })
  // Listen the server
  server.listen()
  _NUXT_URL_ = `http://localhost:${server.address().port}`
  console.log(`Nuxt working on ${_NUXT_URL_}`)
}else{

  _NUXT_URL_ = 'file://' + __dirname + '/dist/index.html';

}


/*
** Electron
*/
let win = null // Current window
const electron = require('electron')
const app = electron.app
const newWin = () => {
	win = new electron.BrowserWindow({})
	win.maximize()
	win.on('closed', () => win = null)
	if (config.dev) {
		// Wait for nuxt to build
		const pollServer = () => {
      
      		http.get(_NUXT_URL_, (res) => {
				if (res.statusCode === 200) { 
          			win.loadURL(_NUXT_URL_) 
        		} else { 
          			console.log("restart poolServer");
          			setTimeout(pollServer, 300) 
        		}
      		})
      		.on('error', pollServer)
    
    }
		pollServer()
	} else { 
    	return win.loadURL(_NUXT_URL_) 
  	}
}
app.on('ready', newWin)
app.on('window-all-closed', () => app.quit())
app.on('activate', () => win === null && newWin())
```

#最後に
とりあえず動いたので一旦記事化しました。
更新あればこの記事を編集する形にするか、別記事で書こうと思います。
特にmain.jsはまだ改良の余地がありそうな気がしてます。開発時の起動の遅さとかどうにかしたいです。

#参考
[nuxtでgenerateしたファイルをローカルで実行する。](https://qiita.com/benridane/items/1ba70f32c1220a206423)
[How to run a nuxt generated website from filesystem?](https://stackoverflow.com/questions/51202767/how-to-run-a-nuxt-generated-website-from-filesystem)