I've been considering starting a tutorial series in this field for a long time, but I also debated what it should be about.
Yes, there are countless guides out there, and the official documentation explains everything as well. However, my goal for this series is to guide you through creating a simple web application in the form of an article management system, including implementing a CRUD admin panel.
Preparations
In this tutorial series, I assume that the basic development environment is already set up (e.g., via Laravel Homestead, Laragon, or manual installation) and includes the following:
- PHP 8.3
- Ctype Extension
- cURL Extension
- DOM Extension
- Fileinfo Extension
- Filter Extension
- Hash Extension
- Mbstring Extension
- OpenSSL Extension
- PCRE Extension
- PDO Extension
- Session Extension
- Tokenizer Extension
- XML Extension
- NGINX
- Redis
- SQL server like MySQL/PostgreSQL (or SQLite)
- Composer
- Node.js LTS
If you have questions about how to set this up yourself, I could cover that topic in the future.
Creating a Project
Creating a new Laravel project is quite simple. Since the method via Composer is no longer recommended, I will focus here on how to do it using the Laravel Installer.
To begin, install the Laravel Installer via Composer: composer global require laravel/installer
Next, you can start creating a project using laravel new appname . Where appname is the name of the folder where the project will be created.
At this point, you'll be asked whether you'd like to use a Starter Kit or not.
A Starter Kit includes some pre-built features like registration, a dashboard, TOTP, and more. For beginners, Laravel Breeze is a good choice to get started with the basics without having to start from scratch.
In this tutorial, I choose "Vue with Inertia", as this is my preferred tech stack. For the sake of completeness, here’s a quick explanation of the available tech stacks and their components:
- Blade with Alpine
- Blade as the template engine (Laravel’s default)
- Alpine for reactive components (JavaScript)
- Livewire (Volt Class API) with Alpine
- Blade as the template engine
- Livewire with Laravel Volt (reactive features, JS via PHP)
- Alpine (used with Livewire or standalone)
- Livewire (Volt Functional API) with Alpine
- Similar to the above, but structured slightly differently
- React with Inertia
- React for the frontend (JavaScript/TypeScript)
- Inertia as a connector
- Laravel for the backend
- Vue with Inertia
- Vue for the frontend (JavaScript/TypeScript)
- Inertia as a connector
- Laravel for the backend
- API only
- Only the API, no frontend
I admit that I switched to Inertia before Laravel Volt was released and don’t yet have much experience with it, which is why my explanation for Volt is a bit sparse.
In the next step, you can select additional features like Dark Mode, SSR, TypeScript, and ESLint. These are chosen using the spacebar and confirmed with the Enter key.
Personally, I only select Dark Mode and Inertia SSR. This ensures that all component templates are created with built-in support for dark mode. Inertia SSR allows parts of the app to be server-rendered (SSR = Server Side Rendering).
Finally, before the installation begins, you’ll be asked which test framework you want to use. Personally, I always choose Pest, but if you prefer raw PHPUnit, you can opt for that instead!
After installation, you’ll be asked: Which database do you want to use?
For MySQL/MariaDB, PostgreSQL, and SQL Server, you’ll need additional software installed on your system. For local development, if you want something simpler, choose SQLite (which I often use for small projects since it doesn’t require setting up a database).
After selecting the database, you’ll be asked whether to run the migrations included in the Starter Kit. For this tutorial, we’ll answer: Yes!
Next, migrations will be executed, Node.js dependencies installed, and assets compiled for the first time using ViteJS.
Finally, you can navigate into your project folder with cd appname and start the development server with composer run dev.
When you open the project in your browser, you’ll be greeted with the following view:
For those who prefer something simpler, you can set up a local NGINX server, which eliminates the need for the PHP Dev Server.
For this part of the tutorial, that’s all for now. In the next part, we’ll dive into creating a simple article management system.