Integrating CoreUI React Admin Template with Laravel (installing Redux)
This article will show you how to integrate the Core UI React JS admin template with the Laravel project to build an admin panel. You can follow along with the tutorial.
Installing React CoreUI project locally.
- Download the React Core UI Free project zip file from this link: https://coreui.io/react/
- When you unzip the project and following the instructions in the REACT.md to build the project, the following is the project structure you will see.
Setting up React Redux and installing CoreUI and its dependencies in Laravel
This step is modifying the Laravel application to support React. Setting up React for the Laravel project is pretty straightforward.
Run the following commands:
- php artisan preset react
- npm install && npm run dev
Then we need to install CoreUI and its dependencies. First, we need to copy and paste the dependencies section of the package.json file of the React CoreUI project into the dependencies section of the package.json file of our Laravel project. The following is the content that might be different based on the version of the React CoreUI project you downloaded.
"dependencies": {
"@coreui/coreui": "^2.1.12",
"@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1",
"@coreui/icons": "0.3.0",
"@coreui/react": "^2.5.1",
"bootstrap": "^4.3.1",
"chart.js": "^2.8.0",
"classnames": "^2.2.6",
"core-js": "^3.1.4",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"flag-icon-css": "^3.3.0",
"font-awesome": "^4.7.0",
"node-sass": "^4.12.0",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-app-polyfill": "^1.0.1",
"react-chartjs-2": "^2.7.6",
"react-dom": "^16.8.6",
"react-router-config": "^5.0.1",
"react-router-dom": "^5.0.1",
"react-test-renderer": "^16.8.6",
"reactstrap": "^8.0.0",
"simple-line-icons": "^2.4.1"
}Then, we need to run “npm i” again.
After that, we will need to configure our project to support ES6. To do that, we need to install an Npm package running the following command.
npm install — save-dev @babel/plugin-proposal-class-properties
Then create a file called .babelrc right under the root folder of the project with the following content.
{
"plugins": ["@babel/plugin-proposal-class-properties"]
}Then again, we have to install the rest of the dependencies such as Redux, React Dev Tool, React-Redux Middleware, etc. etc. To do that, run the following command.
npm i redux react-redux redux-thunk react-router-dom redux-devtools-extension
Here we are done with installing dependencies. The next step is actually building the project extracting required files from the React CoreUI project into our Laravel project.
Building the Laravel React CoreUI Admin Panel
This section is building the Admin Panel copying and modifying the required files from the React Core UI project.
First, we need to create a Laravel controller running the following command. You can name the controller as you want.
php artisan make:controller Admin\CategoryController
The following is the content of the CategoryController.php.
class CategoryController extends Controller
{
function index()
{
return view('admin.app');
}
}Then register a Laravel route to access the index action method of the CategoryController.
We also need to create the admin/app.blade.php Laravel view file with the following content.
<!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">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>React Core UI + Laravel</title>
</head>
<body>
<div id="app">
</div>
<script src="{{ asset('js/admin/app.js') }}"></script>
</body>
</html>Then we will need to copy the required files from the React CoreUI project into our Laravel project.
- Copy the entire src/container/DefaultLayout folder and its content from the React CoreUI project into the resources/js/admin folder of our Laravel project.
- Also, copy the entire src/container/views folder and its content from the React CoreUI project into the resources/js/admin folder of our Laravel project.
- Then copy the entire src/scss folder into resources/scss/admin folder of our Laravel project.
- Then copy the src/routes.js and src/_nav.js files into the resources/js/admin folder of the Laravel project.
- Then create a file js file, resources/js/admin/reducers/index.js (content can be found below).
- Then create the new file in our Laravel project, resources/js/admin/app.js and resources/js/admin/app.scss files. Their contents can be found below.
- Then register the resources/js/admin/app.js in the webpack.mix.js file.
resources/js/admin/app.js
require('../bootstrap');
import React from 'react';
import { render } from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import { HashRouter, Route, Switch } from 'react-router-dom';
import DefaultLayout from './DefaultLayout';
import Reducers from './reducers';
import './app.scss';
import { composeWithDevTools } from 'redux-devtools-extension';
const store = createStore(Reducers, composeWithDevTools(applyMiddleware(thunk)));
class App extends React.Component {
render() {
return (
<Provider store={store}>
<HashRouter>
<Switch>
<Route path="/" name="Home" component={DefaultLayout} />
</Switch>
</HashRouter>
</Provider>
);
}
}
render(<App />, document.getElementById('app'));resources/js/admin/app.scss
// Styles
// CoreUI Icons Set
@import '~@coreui/icons/css/coreui-icons.css';
// Import Flag Icons Set
@import '~flag-icon-css/css/flag-icon.min.css';
// Import Font Awesome Icons Set
@import '~font-awesome/css/font-awesome.min.css';
// Import Simple Line Icons Set
@import '~simple-line-icons/css/simple-line-icons.css';
// Import Main styles for this application
@import '../../sass/admin/style';webpack.mix.js
const mix = require('laravel-mix');
mix.react('resources/js/app.js', 'public/js')
.react('resources/js/admin/app.js','public/js/admin')
.sass('resources/sass/app.scss', 'public/css');resources/js/admin/reducers/index.js
import { combineReducers } from 'redux';
export default combineReducers({
//register your reducers here.
});This is the final project structure.
The last thing you have to do is that you will have to copy the image assets from the CoreUI project into the Laravel project. Then change the references of the asset files including the references to the components in the code.
That’s it. If you compiled the assets and visit the route you registered, you will see the CoreUI admin panel. From this point, you can start customing the Admin UI and building your application utilizing React-Redux.
