Laravel mix + react + coreUIの環境構築

September 17, 2019

Laravelプロジェクトの作成からcoreUIの初期ダッシュボードの表示までの環境構築です

css、jsをぶちこむだけかと思いきや、初心者の僕には難しかった

laravel プロジェクトの環境構築

Laravel 6.xを想定してますこのあたりはLaravelのドキュメントに書いてあるとおりです

プロジェクト作成

composer global require laravel/installer
laravel new my-project
cd my-project

react用の設定に変更

composer require laravel/ui --dev // かなり時間かかりました
php artisan ui react
npm install && npm run dev

resources/views/welcome.blade.php を編集します

<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
        <link href="{{mix('css/app.css')}}" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="example"></div>
        <script crossorigin src="{{mix('js/app.js')}}" ></script>
    </body>
</html>

ここまでで php artisan serve をして表示されたURLを確認し

Example Component
I'm an example component!

と表示されればreact componentが正しく表示できています

coreUIの導入

先にcoreUIの依存パッケージをもろもろいれておきます

npm install @coreui/coreui-plugin-chartjs-custom-tooltips @coreui/coreui @coreui/icons@0.3.0 @coreui/react bootstrap chart.js classnames codemirror core-js enzyme enzyme-adapter-react-16 flag-icon-css font-awesome formik node-sass prop-types react react-app-polyfill react-big-calendar react-bootstrap-table react-chartjs-2 react-codemirror2 react-dates react-dom react-google-maps react-grid-layout react-ladda react-quill react-router-config react-router-dom react-select react-test-renderer react-text-mask-hoc react-toastify reactstrap simple-line-icons spinkit yup react-number-format bootstrap chart.js flag-icon-css font-awesome history react react-chartjs-2 react-dom react-router-dom react-transition-group reactstrap simple-line-icons @babel/plugin-proposal-class-properties spinkit

注意点として @coreui/icons のバージョンは0.3.0固定とします

また、有料のcoreUI-proを使う場合は下記も必要です

@coreui/coreui-pro

それではcoreUIを導入します

テンプレートのダウンロードはこちら [https://coreui.io/react/:embed:cite]

ダウンロードしたファイルの src/ 以下について下記のようにコピペします

名前被りを回避するために既存の resouces/js/app.js を appRoot.js に変更
App.scss、index.css、 scssディレクトリの中身を resources/sassへ
それ以外のディレクトリ、ファイルを resources/js へ

階層構造を変更したので各ファイルの参照パスを修正します

resouces/sass/App.scss

// @import './scss/style.scss';
@import './style.scss';

resourses/js/App.js

// import './App.scss';
import './../sass/App.scss';

resourses/js/index.js

// import '.index.css';
import '../sass/index.css';

sass/style.scss

// @import '~spinkit/scss/spinkit.scss';
@import '~spinkit/spinkit.css';

起動するjsファイルとwebpack設定の修正

welcome.blade.php

    <body>
        <div id="root"></div>
        <script src="{{mix('js/appRoot.js')}}" ></script>
    </body>

resouses/js/appRoot.js

// require('./components/Example');
require('./index');

webpack.mix.js

mix.react('resources/js/appRoot.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
  .babelConfig({
    "presets": [
      "@babel/preset-env"
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties"
    ],
  });

if (mix.inProduction()) {
    mix.version();
}

動作確認

ここまでで npm run dev でコンパイルしてみて、エラーがでなければ php artisan serve で動作確認します

ダッシュボードが表示されればOKです :D

もしエラーが出た場合はエラーに従って参照パスが間違ってないかなど確認してください

npm run hot でホットリローディングもできると思います

参考になれば幸いです

Written by@macaron

ゲームが好きなWebエンジニアのBlogです。