Laravel mix + react + coreUIの環境構築
Laravelプロジェクトの作成からcoreUIの初期ダッシュボードの表示までの環境構築です
css、jsをぶちこむだけかと思いきや、初心者の僕には難しかった
coreUIはこんな感じのいけてる管理画面UIです
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を導入します
テンプレートのダウンロードはこちら coreui.io
ダウンロードしたファイルの 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 でホットリローディングもできると思います
参考になれば幸いです