DEV Community

medilies
medilies

Posted on • Edited on • 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
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

Top comments (0)

Read next

designly profile image

How to Create a Scroll Progress Bar in Next.js/React

Jay @ Designly -

omidnikrah profile image

🚀 Introducing Figma Sprite Generator – Effortlessly Create PNG Sprites from Your Figma Icons

Omid Nikrah -

thesohailjafri profile image

Building an Authentication Wrapper in React/Next.js + GraphQL 💪

Sohail Jafri -

prashant-ardeshana profile image

#3 How to fetch the store details and print to the fronted using react Next.

Prashant Ardeshana -