Integrating CoreUI React Admin Template with Laravel

In this article, you’ll learn how to integrate the CoreUI React admin template in the Laravel 7 application.

What is CoreUI?

CoreUI is A complete Dashboard UI Kit that allows you to quickly build UX friendly, responsive applications. We’re going to use the free version of the template in this article, but the process remains the same in case you want to go ahead with a paid version.

In just 9 steps, you’ll have CoreUI react admin template integrated into the Laravel 7 application. Let’s get started.

Step 1

Create a new Laravel project. I’ll be naming my project as react-admin, feel free to change the project name. Assuming you’ve composer already installed run the below command in the terminal(change directory to where you want the project to exist)

composer create-project laravel/laravel react-admin

Step 2

Next, we need to create a database. For this project, I’ll be using a MySQL database and will name it db_admin. Once the database is created, edit the database name and credentials in .env file(found in the root directory of your Laravel application).

Step 3a

Download CoreUI React admin template(here’s the link). Once the zip folder is downloaded, extract it, and copy all the files.

Step 3b

Create a new folder(folder name: coreui) under the resources folder in your Laravel application.

mkdir resources/coreui

Paste the copied content from step 3a in the coreui folder.

Step 4

Open the Laravel project in a code editor. Open the file resources/coreui/package.json and copy the entire “dependencies” section. Next, open Laravel’spackage.json file(found under the project's root folder). Paste the copied “dependencies” section in the Laravel’s package.json file. Copy “react-scripts” under devdependencies from resources/coreui/package.json and paste/append it in Laravel’s package.json file, in devdependencies section. Run npm using npm install .

Step 5

Open resources/views/welcome.blade.php Delete the <style> tags and the content within. Replace the content of body tag with

<div id="root"></div>

Step 6

Create a new file and save it as .babelrc under the project’s root folder. Add the below-given configuration in .babelrc file and save it.

Step 7

Next step is to configure the webpack.mix.js file which also can be found under the project’s root folder. Append the below code in your webpack.mix.js file.

Step 8

Run npm run dev

Step 9

Open resources/views/welcome.blade.php , after </body> tag add

<script type="text/javascript" src={{mix('js/app.js')}}></script>

And that’s about it. Launch/reload your Laravel application in the browser and your coreUI template should be integrated and running successfully without any console errors. I hope this article helps you in integrating coreUI react template in Laravel.