AIOHM

Appearance

Frontend Development Workflow (Vite) ​

This guide provides an overview of the frontend development workflow for the AIOHM platform, which uses Vite for asset compilation and serving.

Overview ​

The project uses Vite as its build tool for all frontend assets, including JavaScript and CSS. It provides extremely fast Hot Module Replacement (HMR) for a seamless development experience and optimized builds for production.

Key Files ​

  • vite.config.mjs: The main configuration file for Vite. It defines entry points, plugins, and server options.
  • package.json: Defines frontend dependencies and contains the scripts for running Vite (dev, build).
  • resources/js/app.js: The primary JavaScript entry point for the application.
  • resources/css/app.css: The primary CSS/PostCSS entry point for the application.

Development Workflow ​

For local development, you should always use the composer dev command.

bash
# Starts the Laravel server, queue worker, and Vite dev server
composer dev

This command runs npm run dev concurrently, which starts the Vite development server. With the dev server running, any changes you make to files in resources/js/ or resources/css/ will be instantly reflected in your browser without needing a full page reload.

Building for Production ​

When you are ready to deploy your frontend assets, run the following command:

bash
npm run build

This will compile, minify, and version all assets, placing them in the public/build directory. The application is configured to automatically use these built assets in production environments.

Troubleshooting ​

Error: "Port 5173 is already in use" ​

The Vite development server is configured to run on port 5173 and will fail if this port is occupied by another process. This is intentional to prevent Content Security Policy (CSP) errors in the browser.

If you encounter this error, follow these steps:

  1. Find the conflicting process:
bash
# On macOS or Linux
lsof -i :5173
  1. Stop the process (use the PID from the previous step):
bash
kill <PID>
# If that doesn't work:
kill -9 <PID>
  1. Restart the dev server:
bash
composer dev

Assets (CSS/JS) Are Not Loading in the Browser ​

This is often related to the port issue described above. If the Vite server is running on a port that is not whitelisted by the application's Content Security Policy, the browser will block the assets from loading.

  • Ensure you have run composer dev and that the Vite server is running correctly on port 5173.
  • Check your browser's developer console for any CSP violation messages. These messages will tell you exactly which resource was blocked and why.