Nuxt.jsではじめるSSRことはじめ ITかあさん

ITかあさん

Nuxt.jsではじめるSSRことはじめ

Nuxt.jsではじめるSSRことはじめ

※このブログは先日 5月19日(土)初夏のJavaScript祭のLTコーナーでITかあさんが超駆け足でSSR紹介したネタの解説版です。
73314_normal_1524055009_jsfes201805eyecatch01.png (202.4 kB)

運営以来最大のチェック員数になりました!
ご参加くださった皆さまありがとうございます!

この模様は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のトップページが表示されるようになります。

ここまでの手順は画面のキャプチャを動画にしましたのでよろしければご確認ください。

動画の途中、
Use axiosを使うか、eslintを使うか、を質問しているのですが、どちらもyesで使うことにしました。
UI frameworkもWeb app作るなら欠かせない、API接続のaxiosも一緒に入れることができ、createコマンドだけで環境が整うことにただただ感動します

初夏のJavaScript祭 in サーキュレーションビル ForPro