Create Nuxt Appとnuxt-community/express-templateで作成したときの違いメモ


Nuxt.jsのバージョンは2.0.0です。

最初に1系で[nuxt-community/express-template](https://github.com/nuxt-community/express-template)でNuxt.js + Expressの環境を作っていて、最近[nuxt/create-nuxt-app](https://github.com/nuxt/create-nuxt-app)を使って2系を触ってみてます。

あのファイルどこいったの？ってのがいくつかあったのでメモしておきます。

## インストール

```bash
$ npx create-nuxt-app
```

選んだ選択肢は以下の内容

* ? Project name: `myapp`
* ? Project description: `My geometric Nuxt.js project`
* ? Use a custom server framework: `express`
* ? Use a custom UI framework: `none`
* ? Choose rendering mode: `Universal`
* ? Use axios module: `yes`
* ? Use eslint: `yes`
* ? Use prettier: `node`

今回はこんな感じです。

## GlobalなCSSのデフォルトの場所

`nuxt-community/express-template`だとbodyやhtmlタグ全体のCSS設定は[assets/css/main.css](https://github.com/nuxt-community/express-template/commit/286bb5a59f11a3fede3f7028e73d72ae0b8de034)に記載してあったのですが`/layouts/default.vue`の中のstyleにデフォルトで記述してあります。ここを編集すると全体へ反映できます。

```
<template>
  <div>
    <nuxt/>
  </div>
</template>

<style>
html {
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
}

.button--green {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #3b8070;
  color: #3b8070;
  text-decoration: none;
  padding: 10px 30px;
}

.button--green:hover {
  color: #fff;
  background-color: #3b8070;
}

.button--grey {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #35495e;
  color: #35495e;
  text-decoration: none;
  padding: 10px 30px;
  margin-left: 15px;
}

.button--grey:hover {
  color: #fff;
  background-color: #35495e;
}
</style>

```

## Expressのサーバースクリプトの場所

`nuxt-community/express-template`だと[api/index.js](https://github.com/nuxt-community/express-template/commit/1e3a2ef9bfd8b44bc43448b78b654ef826a9a87a)にある`index.js`ですが、`server/index.js`にあります。

```server/index.js
const express = require('express')
const consola = require('consola')
const { Nuxt, Builder } = require('nuxt')
const app = express()
const host = process.env.HOST || '127.0.0.1'
const port = process.env.PORT || 3000

app.set('port', port)

// Import and Set Nuxt.js options
let config = require('../nuxt.config.js')
config.dev = !(process.env.NODE_ENV === 'production')

async function start() {
  // Init Nuxt.js
  const nuxt = new Nuxt(config)

  // Build only in dev mode
  if (config.dev) {
    const builder = new Builder(nuxt)
    await builder.build()
  }

  // Give nuxt middleware to express
  app.use(nuxt.render)

  // Listen the server
  app.listen(port, host)
  consola.ready({
    message: `Server listening on http://${host}:${port}`,
    badge: true
  })
}
start()
```

## 起動スクリプト

`nuxt-community/express-template`の[package.json](https://github.com/nuxt-community/express-template/commit/1e3a2ef9bfd8b44bc43448b78b654ef826a9a87a)を見ると起動スクリプトを見ると`npm start`が`"nuxt build && nuxt start"`になっていることがわかります。Expressでサーバーを起動させたい場合にこの起動方法だとデバッグがうまくいかなかったりPaaS側での起動がうまくいかなかったりVSCodeのデバッグモード起動でうまく動かなかったりがあり、`node server.js`の形式で起動しているcreate nuxt appの方が個人的には好きです。

* nuxt-community/express-templateのpackage.json

```package.json
省略
"scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt build && nuxt start",
    "precommit": "npm run lint",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
  },
  
省略
```

* nuxt/create-nuxt-appのpackage.json

```package.json
省略
  "scripts": {
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
    "build": "nuxt build",
    "start": "cross-env NODE_ENV=production node server/index.js",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },
省略
```

## 蛇足: 

関係ないけどインストール時に最後の`prettier`をyesにすると最初から起動できずにエラーになりました苦笑
(2018/10/9時点)

デフォルトでエラーでるってジェネレーターとしてどうなんだろ（エラー内容追って直す気になれなかった）

```
 ERROR  Failed to compile with 1 errors                                                                                             7:07:23 PM

 error  in ./pages/index.vue

Module Error (from ./node_modules/eslint-loader/index.js):

/Users/n0bisuke/dotstudio/playground/nuxt-test/myapp/pages/index.vue
  36:1  error  Delete `⏎`  prettier/prettier

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.


 @ ./.nuxt/router.js 5:9-7:3
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js
```