Laravel + AlpineJS + InertiaJS

Level 58

To achieve a setup where you have a frontend with Laravel, AlpineJS, and TailwindCSS, and a backend as an SPA with Laravel, InertiaJS, and TailwindCSS, you can follow these steps:

Setup Laravel Project: First, create a new Laravel project if you haven't already:
```
laravel new my-project
cd my-project
```

Install Dependencies: Install InertiaJS, Vue (or React if you prefer), and TailwindCSS:

composer require inertiajs/inertia-laravel
npm install @inertiajs/inertia @inertiajs/inertia-vue3 vue@next
npm install tailwindcss

Configure TailwindCSS: Initialize TailwindCSS:

npx tailwindcss init

Update your tailwind.config.js to include your paths:

module.exports = {
  purge: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Setup Frontend (Laravel + AlpineJS + TailwindCSS): Create a frontend.js file for your frontend logic:

// resources/js/frontend.js
import 'alpinejs';
import '../css/frontend.css';

Create a frontend.css file for your frontend styles:

/* resources/css/frontend.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Update your webpack.mix.js to compile the frontend assets:

mix.js('resources/js/frontend.js', 'public/js')
   .postCss('resources/css/frontend.css', 'public/css', [
      require('tailwindcss'),
   ]);

Setup Backend (Laravel + InertiaJS + TailwindCSS): Create a backend.js file for your backend logic:

// resources/js/backend.js
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import '../css/backend.css';

createInertiaApp({
  resolve: name => require(`./Pages/${name}`),
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el);
  },
});

Create a backend.css file for your backend styles:

/* resources/css/backend.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Update your webpack.mix.js to compile the backend assets:

mix.js('resources/js/backend.js', 'public/js')
   .postCss('resources/css/backend.css', 'public/css', [
      require('tailwindcss'),
   ]);

Create Separate Views: Create separate views for your frontend and backend:

<!-- resources/views/frontend.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="{{ mix('css/frontend.css') }}" rel="stylesheet">
    <title>Frontend</title>
</head>
<body>
    <div x-data="{ message: 'Hello, Alpine!' }">
        <h1 x-text="message"></h1>
    </div>
    <script src="{{ mix('js/frontend.js') }}"></script>
</body>
</html>

<!-- resources/views/backend.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="{{ mix('css/backend.css') }}" rel="stylesheet">
    <title>Backend</title>
</head>
<body>
    @inertia
    <script src="{{ mix('js/backend.js') }}"></script>
</body>
</html>

Routing: Define routes for your frontend and backend in web.php:

// routes/web.php
use Inertia\Inertia;

Route::get('/', function () {
    return view('frontend');
});

Route::get('/admin', function () {
    return Inertia::render('Dashboard');
});

Create Inertia Pages: Create a sample Inertia page:

<!-- resources/js/Pages/Dashboard.vue -->
<template>
  <div>
    <h1>Dashboard</h1>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
}
</script>

Compile Assets: Finally, compile your assets:
```
npm run dev
```

With this setup, you will have a frontend using Laravel, AlpineJS, and TailwindCSS, and a backend SPA using Laravel, InertiaJS, and TailwindCSS. You can further customize and expand this setup based on your project requirements.