Get up and running with LaraGrape in minutes with this step-by-step guide.

Before you begin, ensure you have:

• PHP: 8.2 or higher
• Laravel: 12.0 or higher
• Composer: 2.0 or higher
• Node.js: 18.0 or higher
• Database: MySQL 8.0+, PostgreSQL 13+, or SQLite 3.35+

composer require streats22/laragrape

php artisan laragrape:setup --all

This command will:

• ✅ Publish all necessary files
• ✅ Update namespaces automatically
• ✅ Create database tables
• ✅ Seed initial data
• ✅ Register commands and services

php artisan make:filament-user

Follow the prompts to create your admin credentials.

npm install
npm run build

php artisan serve

• Admin Panel: http://localhost:8000/admin
• Frontend: http://localhost:8000

1. Login to Admin Panel

   • Go to http://localhost:8000/admin
   • Use the credentials you created

2. Create a New Page

   • Navigate to Pages → Create Page
   • Fill in the basic information:
     • Title: "Welcome to My Site"
     • Slug: "welcome"
     • Meta Description: "Welcome to my new website"

3. Use the Visual Editor

   • Switch to the Visual Editor tab
   • You'll see the GrapesJS editor interface
   • Drag blocks from the left sidebar to the canvas

4. Add Some Content

   • Drag a Hero block to the top
   • Add a Text block below it
   • Add a Button component
   • Customize the content by clicking on elements

5. Save and Publish

   • Click Save to save your work
   • Set Is Published to Yes
   • Click Create Page

6. View Your Page

   • Visit http://localhost:8000/welcome
   • You should see your published page!

1. Configure Site Settings

   • Go to Site Settings in the admin panel
   • Set your site name, logo, and contact information
   • Configure header and footer settings

2. Set Up Tailwind Theme

   • Go to Tailwind Config in the admin panel
   • Create a new configuration
   • Customize colors, typography, and spacing
   • Set it as active

1. Use the Block Builder

   • Go to Custom Blocks → Create Custom Block
   • Give it a name like "Feature Card"
   • Choose a category (e.g., "components")

2. Design Your Block

   • HTML Tab: Write the structure
   • CSS Tab: Add styling
   • JavaScript Tab: Add interactivity
   • Preview Tab: See how it looks

3. Use Your Block

   • Save the block
   • Go back to page editing
   • Your custom block will appear in the block manager

Create .blade.php files in resources/views/filament/blocks/:

{{-- @block id="my-block" label="My Block" description="A custom block" --}}
<div class="my-custom-block">
    <h3 data-gjs-type="text" data-gjs-name="title">Block Title</h3>
    <p data-gjs-type="text" data-gjs-name="content">Content here</p>
</div>

Edit resources/css/site.css for global styles:

/* Custom styles */
.my-custom-block {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 2rem;
    color: white;
}

Access settings in your views:

@php
    $siteSettings = app(\App\Services\SiteSettingsService::class);
    $headerSettings = $siteSettings->getHeaderSettings();
@endphp

<header style="background-color: {{ $headerSettings['background_color'] }}">
    {{ $headerSettings['logo_text'] }}
</header>

# Start development server
php artisan serve

# Watch for changes
npm run dev

# Build for production
npm run build

# Clear caches
php artisan optimize:clear

# Rebuild Tailwind CSS
php artisan tailwind:rebuild

# Setup LaraGrape (if needed)
php artisan laragrape:setup --all

# Clear LaraGrape cache
php artisan cache:clear

1. Explore the Admin Panel - Familiarize yourself with all sections
2. Create Multiple Pages - Build out your site structure
3. Customize Your Theme - Set up your brand colors and typography
4. Add Custom Blocks - Create reusable components for your needs

1. User Roles & Permissions - Set up different user access levels
2. Media Management - Add image and file upload capabilities
3. Form Handling - Create contact forms and surveys
4. SEO Optimization - Set up meta tags and sitemaps
5. Performance - Implement caching and optimization

Setup Command Fails

php artisan optimize:clear
php artisan laragrape:setup --all

Blocks Not Loading

php artisan cache:clear

Admin Panel Issues

php artisan filament:install --panels
php artisan make:filament-user

Frontend Assets

npm run build

• Documentation: Check our Wiki
• Troubleshooting: See Common Issues
• API Reference: Check Service Classes
• GitHub Issues: Report bugs and request features

• Installation Guide - Complete setup instructions
• Block System - Understanding blocks
• Custom Blocks - Building custom blocks
• Admin Panel - Admin interface guide
• API Reference - Service classes and methods

Congratulations! You're now ready to build amazing websites with LaraGrape! 🍇

The quick start guide has you covered for the basics. Explore the rest of the documentation to unlock the full potential of LaraGrape.