{"id":14974592,"url":"https://github.com/tomtomdu73/laravel-5.5-coreui-reactjs","last_synced_at":"2025-10-27T09:31:19.396Z","repository":{"id":181081298,"uuid":"119775545","full_name":"tomtomdu73/Laravel-5.5-CoreUI-ReactJS","owner":"tomtomdu73","description":"A clean install of Laravel 5.5 with the CoreUI Full Bootstrap Admin Template ReactJS Version","archived":false,"fork":false,"pushed_at":"2018-08-27T08:03:40.000Z","size":4573,"stargazers_count":14,"open_issues_count":5,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-01T04:41:19.582Z","etag":null,"topics":["coreui","coreui-laravel","laravel5-package","laravel55","reactjs"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tomtomdu73.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2018-02-01T03:07:26.000Z","updated_at":"2023-08-19T11:37:03.000Z","dependencies_parsed_at":"2023-07-14T00:41:44.011Z","dependency_job_id":null,"html_url":"https://github.com/tomtomdu73/Laravel-5.5-CoreUI-ReactJS","commit_stats":null,"previous_names":["tomtomdu73/laravel-5.5-coreui-reactjs"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomtomdu73%2FLaravel-5.5-CoreUI-ReactJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomtomdu73%2FLaravel-5.5-CoreUI-ReactJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomtomdu73%2FLaravel-5.5-CoreUI-ReactJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomtomdu73%2FLaravel-5.5-CoreUI-ReactJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tomtomdu73","download_url":"https://codeload.github.com/tomtomdu73/Laravel-5.5-CoreUI-ReactJS/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238472002,"owners_count":19478141,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["coreui","coreui-laravel","laravel5-package","laravel55","reactjs"],"created_at":"2024-09-24T13:50:47.215Z","updated_at":"2025-10-27T09:31:18.223Z","avatar_url":"https://github.com/tomtomdu73.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Laravel 5.5 + CoreUI Admin Bootstrap Template with ReactJS\n\nA clean install of Laravel 5.5 with the CoreUI Full Bootstrap Admin Template ReactJS Version in this repo.\n\n## Contents\n\n1. Install Laravel\n2. Add CoreUI-React repository\n3. Add Dependencies\n4. Add CoreUI files to Mix\n5. Update CoreUI app\n6. Change bootstrap import\n7. Add route \u0026 view for CoreUI\n8. Use the CoreUI JS\n9. Fix Paths\n\n## Getting Started\nYou can either download the repository directly or follow the instructions here to make your own fresh install.\n\n### Install from repository\nDownload \u0026 unpack the files, navigate to the directory and run:\n```\ncomposer install\n```\nAfter it has completed, run:\n```\nnpm install\n```\nCopy the example .env file:\n```\ncp .env.example .env\n```\nGenerate an application key:\n```\nphp artisan key:generate\n```\nRun Mix tasks:\n```\nnpm run dev\n```\nView the website:\n```\nphp artisan serve\n```\n\n### Step-by-step Clean Install\n#### 1. Install Laravel with ReactJS\nInititate a new Laravel project:\n```\ncomposer create-project --prefer-dist laravel/laravel CoreUI-ReactJS\ncd CoreUI-ReactJS\nnpm install\n```\nMore information regarding requirements can be found [here](https://laravel.com/docs/5.5/installation). \nOn any fresh Laravel application, you may use the ```preset``` command with the ```react``` option to create a basic scaffold:\n```\nphp artisan preset react\n```\nNext, switch to the following structure directories : *CoreUI-ReactJS/resources/assets/js*  there is one folder and two javascript files.\nThe folder name is components, which is react component and the second file is app.js other file is bootstrap.js\nGo to the *resources/views/welcome.blade.php* file, remove the existing code and copy the following : \n```\n\u003c!-- welcome.blade.php --\u003e\n\n\u003c!doctype html\u003e\n\u003chtml lang=\"{{ app()-\u003egetLocale() }}\"\u003e\n    \u003chead\u003e\n        \u003cmeta charset=\"utf-8\"\u003e\n        \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003e\n        \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\u003e\n        \u003ctitle\u003eLaravel\u003c/title\u003e\n        \u003clink href=\"{{mix('css/app.css')}}\" rel=\"stylesheet\" type=\"text/css\"\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n        \u003cdiv id=\"example\"\u003e\u003c/div\u003e\n        \u003cscript src=\"{{mix('js/app.js')}}\" \u003e\u003c/script\u003e\n    \u003c/body\u003e\n\u003c/html\u003e\n```\nThen run :\n```\nnpm run dev\n```\nIt will compile all of our assets and put bundled javascript file into the *public/js/app.js* file.\nYou can now see your basic ReactJS app by booting a development server\n```\nphp artisan serve\n```\n\n#### 2. Add CoreUI-Vue repository\nIn *composer.json*, add a new repository after \"config\":\n```\n\"repositories\": [\n        {\n            \"type\": \"package\",\n            \"package\": {\n                \"name\": \"mrholek/CoreUI-React\",\n                \"version\": \"dev-master\",\n                \"dist\": {\n                    \"url\": \"https://github.com/mrholek/CoreUI-React/archive/master.zip\",\n                    \"type\": \"zip\"\n                }\n\n            }\n        }\n    ]\n```\nAnd then require it:\n```\n\"require\": {\n    \"php\": \"\u003e=7.0.0\",\n    \"fideloper/proxy\": \"~3.3\",\n    \"laravel/framework\": \"5.5.*\",\n    \"laravel/tinker\": \"~1.0\",\n    \"mrholek/CoreUI-React\": \"dev-master\"\n},\n```\nRun ```composer update``` to add these packages. At this point the CoreUI files should be in ```vendor/mrholek/CoreUI-React/```\n\n#### 3. Add Dependencies\nIn *package.json*, update your devDependencies and dependencies to have the following: \n```\n  \"devDependencies\": {\n    \"axios\": \"^0.17\",\n    \"babel-preset-react\": \"^6.23.0\",\n    \"cross-env\": \"^5.1\",\n    \"jquery\": \"^3.2\",\n    \"laravel-mix\": \"^1.0\",\n    \"lodash\": \"^4.17.4\"\n  },\n  \"dependencies\": {\n    \"react-number-format\": \"^3.1.3\",\n    \"bootstrap\": \"4.0.0\",\n    \"chart.js\": \"2.7.1\",\n    \"flag-icon-css\": \"2.9.0\",\n    \"font-awesome\": \"4.7.0\",\n    \"history\": \"4.7.2\",\n    \"react\": \"16.2.0\",\n    \"react-chartjs-2\": \"2.7.0\",\n    \"react-dom\": \"16.2.0\",\n    \"react-router-dom\": \"4.2.2\",\n    \"react-transition-group\": \"2.2.1\",\n    \"reactstrap\": \"5.0.0-alpha.4\",\n    \"simple-line-icons\": \"2.4.1\"\n  }\n```\nRun ```npm update```\n\n#### 4. Add CoreUI files to Mix\nCopy the following content to your *webpack.mix.js*:\n```\nlet mix = require('laravel-mix');\n\nvar coreui_vendor = 'vendor/mrholek/CoreUI-React/React_Full_Project';\nmix.copyDirectory(coreui_vendor + '/public/img', 'public/public/img')\n     .copyDirectory(coreui_vendor + '/scss', 'resources/coreui/scss')\n     .copyDirectory(coreui_vendor + '/src', 'resources/coreui/src');\n    \nmix.react('resources/assets/js/app.js', 'public/js')\n   .sass('resources/assets/sass/app.scss', 'public/css');     \n```\nThen run :\n```\nnpm run dev\n```\nthe coreui directory will appear in resources\n\n#### 5. Update CoreUI app\nIn */resources/assets/sass/app.scss* comment out existing lines and add in our package fonts + coreui style.\n```\n// Fonts\n//@import url(\"https://fonts.googleapis.com/css?family=Raleway:300,400,600\");\n\n// Variables\n//@import \"variables\";\n\n// Bootstrap\n//@import \"~bootstrap-sass/assets/stylesheets/bootstrap\";\n\n// Fonts\n@import \"~font-awesome/scss/font-awesome\"; // Font Awesome\n@import \"~simple-line-icons/scss/simple-line-icons\"; // Simple Line Icons\n\n// CoreUI Style\n@import \"../../coreui/scss/style\";\n```\n\n#### 6. Change bootstrap import\nIn *resources/coreui/scss/style.scss* make sure you have this content:\n```\n// Override Boostrap variables\n@import \"bootstrap-variables\";\n\n// Import Bootstrap source files\n@import \"node_modules/bootstrap/scss/bootstrap\";\n\n// Override core variables\n@import \"core-variables\";\n\n// Import core styles\n@import \"core/core\";\n\n// Custom styles\n@import \"custom\";\n```\n\n\n#### 7. Check route and update welcome.blade.php\n\nMake sure you have the route welcome set in routes/web.php file:\n```\nRoute::get('/', function () {\n    return view('welcome');\n});\n```\n\nIn your *resources/views/welcome.blade.php*, replace all the content with this one : \n```\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"{{ config('app.locale') }}\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\u003e\n    \u003cmeta name=\"csrf-token\" content=\"{{ csrf_token() }}\"\u003e\n\n    \u003ctitle\u003eLaravel - CoreUI Example\u003c/title\u003e\n\n    \u003clink href=\"{{ mix('css/app.css') }}\" rel=\"stylesheet\"\u003e\n\n    \u003cscript\u003e\n        window.Laravel = {!! json_encode([\n            'csrfToken' =\u003e csrf_token(),\n        ]) !!};\n    \u003c/script\u003e\n\n    \u003c!-- BODY options, add following classes to body to change options\n\n    // Header options\n    1. '.header-fixed'                  - Fixed Header\n\n    // Sidebar options\n    1. '.sidebar-fixed'                 - Fixed Sidebar\n    2. '.sidebar-hidden'                - Hidden Sidebar\n    3. '.sidebar-off-canvas'        - Off Canvas Sidebar\n    4. '.sidebar-compact'               - Compact Sidebar Navigation (Only icons)\n\n    // Aside options\n    1. '.aside-menu-fixed'          - Fixed Aside Menu\n    2. '.aside-menu-hidden'         - Hidden Aside Menu\n    3. '.aside-menu-off-canvas' - Off Canvas Aside Menu\n\n    // Footer options\n    1. '.footer-fixed'                      - Fixed footer\n\n    --\u003e\n\u003c/head\u003e\n\u003cbody class=\"app header-fixed sidebar-fixed aside-menu-fixed aside-menu-hidden\"\u003e\n    \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n    \u003cscript src=\"{{ mix('js/app.js') }}\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n#### 8. Use the CoreUI JS\nIn *resources/assets/js/app.js* replace the existing code by this one:\n```\nimport React from 'react';\n\n/**\n * First we will load all of this project's JavaScript dependencies which\n * includes React and other helpers. It's a great starting point while\n * building robust, powerful web applications using React + Laravel.\n */\n\nrequire('./bootstrap');\n\n/**\n * Next, we will create a fresh React component instance and attach it to\n * the page. Then, you may begin adding components to this application\n * or customize the JavaScript scaffolding to fit your unique needs.\n */\n\n/* Import the Main component */\nrequire('../../coreui/src/index.js');\n```\n\n#### 9. Fix Paths\nRun Mix tasks, copying over CoreUI files:\n```\nnpm run dev\n```\nAt this point Mix will fail, as some of the paths need to be changed.\n\nIn */resources/coreui/scss/core/_variables.scss*, change the logo paths to:\n```\n$navbar-brand-logo:                   url('/public/img/logo.png') !default; \n$navbar-brand-minimized-logo:         url('/public/img/logo-symbol.png') !default; \n```\nNow the build should be successful with ```npm run dev``` and the CorUI dashboard should be visible in your localhost.\n\n#### 10. Clean the URL \nTo eliminate those annoying '#' symbols from the browser URL, go to */resource/coreui/src/index.js* and use BrowserRouter instead of HashRouter : \n```\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {BrowserRouter as Router, Route, Switch} from 'react-router-dom';\n\n// Styles\n// Import Flag Icons Set\nimport 'flag-icon-css/css/flag-icon.min.css';\n// Import Font Awesome Icons Set\nimport 'font-awesome/css/font-awesome.min.css';\n// Import Simple Line Icons Set\nimport 'simple-line-icons/css/simple-line-icons.css';\n// Import Main styles for this application\nimport '../scss/style.scss'\n// Temp fix for reactstrap\nimport '../scss/core/_dropdown-menu-right.scss'\n\n// Containers\nimport Full from './containers/Full/'\n\n// Views\nimport Login from './views/Pages/Login/'\nimport Register from './views/Pages/Register/'\nimport Page404 from './views/Pages/Page404/'\nimport Page500 from './views/Pages/Page500/'\n\nReactDOM.render((\n  \u003cRouter\u003e\n    \u003cSwitch\u003e\n      \u003cRoute exact path=\"/login\" name=\"Login Page\" component={Login}/\u003e\n      \u003cRoute exact path=\"/register\" name=\"Register Page\" component={Register}/\u003e\n      \u003cRoute exact path=\"/404\" name=\"Page 404\" component={Page404}/\u003e\n      \u003cRoute exact path=\"/500\" name=\"Page 500\" component={Page500}/\u003e\n      \u003cRoute path=\"/\" name=\"Home\" component={Full}/\u003e\n    \u003c/Switch\u003e\n  \u003c/Router\u003e\n), document.getElementById('root'));\n```\n\n#### 11. Comment out the CoreUI mix copies\nTo avoid overwriting our changes, comment out the copies in *webpack.mix.js*:\n```\nlet mix = require('laravel-mix');\n\n// var coreui_vendor = 'vendor/mrholek/CoreUI-React/React_Full_Project';\n// mix.copyDirectory(coreui_vendor + '/public/img', 'public/public/img')\n//     .copyDirectory(coreui_vendor + '/scss', 'resources/coreui/scss')\n//     .copyDirectory(coreui_vendor + '/src', 'resources/coreui/src');\n    \nmix.react('resources/assets/js/app.js', 'public/js')\n   .sass('resources/assets/sass/app.scss', 'public/css');    \n```\n\n#### 12. Run Mix and Serve\nAt this point, running the following should not have any errors:\n```\nnpm run dev\nphp artisan serve\n```\n\n## Authors\n\n* **Thomas Cosialls** - *Update to ReactJS version of CoreUI* - [Thomas Cosialls](https://github.com/tomtomdu73)\n\n## Credit\n\n* **Derek Au** - *Thanks for his initial tuto about [CoreUI Vue version](https://github.com/derekphilipau/laravel-5.5-coreui-vue-separated/blob/master/Readme.md)* - [Derek Au](https://github.com/derekphilipau)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomtomdu73%2Flaravel-5.5-coreui-reactjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomtomdu73%2Flaravel-5.5-coreui-reactjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomtomdu73%2Flaravel-5.5-coreui-reactjs/lists"}