TheLazy.Dev
Portfolio GitHub

Blog

laravel |react |tailwindcss |api

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

medilies

medilies

Posted on March 5, 2022

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

Laravel9 x ReactJs x Tailwind3 x Sanctum

Creating the Laravel project 

laravel new lxr
cd lxr
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Installing React 

npm install
npm install --save-dev react react-dom
Enter fullscreen mode Exit fullscreen mode
  • Edit webpack.config 
mix.js("resources/js/app.js", "public/js")
    .react()
    .extract(["react"])
    .postCss("resources/css/app.css", "public/css", []);
Enter fullscreen mode Exit fullscreen mode

  • 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
Enter fullscreen mode Exit fullscreen mode
  • Edit ressources\css\app.css 
@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode
  • 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: [],
};
Enter fullscreen mode Exit fullscreen mode
  • 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"),
    ]);
Enter fullscreen mode Exit fullscreen mode 
npm run watch
Enter fullscreen mode Exit fullscreen mode
  • Add <link rel="stylesheet" href="{{ asset('css/app.css') }}"> to <head></head>

Wrap-up

An overview of what we did is:

  1. Starting a fresh Laravel project.
  2. Installing laravel/sanctum.
  3. Installing ReactJs.
  4. Installing Tailwind 3 and configuring it.
  5. 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>
Enter fullscreen mode Exit fullscreen mode
💖 💪 🙅 🚩
medilies
medilies

Posted on March 5, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

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

March 5, 2022