Laravel 9 + Vite + Svelte + Tailwind CSS

This starter template includes:

• Laravel 9
  • with Passport package - so recommended OAuth 2.0 with PKCE could also be implemented if needed; Passport version is such that Passport::Routes() command is still needed)
  • jwt token for authenticated users transfered via cookie
  • a model property (and its corresponding database table field) containing a file path / address can be automatically synchronized with a file it refers to (a new file is created on executing a regular model's create() command; an old file is deleted on a successful update or deletion of a record via model methods)
• Vite
• Svelte
  • with tinro Svelte client router
  • browser can be refreshed on client routes and appropriate route will be displayed (although client user session is destroyed and a user should login again)
  • svelte-fa Svelte Font Awesome component
  • i18n support - in the same .json files with server-side translation strings; it could be synched with server-side locale
  • Skeleton UI library - based on Tailwind and Svelte
• Tailwind CSS (with @tailwindcss/forms plugin)
• Axios (is optional, built-in fetch() is already OK to send API calls from client side)
• TypeScript

Information

• The client Svelte app is located in resources/js/.
• You can use resources/css/ for styling.
• Tailwind CSS styles should be applied via @apply in Svelte component's styles within <style> (like recommended here)...
• ... or remove Tailwind CSS styles (classes) if you don't want to use them by commenting lines in resources/css/app.css file
• ... Comment those lines too when Skeleton UI is installed, for it takes care about those Tailwind styles as well when its all.css styles are imported like in resources/js/App.svelte
• Responsive design is performed by means of Tailwind classes and by using a resources/js/components/SideMenus.svelte Svelte component as the same content for the Drawer Skeleton UI Svelte component on small screens as well as for the Left Sidebar menu on wider screens.

Installation

Install the composer dependencies (often is better to remove the composer.lock file first):

composer install

Make a copy of the .env.example file named .env - as following in Linux:

cp .env.example .env

(xcopy instead of cp in Windows command prompt)

Generate an app key:

php artisan key:generate

Fill the .env file with database information and run migrations (create database tables and their columns, indices etc.):

php artisan migrate:fresh

(could be without :fresh if database has not already been used)

Fill database tables with test (fake) data by running db seeders:

php artisan db:seed

Create Passport clients to enable user authentication:

php artisan passport:install

Create a symlink to provide public access to files:

php artisan storage:link

Server part is good to go now!

Install client (Svelte) part with all package.json dependencies (maybe better with package-lock.json file removed):

npm install

Run vite to server your assets/bundle:

npm run dev

Open a new terminal instance and serve the application:

php artisan serve

Deployment

Build the app:

npm run build

Now all you have to do is serve the Laravel app in a production environment.