Laravel9 x ReactJs x Tailwind3 x Sanctum
Creating the Laravel project
laravel new lxr
cd lxr
Set the database and .env file
Installing Sanctum (For simple authentication)
composer require laravel/sanctum
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrate
Installing React
npm install
npm install --save-dev react react-dom
- Edit
webpack.config
mix.js("resources/js/app.js", "public/js")
.react()
.extract(["react"])
.postCss("resources/css/app.css", "public/css", []);
Add
<script src="{{ asset('js/manifest.js') }}"></script><script src="{{ asset('js/vendor.js') }}"></script><script src="{{ asset('js/app.js') }}"></script>in this order to the bottom of<body></body>Do
npm run devCreate the folder
resources\js\componentswhich will contain React components
Installing Tailwind
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
- Edit
ressources\css\app.css
@tailwind base;
@tailwind components;
@tailwind utilities;
- Edit
tailwind.config.js
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.jsx",
"./storage/framework/views/*.php",
"./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
],
theme: {
extend: {},
},
plugins: [],
};
- Edit
webpack.config(Again)
mix.js("resources/js/app.js", "public/js")
.react()
.extract(["react"])
.postCss("resources/css/app.css", "public/css", [
require("postcss-import"),
require("tailwindcss"),
require("autoprefixer"),
]);
npm run watch
- Add
<link rel="stylesheet" href="{{ asset('css/app.css') }}">to<head></head>
Wrap-up
An overview of what we did is:
- Starting a fresh Laravel project.
- Installing laravel/sanctum.
- Installing ReactJs.
- Installing Tailwind 3 and configuring it.
- Configuring Mix in Webpack to process ReactJS and Tailwind.
A minimal Blade file will look like
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<title>Laravel React</title>
</head>
<body class="bg-slate-800">
<div id="root"></div>
<script src="{{ asset('js/manifest.js') }}"></script>
<script src="{{ asset('js/vendor.js') }}"></script>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
Top comments (0)