Combine the power of Laravel and Vite alongside Vue 3 and Tailwind CSS.

• PHP 8.1
• MySQL 8.0
• Laravel 9.x
• Vite 2
• Vue 3
• Tailwind CSS 3

We will be running Laravel in a Docker development environment using Laravel Sail. Although running PHP directly on your computer (host) is not a requirement, we still need it to install Sail for the first time.

If you're on macOS, you can install PHP using Homebrew:

brew install php

Clone this repo:

git clone [email protected]:mislam/laravel-vite.git my-awesome-project
cd my-awesome-project

Install Sail:

composer require laravel/sail --dev

Add a new line in your ~/.bashrc or ~/.bash_profile to create an alias (shortcut) to the sail command :

alias sail='[ -f sail ] && bash sail || bash vendor/bin/sail'

Make a copy of the local .env file and generate encryption key:

cp .env.local.example .env
php artisan key:generate

Start all of the Docker containers defined in docker-compose.yml:

sail up -d

Run database migrations:

sail php artisan migrate

Install NPM dependencies and run Vite's dev server:

npm install
npm run dev

Now head over to your browser and open http://localhost.

You can use Laravel Forge to deploy the application on a VPS server, such as: DigitalOcean Droplets or Amazon EC2.

If you have scalibility in mind, go with Laravel Vapor. It uses AWS Lambda to deploy and auto-scale in a serverless platform.

Run the deploy script on production environment:

npm run deploy

This will store production-ready assets inside public/dist directory. If you want to fine-tune this process, you can create a script to publish the assets to Amazon S3 or DigitalOcean Spaces, and serve them via CDN, such as: CloudFlare or Amazon CloudFront.

If you ever need to update the favicon, save it as artworks/favicon/master.png with a resolution of 1024x1024 pixel, and run:

npm run favicon:generate

This will generate new favicon assets under resources/favicon.