Help us understand the problem. What is going on with this article?

Nuxt.js+Electronを試してみる

注意

本記事はElectronなどのバージョンが古いときのもののため新しく記事を書き直しました。
最新版はこちら

はじめに

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

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

セットアップ

Nuxt.jsの環境用意

とりあえずcreate-nuxt-appでNuxt.jsの環境を用意する

npx create-nuxt-app my-project

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

? 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ディレクトリに全部いれるようにする

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

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

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

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

electron周りの準備

electronとelectron-builderをインストール

npm install --save-dev electron
npm install --save-dev electron-builder

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

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"
  }
}

nuxt.config.js
module.exports = {
  ...
  dev: process.env.NODE_ENV === 'development',
  ...
  build: {
    extend(config, ctx) {
      config.output.publicPath = './_nuxt/'
      config.target = 'electron-renderer'
    }
  }
}
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したファイルをローカルで実行する。
How to run a nuxt generated website from filesystem?

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした