Example daily note

2024-08-29.md

...

2024-08-29 - Thursday

...

Plan for today

• Install PHP and Laraval tools
• Create test application
• Create Laravel + Jetstream app with Inertia, Vue.js, TypeScript, within Docker using Laravel Sail
  • Created the app using: composer create-project laravel/laravel knowii-laravel
  • Added Jetstream: composer require laravel/jetstream
  • Added Inertia: php artisan jetstream:install inertia --teams --api --verification --pest --ssr
    • Enabled features
      • Teams support
      • API support
      • Email verification support
      • PHP Pest
      • SSR support
  • Installed everything and ran DB migrations: npm install && npm run build && php artisan migrate
  • Added Laravel Sail: composer require laravel/sail --dev
  • Installed Laravel Sail with PostgreSQL and Redis:
    • php artisan sail:install --devcontainer --with pgsql,redis
  • Started Sail as a daemon: ./vendor/bin/sail up
  • Ran DB migrations using Sail: ./vendor/bin/sail artisan migrate
  • TODO
    • Learn concepts: https://jetstream.laravel.com/concept-overview.html
    • Customize application logo
      • resources/js/Components/ApplicationLogo.vue
      • resources/js/Components/ApplicationMark.vue
      • resources/js/Components/AuthenticationCardLogo.vue
      • npm run build
    • Explore SSR support: https://laravel.com/docs/11.x/vite#ssr
• Do initial config: https://laravel.com/docs/11.x/installation#initial-configuration (needed with Jetstream??)
• Explore config: https://laravel.com/docs/11.x/configuration#environment-configuration
• Learn about databases and migrations: https://laravel.com/docs/11.x/installation#databases-and-migrations
• Learn about env config: https://laravel.com/docs/11.x/configuration#environment-configuration
• https://medium.com/@moinuddinchowdhury/how-to-use-primevue-with-laravel-and-inertia-2f75bdaea5f3
• Try to use PrimeReact with Laravel: https://stackoverflow.com/questions/67909792/how-to-add-primereact-to-laravel-with-react
• Laravel + Inertia + TS and Vue.js
  • https://advanced-inertia.com/blog/typescript
  • https://laravel.io/articles/enhancing-laravel-and-inertiajs-with-typescript-and-vue-3s-composition-api-to-build-a-powerful-spa
  • https://www.youtube.com/watch?v=xDcsrGGvCHI
  • https://medium.com/@moinuddinchowdhury/how-to-use-primevue-with-laravel-and-inertia-2f75bdaea5f3
  • Examples
    • https://github.com/dawidholka/laravel-inertia-primevue-starter/tree/master
    • https://github.com/connorabbas/primevue-breeze-inertia
  • Vue TSC wrapper
    • npm add -D vue-tsc
    • npx vue-tsc --noEmit
    • "build": "npm run type-check && vite build"
    • "type-check": "npx vue-tsc --noEmit
  • TypeScript Vue plugin
• Follow Sail tutorial for pgsql/pgvector etc: https://www.thestupidprogrammer.com/blog/laravel-sail-with-postgres-and-pgvector/
• Fix Supabase config
  • https://supabase.com/docs/guides/auth/server-side/nextjs
  • https://supabase.com/docs/guides/getting-started/tutorials/with-nextjs?queryGroups=language&language=ts#login-and-signup-form

Notes of the day

• How to add TypeScript to a Laravel app that uses Vue.js
  • Add TypeScript to the devDependencies
  • Run npx tsc init
  • Configure TypeScript
    • Add Laravel front-end sources under paths: "@/*": ["./resources/js/*"]
    • Set "isolatedModules": true
  • Rename files
    • app.js to app.ts
    • bootstrap.js to bootstrap.ts
    • Adapt resources/views/* accordingly
  • Create TS interfaces/types
  • Adapt Vue files
    • Top script tag: <script lang="ts" setup>
    • Components
      • Props: const props = defineProps<{ mustVerifyEmail: boolean, status: string, userTs: User }>();
    • When passing props to components, make sure to pass in the required information
  • References: https://www.youtube.com/watch?v=xDcsrGGvCHI
• PHP
• Composer
  • Dependency management
  • https://getcomposer.org/
• Laravel
  • References
    • Website: https://laravel.com/
    • Documentation: https://laravel.com/docs/11.x/horizon
    • X: https://x.com/laravelphp
  • Artisan: CLI
    • https://laravel.com/docs/11.x/artisan
  • Jetstream
    • https://jetstream.laravel.com
    • Features
      • API
      • Authentication
      • Registration
      • Profile management
      • Password update
      • Password confirmation
      • Two-factor authentication
      • Browser sessions
      • Teams
    • laravel new knowii --jet
    • php artisan migrate
    • php artisan spark:install
    • php artisan migrate
    • MustVerifyEmail feature: https://laravel.com/docs/11.x/verification
  • TALL: https://github.com/laravel-frontend-presets/tall
  • Inertia: SPAs
    • https://inertiajs.com/
  • Livewire
    • Front-end framework for Laravel
    • Uses the Blade templating engine
    • References
      • https://livewire.laravel.com/
  • Filament: full-stack components: https://filamentphp.com/
  • Spark
    • Payments
    • https://spark.laravel.com/
  • Scout: https://laravel.com/docs/11.x/scout
  • Envoyer
    • Deployments
    • https://envoyer.io/
  • Cashier
    • Stripe/Paddle integration
    • https://laravel.com/docs/11.x/cashier-paddle
    • https://laravel.com/docs/11.x/billing
  • Horizon: https://laravel.com/docs/11.x/horizon
  • Sanctum: https://laravel.com/docs/11.x/sanctum
  • Nova: Admin panel
    • https://nova.laravel.com/
  • Telescope:
    • Monitoring, queues, requests, exceptions, logs, etc
    • https://laravel.com/docs/11.x/telescope
  • Disposable email
    • https://github.com/Propaganistas/Laravel-Disposable-Email
    • composer require propaganistas/laravel-disposable-email
  • Pint
    • Code style
    • https://laravel.com/docs/11.x/pint
  • Forge
    • Hosting
    • https://forge.laravel.com/
• PHP-FPM
• Meilisearch @ Hetzner
• Redis
  • DBngin
  • TablePlus
• DbGate
  • SQL + NoSQL Database client
  • Free and open-source (GPLv3)
  • Supports MySQL, PostgreSQL, MS SQL, Oracle, MongoDB, SQLite, ...
  • Supports Windows, MacOS and Linux
  • https://dbgate.org/
• PrimeVue
  • Port of Prime for Vue.js
  • https://primevue.org/
• How to add PHP and Laravel support for Visual Studio Code
  • PHP
    • Intellisense support for PHP
      • https://intelephense.com/
      • https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client
    • Composer: https://marketplace.visualstudio.com/items?itemName=DEVSENSE.composer-php-vscode
    • PHP Debug: https://marketplace.visualstudio.com/items?itemName=xdebug.php-debug
    • PHP CS Fixer: https://marketplace.visualstudio.com/items?itemName=junstyle.php-cs-fixer
  • Laravel
    • Intellisense: https://marketplace.visualstudio.com/items?itemName=amiralizadeh9480.laravel-extra-intellisense#views-and-variables
    • Goto: https://marketplace.visualstudio.com/items?itemName=absszero.vscode-laravel-goto
    • Artisan: https://marketplace.visualstudio.com/items?itemName=ryannaddy.laravel-artisan
    • Browse Laravel docs: https://marketplace.visualstudio.com/items?itemName=austenc.laravel-docs
  • Pest and PHPUnit
    • https://github.com/m1guelpf/better-pest
    • https://github.com/calebporzio/better-phpunit
  • References
    • https://seankegel.com/vscode-for-php-and-laravel
• PHP Pest
  • Testing framework
  • References
    • https://pestphp.com/
• Laravel Fortify
  • Front-end agnostic authentication backend implementation for Laravel
  • Backend controllers and scaffolding for Laravel authentication
  • Fortify registers the routes and controllers needed to implement login, registration, password reset, email verification, etc
  • References
    • Documentation: https://laravel.com/docs/11.x/fortify
    • Sources: https://github.com/laravel/fortify

Done today

• Decided to explore Laravel's ecosystem
• Joined Obsidian insiders (Catalyst program) and started using v1.7.x
• Love the startup speed improvements with Obsidian 1.7.x
• ![[2024-08-29 - Obsidian 1.7 startup speed improvements.png]]

Discovered today

• Composer
  • PHP dependency management solution
  • https://getcomposer.org
• How to install PHP on Ubuntu
  • sudo add-apt-repository ppa:ondrej/php
  • sudo apt update
  • sudo apt upgrade
  • sudo apt install unzip php8.3 php8.3-cli php8.3-{bz2,curl,mbstring,intl}
  • Server API packages
    • sudo apt install php8.3-fpm
    • sudo a2enconf php8.3-fpm
    • sudo service apache2 restart
    • sudo service nginx restart
    • If upgrading from a previous version
      • sudo a2disconf php8.2-fpm
      • sudo apt purge php8.2*
  • List PHP packages installed on the system and save into a packages.txt file
    • dpkg -l | grep php | tee packages.txt
  • Add ondred/php PPA software repository (kept up to date)
    • sudo add-apt-repository ppa:ondrej/php
    • sudo apt update
• How to install Composer on Ubuntu
  • curl -sS https://getcomposer.org/installer -o /tmp/composer-setup.php
  • HASH=curl -sS https://composer.github.io/installer.sig
  • php -r "if (hash_file('SHA384', '/tmp/composer-setup.php') === '$HASH') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
  • sudo php /tmp/composer-setup.php --install-dir=/usr/local/bin --filename=composer
  • composer --version
• Laravel
  • Full-stack PHP framework
  • composer global require laravel/installer
  • Commands
    • php artisan route:list: List API routes
• How to create a Laravel project
  • First, make sure php-xml is installed. laravel/pint requires it: sudo apt install php-xml
  • Second, install a sqlite driver (used by default in Laravel projects): sudo apt install php8.3-sqlite3
  • Third, install a pgsql driver (because why not): sudo apt install php-pgsql
  • composer create-project laravel/laravel example-app
• How to run a Laravel application
  • Go to the root project folder
  • php artisan serve
• Nginx
  • Simple but powerful Web server
• How to install Nginx on Ubuntu
  • sudo add-apt-repository ppa:ondrej/nginx
  • sudo apt update
  • sudo apt install nginx
• Laravel Herd
  • PHP development environment
  • Installs composer, laravel, expose, node, npm, nvm, and even PostgreSQL and Redis DBs (paid feature)
  • Does not support Linux
  • https://herd.laravel.com/
• Valet
  • PHP development environment using NGINX
  • Supports Laravel, Zend, ...
  • Commands
    • valet park: add directories to the valet path so that each folder can be accessed using foldername.test
      • Reference: https://laravel.com/docs/11.x/valet#the-park-command
    • valet forget: remove a directory from the valet path (undoes what valet park does)
    • valet link: make folders individually accessible with foldername.test
      • Reference: https://laravel.com/docs/11.x/valet#the-link-command
    • valet unlink: reverse operation of valet link
    • valet use php@x.y: switch to another version of PHP
    • valet secure laravel: serve using TLS
    • valet unsecure laravel
    • valet status
  • Configuration
    • Possible to create a .valetrc file at the root of the project
      • php=php@x.y: Add that to the .valetrc file to tell Valet to use that version of PHP
  • References
    • https://laravel.com/docs/11.x/valet
• How to install Valet on Ubuntu
  • sudo apt-get install network-manager libnss3-tools jq xsel dnsmasq inotify-tools
  • composer global require cpriego/valet-linux
  • valet install
  • Bash: echo "export PATH=$PATH:$HOME/.config/composer/vendor/bin" >> ~/.bashrc
  • ZSH: echo "export PATH=$PATH:$HOME/.config/composer/vendor/bin" >> ~/.zshrc
  • Activate Nginx: sudo systemctl start nginx
  • To reset the installation: composer global require cpriego/valet-linux
  • Reference: https://dev.to/dhimaskirana/install-laravel-valet-on-linux-ubuntu-1gmf
• DBngin
  • All-in-one database management tool that includes MySQL, PostgreSQL and Redis
  • MacOS application
  • Does not support Linux: TablePlus/DBngin#5
  • Once installed, connect to the database at 127.0.0.1 using root as username and an empty string for the password
  • References
    • https://dbngin.com/
• Laravel Sail
  • CLI for building Laravel apps using Docker and docker-compose
  • Great starting point for building a Laravel application using PHP, MySQL, PostgreSQL, Redis
  • Useful during development, but not required for production
  • Commands
    • Start Sail as a daemon: ./vendor/bin/sail up
    • Run DB migrations: ./vendor/bin/sail artisan migrate
  • References
    • https://laravel.com/docs/11.x/sail
• How to install Laravel Sail
  • curl -s "https://laravel.build/example-app?with=pgsql,redis,meilisearch,selenium,mailhog" | bash
  • References
    • Choosing the Sail services to install: https://laravel.com/docs/8.x#choosing-your-sail-**services**
• How to add Vue.js support to IntelliJ Idea
  • Plugins to install
    • Vue.js
• How to add Laravel support to IntelliJ Idea
  • Plugins to install
    • Laravel Idea: IntelliJ/PhpStorm plugin offering IDE support for Laravel
      • Paid plugin: https://plugins.jetbrains.com/plugin/13441-laravel-idea/pricing
    • .env files Support
    • Inertia.js Support
    • Tailwind CSS Smart Completions
• TypeScript support for Inertia
  • Libs
    • https://github.com/lepikhinb/momentum-trail
    • Permissions: https://github.com/lepikhinb/momentum-lock
    • Pagination: https://github.com/lepikhinb/momentum-paginator
    • Modals: https://github.com/lepikhinb/momentum-modal
    • Layout: https://github.com/lepikhinb/momentum-layout
    • Realtime back-end driven request validation: https://github.com/lepikhinb/momentum-preflight
    • Run commands on file changes: https://github.com/lepikhinb/vite-plugin-watch
  • References
    • https://github.com/lepikhinb/momentum-trail
• Ploi
  • Hosting and deployment platform
  • Optimized for Laraval
  • References
    • https://ploi.io/
• Explore docker-compose watch: https://docs.docker.com/compose/file-watch/

Interesting links

• PKM / Thinking / Learning

• Bootstrapping

• Tech

• AI

• Cool

• Books

Gratitude

• Started exploring PHP again, now with Laravel. Fun stuff!