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.
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
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).
Download CoreUI React admin template(here’s the link). Once the zip folder is downloaded, extract it, and copy all the files.
Create a new folder(folder name: coreui) under the resources folder in your Laravel application.
Paste the copied content from step 3a in the coreui folder.
Open the Laravel project in a code editor. Open the file
resources/coreui/package.json and copy the entire “dependencies” section. Next, open Laravel’s
package.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 .
resources/views/welcome.blade.php Delete the <style> tags and the content within. Replace the content of body tag with
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.
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.
npm run dev
resources/views/welcome.blade.php , after </body> tag add
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.