Nuxt.jsではじめるSSRことはじめ
Nuxt.jsではじめるSSRことはじめ
※このブログは先日 5月19日(土)初夏のJavaScript祭のLTコーナーでITかあさんが超駆け足でSSR紹介したネタの解説版です。
ご参加くださった皆さまありがとうございます!
この模様はJavaScript祭公式Twitterから実況されておりましたので、ぜひこちらのTwitterアカウントもチェックしてください
LT内容 Nuxt.jsではじめるSSRことはじめ
仕事でAPIゴリゴリ、フロントエンドはモダンなJS FWを使う必要がでてきて、
重い腰をあげて「Nuxt.jsをいっちょやったろ!」と思ったらあまりにも環境の構築が楽なうえ、SSRも簡単すぎてもうSSRナシのコーディングは到底考えられなくなるほどだったので、そんな話をLTでしゃべりました。
なので、今回の記事はLTの補足説明です
Nuxt.jsをインストール
Nuxt.jsをインストールするだけで、なんとSSRも使えるようになります。(楽だね!
NPMはすでにインストール済であることを前提に話を進めます。
$ npx create-nuxt-app your-app-name
Node.jsがバージョン8.2.0以降であれば基本的にnpxのコマンドは使えるはずです。
任意のディレクトリにcdで移動して、npxコマンドを叩きます
your-app-nameに自分のアプリケーション名をつけてあげましょう
ビルドされたアプリケーション名のフォルダ(todoという名前を付けたらtodoというディレクトリができます)
$ cd todo
$ npm run build
$ npm start
あとは以下のURLにAccessすればNuxt.jsのトップページが表示されるようになります。
http://localhost:3000
ここまでの手順は画面のキャプチャを動画にしましたのでよろしければご確認ください。
動画の途中、
Use axiosを使うか、eslintを使うか、を質問しているのですが、どちらもyesで使うことにしました。
UI frameworkもWeb app作るなら欠かせない、API接続のaxiosも一緒に入れることができ、createコマンドだけで環境が整うことにただただ感動します