My default Laravel project setup
Rick Kuilman • December 21, 2019laravel
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.
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
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
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
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