プログラミング

Yarn を使って AdminLTE を Ruby on Rails5 へインストールする方法

オシャレで便利なテンプレートエンジン「AdminLTE」をYarnを使ってインストールする方法を書きます。

こんな感じのいい感じのテンプレート。

開発環境

  • Ruby: 2.4.1p111
  • Rails: 5.1.2
  • AdminLTE: 2.4.0
  • Yarn: 1.2.1

実装

今回インストールするAdminLTEのバージョンは「2.4.0」になります。

AdminLTEの現在の最新版は3.x系(開発進行版)ですが、2.x系まであったスキン(テンプレートの色を管理しているスタイルシート)を管理しているskins/ディレクトリがなくなっており、以前までの使い方が出来なくなっていたためです。2.x系の使い方の方が馴染みはあるで今回はこちらのバージョンで。

また、Yarnは使用できることを想定して進みます

Yarnの入れ方は以下を参考にしてください。

プロジェクトの作成

まずは土台となるプロジェクトを作成します。

ここはサクッと。

Yarn から AdminLTE をインストールする

次はYarnからAdminLTEをインストールします。

Yarnが管理しているパッケージはyarn addで入れることができます。

AdminLTEに関連したパッケージがnode_modules/ディレクトリにごっそり入ります。

node_modules/の他に、package.jsonyarn.lockもそれぞれ追加されます。

package.json の中身

yarn.lock の中身

assets の設定

AdminLTEのスクリプトとスタイルシートが読み込めるように「assets」の設定を行います。

assetsのパスに、新たにnode_modules/ディレクトリを追加します。

JavaScript の設定

AdminLTEのスクリプトの読み込み。

CSSの設定

AdminLTEのスタイルシートの読み込み。

おわり

これでAdminLTEを使う準備が整いました。あとはドキュメントに従ってコーディングしていくだけです。

参考記事

記事内の写真出典元

Photo by Marvin Meyer on Unsplash

ABOUT ME
maechan
ベンチャー、フリーランス、スタートアップを経験。 開発業務、人事業務に従事していました。 現在は農業系スタートアップ企業でエンジニアとして働いています。 リモートワークをしているノマドサラリーマンです。茶道とワークアウトが趣味です。