Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/AlexQuintana147/EducaPeru/llms.txt

Use this file to discover all available pages before exploring further.

EducaPerú’s asset pipeline is powered by Vite with the official Laravel plugin. Vite compiles the CSS and JavaScript entry points in resources/ and outputs versioned files to public/build/. Tailwind CSS is installed locally via the @tailwindcss/vite plugin and imported directly in resources/css/app.css — static files (images, videos, fonts, and PDFs) are served straight from the public/ directory without any compilation step.

Vite Configuration

The project’s vite.config.js registers both the Laravel plugin and the @tailwindcss/vite plugin, configures the CSS and JS entry points, enables Hot Module Replacement during development, and excludes compiled view files from the file watcher:
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        tailwindcss(),
    ],
    server: {
        watch: {
            ignored: ['**/storage/framework/views/**'],
        },
    },
});

CSS Entry Point

resources/css/app.css imports Tailwind via the @tailwindcss package, declares explicit @source paths so Tailwind scans all Blade templates and JS files for class names, and sets a custom --font-sans theme token:
resources/css/app.css
@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
}

JavaScript Entry Point

resources/js/app.js is minimal — it imports bootstrap.js, which configures Axios with the X-Requested-With header required for Laravel to recognise AJAX requests:
resources/js/app.js
import './bootstrap';
resources/js/bootstrap.js
import axios from 'axios';
window.axios = axios;

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

Build Commands

npm run build
Running npm run build compiles and versions the assets into public/build/ and generates a manifest.json used by the @vite Blade directive. Running npm run dev starts the Vite dev server with Hot Module Replacement so changes to CSS and JS files are reflected in the browser instantly without a full page reload.

Public Directory Structure

Static assets are organised into purpose-specific subdirectories under public/:
public/
├── image/
│   ├── logo1prueba.webp    # Site logo
│   ├── clases1.webp        # Courses section image
│   └── desarrollo2.webp    # Web dev section image
├── videos/
│   └── 1.webm – 5.webm    # Hero background videos
├── fonts/
│   ├── header.woff2        # Custom display font
│   └── educaperu.woff2     # Custom brand font
└── pdf/
    ├── DeysiAlicia.pdf     # Instructor CV
    └── RoxanaKarina.pdf    # Instructor CV

Referencing Assets in Blade

Use Laravel’s asset() helper to generate correct absolute URLs to any file under public/. This ensures links remain valid regardless of the application’s base URL or subdirectory configuration:
<img src="{{ asset('image/logo1prueba.webp') }}" alt="EducaPerú">
<video src="{{ asset('videos/1.webm') }}" autoplay muted loop></video>
<a href="{{ asset('pdf/DeysiAlicia.pdf') }}" download>Download CV</a>
The master layout (layouts/app.blade.php) also loads Tailwind via the cdn.tailwindcss.com script tag alongside the compiled app.css. During a future production hardening pass, the CDN <script> tag can be removed once the compiled stylesheet is confirmed to cover all utility classes in use — removing it will eliminate the extra network round-trip and enable full dead-code elimination through Vite’s build step.

Build docs developers (and LLMs) love