TinyMVC Documentation

Asset Bundling with Vite

The TinyMVC framework comes with integrated Vite.js support for modern asset bundling, including:

JavaScript and CSS bundling
Hot Module Replacement (HMR) during development
TailwindCSS integration
React support (when needed)
Efficient production builds

Getting Started

Your project comes pre-configured with Vite and TailwindCSS. To begin development:

npm install
npm run dev

This will start the Vite development server with hot reloading enabled.

Vite Configuration

The framework includes a default Vite configuration (vite.config.js) with these features:

import { defineConfig } from 'vite';
import path from 'path';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig(({ mode }) => ({
    plugins: [tailwindcss()],
    base: mode === 'production' ? '/assets/build/' : '/',
    root: path.resolve(__dirname, './resources/app'),
    server: {
        strictPort: true,
        port: 5133,
    },
    build: {
        outDir: path.resolve(__dirname, './public/assets/build'),
        emptyOutDir: true,
        manifest: true,
        rollupOptions: {
            input: path.resolve(__dirname, './resources/app/app.js'),
        },
    },
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './resources/app'),
        },
    },
}));

Note: The configuration automatically handles different paths for development and production environments.

Entry Point

The main JavaScript entry point is located at resources/app/app.js:

import './app.css';
import Alpine from 'alpinejs';
import axios from 'axios';

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

Alpine.start();

This file initializes Alpine.js and Axios by default. You can modify it to include your own JavaScript logic.

Including Assets in Views

To include the bundled assets in your views, use the vite() helper:

<!DOCTYPE html>
<html>
<head>
    <title>My App</title>
    <?= vite(); // including vite's script/modules ?>
</head>
<body>
    <?= $content ?>
</body>
</html>

This helper automatically includes the correct scripts and stylesheets for both development and production environments.

Working with Static Assets

To include images, fonts, or other static assets:

Place them in the resources/images or resources/fonts directories
Configure them in app.js:

import.meta.glob([
    '../images/**',
    '../fonts/**',
]);

Then reference them in your views:

<img src="<?= vite()->asset('/images/logo.png') ?>">

React Support

When using React, add the React refresh tag before including Vite:

<?= vite()->reactRefreshTag() ?>
<?= vite() ?>

Note: Remember to install React dependencies when using this feature.

Production Build

To create an optimized production build:

npm run build

This will generate minified assets in the public/assets/build directory.

TailwindCSS Configuration

The framework includes TailwindCSS configured to work with Vite.

Your CSS file (resources/app/app.css) should include Tailwind directives:

@import 'tailwindcss';

@source '../views/**/*.php';
@source './**/*.js';

👉 Learn more about TailwindCSS

Available NPM Scripts

{
    "scripts": {
        "dev": "vite",          // Start development server
        "build": "vite build"   // Create production build
    }
}

Note: For development, make sure you clear ./public/assets/build folder before running the npm run dev command.