Nuxt.jsとExpressで新規プロジェクトを作成する方法をいくつか検証してみました。Nuxt.jsとExpressでアプリケーションを作成すると、SSR(サーバーサイドレンダリング)もデフォルトでやってくれるし、処理もサーバーサイドとフロント側で共通化できたりもして便利です。
プロジェクト自体はvue-cliで作成したりすることができます。
Nuxt.jsのマニュアルに紹介されているように、スターターテンプレートがあります。
vue init nuxt-community/starter-template <project-name>
これで最小限のNuxt.jsプロジェクトを作成することができますので、これにExpressを入れれば作成は可能です。ただ、もっと簡単にExpressを入れたプロジェクトを作成することができます。
上記のnuxt-communityの他のリポジトリを見てみると、他にもいくつかテンプレートが用意されています。TypeScript入りのtypescript-template等。その中にexpress-templateもありますので、そちらを使ってプロジェクトを作成することができます。
vue init nuxt-community/express-template <project-name>
これならもっと簡単にNuxt.js+Expressのプロジェクトを作成することができます。
ただ、これで試してみたところ、どうもExpress側のプログラムを更新してもホットリロードが行われないようで、その度にいちいちサーバーを再起動しなければなりません。ちょっと面倒だったので他のプロジェクト作成方法も探してみました。
追記)現在はメンテナンスされておらず、使うべきでないものもあったりするようです。その都度確認してください。
同じくnuxt-communityのリポジトリに、create-nuxt-appというものがありました。これはNuxt.jsのアプリケーションを作成する際に、構成を自分で選んで作成することができる非常に便利なものです。
nuxt-community/create-nuxt-app: Create Nuxt.js App in seconds.
下記のどちらかのコマンドで作成することができます。(僕はyarnの方は試していません)
npx create-nuxt-app <my-project>
yarn create nuxt-app <my-project>
下記の構成を選択することができます。
他にもissueを見るとTypeScriptを使うかも選択できるようにしたい、といった話も出ているので、実装されると嬉しいです。今後にも期待。
これでExpressを選択するとExpressが動作するプロジェクトを作成することができます。しかもこちらはちゃんとNuxt.js側、Express側どちらのプログラムを修正してもちゃんとホットリロードしてくれるようになっています。(正確に言うと、package.jsonのスクリプトのnodemonで--watch
を指定しているためです。監視すべきフォルダが複数あるのであれば何度でも--watch
を使うことができます)
ためしにexpress-templateに入っているユーザー情報取得処理をコピーしてみました。server/index.jsに下記のような処理を追加して、users.jsを読み込みます。ついでにルーティングも/api
ベースにしておきます。
const router = express.Router();
router.use(require("../routes/users"));
app.use("/api", router);
Vueコンポーネント側でも同様に読み込みます。
async asyncData() {
let { data } = await axios.get("/api/users");
return { users: data };
}
表示も同様です。
<div v-for="user in users" :key="user.name">
{{ user.name }}
</div>
今回はとりあえずNuxt.js+Expressで簡単にプロジェクトを作成する触りの部分だけをやってみました。
他にもMySQL接続やTwitter認証等、アプリケーションに必要なものを試しているので、よろしければそちらも御覧ください。
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント