medilies

Posted on Mar 5, 2022 • Edited on Mar 20, 2022 • Originally published at linkedin.com

Starting a Laravel9 APIs with ReactJS project made easy (Including Tailwind3)

#laravel #react #tailwindcss #api

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 dev
Create the folder resources\js\components which 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>