As a developer I have found myself typing in the same commands, requiring the same packages and setting the same configurations over and over again to make a fresh Laravel application my own. Today I'll show my favorite stack, explain why I use this setup and share a nice command to automate this.

Frontend

Though I am more of a back-end guy, I like to have my frontend tools standardized over all my projects. It makes for an easy transition between them and it serves as a stepping stone for new projects.

Tailwind & PurgeCSS

After years of using (and fighting) Bootstrap as my main frontend framework, I was delighted to see what TailwindCSS had to offer. No more thinking about naming things!

On top of that I like to have my compressed CSS files as small as possible and only contain classes that are actually used. This is done with PurgeCSS: it removes all the unused classes from Tailwind's initial 603.3kb file.

For this I use the tailwindcss-preset package:

# require trough composer
composer require laravel-frontend-presets/tailwindcss --dev

# apply the preset
php artisan preset tailwindcss

# install the npm dependencies
npm install

At this point I noticed that some unnecessary changes are made in resources/js/bootstrap.js, let's revert those changes:

git checkout resources/js/bootstrap.js

The default tailwind.config.js provided by the preset is an empty set that should be changed according to your own preferences. I like to have all the options available (for reference purposes) and make changes along the way:

# Remove the default of the preset 
rm tailwind.config.js

# Replace with a full version from TailwindCSS
node node_modules/.bin/tailwind init --full

Ready to rock!

npm run dev

VueJS

My choice of frontend framework is VueJS. It has been the default frontend shipped with Laravel for a long time. Nowadays you need to install it through a separate package. When it comes to it I almost always add the Auth scaffolding as well.

composer require laravel/ui --dev
php artisan ui vue --auth

.gitignore

Laravel ships out-of-the-box with support to build front-end assets locally before deploying. As I do not want to fill up the repo with unnecessary files that can be easily build during CI, I ignore the files that are generated by npm run prod.

echo -e "/public/js\n/public/css\n/public/mix-manifest.json" >> .gitignore

As I use PhpStorm as my default IDE, a new folder named .idea will automatically be created to my working directory by PhpStorm. Since it I don't want to constraint all users to use the same IDE (config), I will ignore the whole folder.

echo ".idea" >> .gitignore

All at once

The following command brings it all together. Simply copy-paste the following command into a fresh Laravel project and you're ready to go!

echo -e "/public/js\n/public/css\n/public/mix-manifest.json\n.idea" >> .gitignore &&
composer require laravel-frontend-presets/tailwindcss --dev &&
php artisan preset tailwindcss &&
npm install &&
rm tailwind.config.js &&
git checkout resources/js/bootstrap.js &&
node node_modules/.bin/tailwind init --full &&
composer require laravel/ui --dev &&
php artisan ui vue --auth &&
npm run dev