Laravel Application Setup

This guide is for users who want to use the full Laravel/Livewire application with backend functionality, database, authentication, and reactive components. This is different from using just the static HTML files.

What You Get

The Laravel application includes:

Laravel 11 - Modern PHP framework
Livewire 3 - Reactive components without JavaScript complexity
Authentication - Complete user management system
Database - SQLite (or MySQL/PostgreSQL)
Real-time Features - Dynamic, reactive UI components
Admin Dashboard - Full-featured admin interface
Development Tools - Debugbar, testing suite, and more

Prerequisites

Before you begin, ensure you have:

PHP 8.2 or higher
Composer - PHP dependency manager
Node.js and npm - For asset compilation
Database - SQLite (included), MySQL, or PostgreSQL
Web Server - Apache, Nginx, or Laravel's built-in server

Check Your Environment

# Check PHP version
php --version
# Should be 8.2 or higher

# Check Composer
composer --version

# Check Node.js
node --version
# Should be v18 or higher

# Check npm
npm --version

Installation Steps

Step 1: Extract or Clone

Extract the UltraViolet Pro package to your desired location:

# Navigate to your development directory
cd ~/Sites  # or C:\xampp\htdocs on Windows

# Extract the package
unzip ultraviolet-pro.zip
cd ultraviolet-pro

Or if using Git:

git clone https://github.com/your-repo/ultraviolet-pro.git
cd ultraviolet-pro

Step 2: Install PHP Dependencies

Install Laravel and all PHP packages:

composer install

This installs:

Laravel 11 framework
Livewire 3
Laravel Breeze (authentication)
Spatie packages
Development tools

Wait for installation to complete (may take a few minutes).

Step 3: Install Frontend Dependencies

Install JavaScript packages and build tools:

npm install

This installs:

Vite (build tool)
Alpine.js
Bootstrap
ApexCharts
And more...

Step 4: Environment Configuration

Copy the example environment file:

cp .env.example .env

Generate an application key:

php artisan key:generate

Step 5: Configure Environment Variables

Edit .env file with your settings:

# Application
APP_NAME="UltraViolet Pro"
APP_ENV=local
APP_DEBUG=true
APP_URL=http://localhost:8000

# Database - SQLite (Default, easiest)
DB_CONNECTION=sqlite
DB_DATABASE=/absolute/path/to/database/database.sqlite

# Or MySQL
# DB_CONNECTION=mysql
# DB_HOST=127.0.0.1
# DB_PORT=3306
# DB_DATABASE=ultraviolet
# DB_USERNAME=root
# DB_PASSWORD=

Step 6: Create Database

For SQLite (Recommended for Development)

# Create the database file
touch database/database.sqlite

# Or on Windows
type nul > database\database.sqlite

For MySQL

# Create database using MySQL client
mysql -u root -p
CREATE DATABASE ultraviolet;
exit;

Update .env with your MySQL credentials.

Step 7: Run Migrations

Create the database tables:

php artisan migrate

You should see:

Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table
...

Step 8: Seed Database (Optional)

Add sample data:

php artisan db:seed

This creates:

Sample users
Demo data for testing

Step 9: Build Frontend Assets

Compile CSS and JavaScript:

# For development
npm run dev

# Or for production
npm run build

Step 10: Start the Application

Start the Laravel development server:

php artisan serve

You should see:

INFO  Server running on [http://127.0.0.1:8000].
Press Ctrl+C to stop the server.

Visit http://localhost:8000 in your browser!

Project Structure

Laravel Application Structure

ultraviolet-pro/
├── app/
│   ├── Console/          # Artisan commands
│   ├── Http/
│   │   ├── Controllers/  # HTTP controllers
│   │   └── Middleware/   # Request middleware
│   ├── Livewire/         # Livewire components
│   ├── Models/           # Eloquent models
│   └── Services/         # Business logic services
│
├── resources/
│   ├── views/            # Blade templates
│   │   ├── layouts/      # Layout files
│   │   ├── admin/        # Admin dashboard views
│   │   ├── livewire/     # Livewire component views
│   │   └── auth/         # Authentication views
│   ├── sass/             # SCSS styles
│   └── js/               # JavaScript files
│
├── routes/
│   ├── web.php           # Web routes
│   ├── api.php           # API routes
│   └── auth.php          # Authentication routes
│
├── database/
│   ├── migrations/       # Database migrations
│   ├── seeders/          # Database seeders
│   └── database.sqlite   # SQLite database
│
├── config/               # Configuration files
├── public/               # Public assets (compiled files)
├── storage/              # File storage, logs
├── tests/                # PHPUnit tests
└── vendor/               # Composer dependencies

Key Files

.env - Environment configuration
config/app.php - Application config
routes/web.php - Web routes
vite.config.js - Asset build config
composer.json - PHP dependencies
package.json - JavaScript dependencies

Understanding Livewire

What is Livewire?

Livewire is a full-stack framework for Laravel that makes building dynamic interfaces simple. You write PHP classes and Blade templates, and Livewire handles the interactivity.

Benefits:

Write dynamic UIs in PHP (no complex JavaScript)
Real-time updates without page refreshes
Seamless integration with Laravel
Simple, elegant syntax

Livewire Components in UltraViolet

Example Component: Dynamic Card

Component Class (app/Livewire/DynamicCard.php):

<?php

namespace App\Livewire;

use Livewire\Component;

class DynamicCard extends Component
{
    public $title = 'Dynamic Card';
    public $count = 0;

    public function increment()
    {
        $this->count++;
    }

    public function decrement()
    {
        $this->count--;
    }

    public function render()
    {
        return view('livewire.dynamic-card');
    }
}

Component View (resources/views/livewire/dynamic-card.blade.php):

<div class="card">
    <div class="card-body">
        <h5 class="card-title">{{ $title }}</h5>
        <p class="display-4">{{ $count }}</p>

        <button wire:click="increment" class="btn btn-primary">
            +
        </button>
        <button wire:click="decrement" class="btn btn-secondary">
            -
        </button>
    </div>
</div>

Using in Blade:

<!-- In any Blade template -->
<livewire:dynamic-card />

That's it! The component is fully reactive. Clicking buttons updates the count without page refresh.

Creating Your Own Livewire Components

# Generate a new component
php artisan make:livewire Counter

# This creates:
# app/Livewire/Counter.php
# resources/views/livewire/counter.blade.php

Edit the component:

<?php
// app/Livewire/Counter.php

namespace App\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public $count = 0;

    public function increment()
    {
        $this->count++;
    }

    public function render()
    {
        return view('livewire.counter');
    }
}

<!-- resources/views/livewire/counter.blade.php -->
<div>
    <h1>{{ $count }}</h1>
    <button wire:click="increment" class="btn btn-primary">
        Increment
    </button>
</div>

Use it:

<livewire:counter />

Livewire Features

Data Binding

<!-- Two-way data binding -->
<input type="text" wire:model="name">
<p>Hello {{ $name }}!</p>

<!-- Lazy binding (update on blur) -->
<input type="text" wire:model.lazy="email">

<!-- Debounced binding (wait 500ms) -->
<input type="text" wire:model.debounce.500ms="search">

Event Handling

<!-- Click events -->
<button wire:click="save">Save</button>

<!-- Form submission -->
<form wire:submit.prevent="save">
    <input type="text" wire:model="title">
    <button type="submit">Save</button>
</form>

<!-- Keydown events -->
<input wire:keydown.enter="submit">

Loading States

<button wire:click="save">
    <span wire:loading.remove>Save</span>
    <span wire:loading>Saving...</span>
</button>

<!-- Target specific actions -->
<div wire:loading wire:target="save">
    Processing...
</div>

Validation

// In component
public $email;

protected $rules = [
    'email' => 'required|email',
];

public function save()
{
    $this->validate();
    // Save logic...
}

<!-- Show validation errors -->
<input type="email" wire:model="email" class="form-control">
@error('email') 
    <span class="text-danger">{{ $message }}</span> 
@enderror

Routes and Navigation

Available Routes

// Authentication
/login
/register
/forgot-password

// Admin Dashboard
/admin/dashboard

// Applications
/admin/apps/calendar
/admin/apps/chat
/admin/apps/email

// UI Components
/admin/ui/alerts
/admin/ui/buttons
/admin/ui/cards

// Tables
/admin/tables/basic
/admin/tables/datatable

// Charts
/admin/charts

// Maps
/admin/maps

// Documentation
/docs

Adding New Routes

Edit routes/web.php:

<?php

use Illuminate\Support\Facades\Route;

Route::get('admin-custom.html', function () {
    return view('admin.custom');
})->name('admin.custom');

// Or with controller
Route::get('admin-users.html', [UserController::class, 'index'])
    ->name('admin.users');

// With middleware
Route::middleware(['auth'])->group(function () {
    Route::get('admin-profile.html', [ProfileController::class, 'edit']);
});

Authentication

Using the Authentication System

UltraViolet includes Laravel Breeze for authentication:

Register a new user:

http://localhost:8000/register

Login:

http://localhost:8000/login

Protecting Routes:

// routes/web.php

// Require authentication
Route::middleware(['auth'])->group(function () {
    Route::get('admin-dashboard.html', [DashboardController::class, 'index']);
});

// Guest only (not logged in)
Route::middleware(['guest'])->group(function () {
    Route::get('/login', [AuthController::class, 'login']);
});

Check Auth in Views:

@auth
    <p>Welcome, {{ auth()->user()->name }}!</p>
@endauth

@guest
    <a href="../auth/login.html">Login</a>
@endguest

Get Current User:

// In controllers or components
$user = auth()->user();
$userId = auth()->id();
$userEmail = auth()->user()->email;

Authentication Variants

UltraViolet includes 3 design variants for auth pages:

Basic - Clean, minimal design
Square - Card-based layout
Wallpaper - Full-screen with background

Access them:

/login              # Basic
/login?ui=square    # Square variant
/login?ui=wallpaper # Wallpaper variant

See Laravel Authentication for details.

Development Workflow

Running Development Server

# Terminal 1: Laravel server
php artisan serve

# Terminal 2: Vite dev server (for hot reload)
npm run dev

Now you have:

Laravel app at http://localhost:8000
Hot module replacement (changes appear instantly)
Live reloading

Making Changes

1. Edit Blade Templates

<!-- resources/views/admin/dashboard.blade.php -->

<x-admin-layout>
    <h1>Custom Dashboard</h1>

    <div class="row">
        <div class="col-md-4">
            <livewire:dynamic-card />
        </div>
    </div>
</x-admin-layout>

2. Edit SCSS

// resources/sass/_custom.scss

.my-custom-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

Save and see changes instantly!

3. Create Livewire Components

php artisan make:livewire UserList

// app/Livewire/UserList.php

public function render()
{
    return view('livewire.user-list', [
        'users' => User::all()
    ]);
}

<!-- resources/views/livewire/user-list.blade.php -->
<div>
    @foreach($users as $user)
        <div class="card">
            <p>{{ $user->name }}</p>
        </div>
    @endforeach
</div>

Database Operations

Using Eloquent ORM

// Create
$user = User::create([
    'name' => 'John Doe',
    'email' => 'john@example.com',
    'password' => Hash::make('password'),
]);

// Read
$users = User::all();
$user = User::find(1);
$user = User::where('email', 'john@example.com')->first();

// Update
$user->name = 'Jane Doe';
$user->save();

// Delete
$user->delete();

Creating Migrations

# Generate migration
php artisan make:migration create_products_table

# Edit migration file

// database/migrations/xxxx_create_products_table.php

public function up()
{
    Schema::create('products', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->text('description');
        $table->decimal('price', 8, 2);
        $table->timestamps();
    });
}

# Run migration
php artisan migrate

Creating Models

php artisan make:model Product

<?php
// app/Models/Product.php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
    protected $fillable = ['name', 'description', 'price'];
}

Use it:

$product = Product::create([
    'name' => 'Widget',
    'description' => 'A great widget',
    'price' => 29.99,
]);

Configuration

Important Config Files

App Configuration (`config/app.php`)

'name' => env('APP_NAME', 'UltraViolet Pro'),
'env' => env('APP_ENV', 'production'),
'debug' => env('APP_DEBUG', false),
'url' => env('APP_URL', 'http://localhost'),
'timezone' => 'UTC',
'locale' => 'en',

Database Configuration (`config/database.php`)

'default' => env('DB_CONNECTION', 'sqlite'),

'connections' => [
    'sqlite' => [
        'driver' => 'sqlite',
        'database' => env('DB_DATABASE', database_path('database.sqlite')),
    ],
    'mysql' => [
        'driver' => 'mysql',
        'host' => env('DB_HOST', '127.0.0.1'),
        'port' => env('DB_PORT', '3306'),
        'database' => env('DB_DATABASE', 'forge'),
        'username' => env('DB_USERNAME', 'forge'),
        'password' => env('DB_PASSWORD', ''),
    ],
],

Livewire Configuration (`config/livewire.php`)

'class_namespace' => 'App\\Livewire',
'view_path' => resource_path('views/livewire'),
'layout' => 'layouts.admin',
'temporary_file_upload' => [
    'disk' => 'local',
    'rules' => 'file|max:12288', // 12MB
],

Troubleshooting

Common Issues

1. "Class not found" errors

# Clear and regenerate autoload files
composer dump-autoload

2. "Key not found" error

# Generate app key
php artisan key:generate

3. Database connection errors

# Check .env database settings
# Verify database file exists (SQLite)
ls -la database/database.sqlite

# Or test MySQL connection
php artisan tinker
DB::connection()->getPdo();

4. Livewire not working

# Clear Livewire cache
php artisan livewire:delete-uploads

# Clear application cache
php artisan cache:clear
php artisan config:clear
php artisan view:clear

5. Assets not loading

# Rebuild assets
npm run build

# Or run dev server
npm run dev

6. Permission errors (Linux/Mac)

# Fix storage permissions
chmod -R 775 storage bootstrap/cache
chown -R www-data:www-data storage bootstrap/cache

# Or for local development
chmod -R 777 storage bootstrap/cache

Debug Commands

# View all routes
php artisan route:list

# Clear all caches
php artisan optimize:clear

# Check config
php artisan config:show

# Run tinker (REPL)
php artisan tinker
>>> User::count()
>>> DB::table('users')->get()

Deployment

Preparing for Production

Set environment to production:
```
APP_ENV=production
APP_DEBUG=false
```

Optimize application:

composer install --optimize-autoloader --no-dev
php artisan config:cache
php artisan route:cache
php artisan view:cache

Build assets:
```
npm run build
```
Set proper permissions:
```
chmod -R 755 storage bootstrap/cache
```
Set up queue worker (if using):
```
php artisan queue:work --daemon
```

Deployment Options

Shared Hosting - Upload via FTP, configure document root
VPS/Cloud - Forge, Envoyer, or manual setup
Docker - Use included docker-compose.yml
Laravel Vapor - Serverless deployment

See Laravel deployment docs for details.

Next Steps

Learn More

Theming Guide - Customize colors and styles
Livewire Documentation - Master Livewire
Laravel Documentation - Learn Laravel
Laravel Authentication - User management

Explore Features

Create custom Livewire components
Add new routes and pages
Build APIs
Customize authentication
Add email notifications
Implement job queues

Support

Need help with Laravel setup?

Laravel Docs: https://laravel.com/docs
Livewire Docs: https://livewire.laravel.com
Email: support@huement.com

Documentation

Getting Started

Authentication

Livewire

Dashboard & Widgets

Applications

UI Components

Data Visualization

E-commerce

Job Board

Cryptocurrency

Advanced

Laravel Application Setup

Laravel Application Setup

What You Get

Prerequisites

Check Your Environment

Installation Steps

Step 1: Extract or Clone

Step 2: Install PHP Dependencies

Step 3: Install Frontend Dependencies

Step 4: Environment Configuration

Step 5: Configure Environment Variables

Step 6: Create Database

For SQLite (Recommended for Development)

For MySQL

Step 7: Run Migrations

Step 8: Seed Database (Optional)

Step 9: Build Frontend Assets

Step 10: Start the Application

Project Structure

Laravel Application Structure

Key Files

Understanding Livewire

What is Livewire?

Livewire Components in UltraViolet

Example Component: Dynamic Card

Creating Your Own Livewire Components

Livewire Features

Data Binding

Event Handling

Loading States

Validation

Routes and Navigation

Available Routes

Adding New Routes

Authentication

Using the Authentication System

Authentication Variants

Development Workflow

Running Development Server

Making Changes

1. Edit Blade Templates

2. Edit SCSS

3. Create Livewire Components

Database Operations

Using Eloquent ORM

Creating Migrations

Creating Models

Configuration

Important Config Files

App Configuration (config/app.php)

Database Configuration (config/database.php)

Livewire Configuration (config/livewire.php)

Troubleshooting

Common Issues

1. "Class not found" errors

2. "Key not found" error

3. Database connection errors

4. Livewire not working

5. Assets not loading

6. Permission errors (Linux/Mac)

Debug Commands

Deployment

Preparing for Production

Deployment Options

Next Steps

Learn More

Explore Features

Support

App Configuration (`config/app.php`)

Database Configuration (`config/database.php`)

Livewire Configuration (`config/livewire.php`)