<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: catatsumuri</title>
    <description>The latest articles on DEV Community by catatsumuri (@catatsumuri).</description>
    <link>https://dev.to/catatsumuri</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3936041%2F49ad2c15-24ac-47f6-80e0-39f936447d88.jpeg</url>
      <title>DEV Community: catatsumuri</title>
      <link>https://dev.to/catatsumuri</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/catatsumuri"/>
    <language>en</language>
    <item>
      <title>Localized Out of the Box with `laravel new` — i18n for Laravel Starter Kits (React/Vue/Svelte)</title>
      <dc:creator>catatsumuri</dc:creator>
      <pubDate>Thu, 09 Jul 2026 07:57:14 +0000</pubDate>
      <link>https://dev.to/catatsumuri/localized-out-of-the-box-with-laravel-new-i18n-for-laravel-starter-kits-reactvuesvelte-214c</link>
      <guid>https://dev.to/catatsumuri/localized-out-of-the-box-with-laravel-new-i18n-for-laravel-starter-kits-reactvuesvelte-214c</guid>
      <description>&lt;p&gt;Laravel's official Starter Kits currently support internationalization (i18n) &lt;strong&gt;only in the Livewire version&lt;/strong&gt;. The Inertia-based kits (&lt;a href="https://github.com/laravel/react-starter-kit" rel="noopener noreferrer"&gt;React&lt;/a&gt; / &lt;a href="https://github.com/laravel/vue-starter-kit" rel="noopener noreferrer"&gt;Vue&lt;/a&gt; / &lt;a href="https://github.com/laravel/svelte-starter-kit" rel="noopener noreferrer"&gt;Svelte&lt;/a&gt;) still have all UI text hardcoded in English. Although support is being discussed upstream (&lt;a href="https://github.com/laravel/maestro/issues/168" rel="noopener noreferrer"&gt;laravel/maestro#168&lt;/a&gt;), I created and published localized forks as a temporary solution until official support arrives.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;React&lt;/strong&gt;: &lt;a href="https://github.com/catatsumuri/react-starter-kit-i18n" rel="noopener noreferrer"&gt;https://github.com/catatsumuri/react-starter-kit-i18n&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Vue&lt;/strong&gt;: &lt;a href="https://github.com/catatsumuri/vue-starter-kit-i18n" rel="noopener noreferrer"&gt;https://github.com/catatsumuri/vue-starter-kit-i18n&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Svelte&lt;/strong&gt;: &lt;a href="https://github.com/catatsumuri/svelte-starter-kit-i18n" rel="noopener noreferrer"&gt;https://github.com/catatsumuri/svelte-starter-kit-i18n&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These forks differ from the official kits in four ways:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Japanese is available immediately&lt;/strong&gt; — &lt;code&gt;ja&lt;/code&gt; language resources are included. Just change one line in &lt;code&gt;.env&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;All UI strings go through &lt;code&gt;__()&lt;/code&gt;&lt;/strong&gt; — hardcoded English text has been replaced with translatable strings&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Adding languages is easy&lt;/strong&gt; — just add a JSON file and run a command (see the French example below)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Locale is stored in the session&lt;/strong&gt; — the selected language persists after page reloads&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;Only the equivalent of each repository's &lt;code&gt;main&lt;/code&gt; branch is provided. &lt;code&gt;teams&lt;/code&gt; and &lt;code&gt;WorkOS&lt;/code&gt; variants are not available.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  For Those Who Just Want to Try It
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;composer global require laravel/installer &lt;span class="c"&gt;# if not installed&lt;/span&gt;
laravel new Your_App &lt;span class="nt"&gt;--using&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;https://github.com/catatsumuri/react-starter-kit-i18n
&lt;span class="nb"&gt;cd &lt;/span&gt;Your_App
composer dev
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then change &lt;code&gt;APP_LOCALE&lt;/code&gt; in &lt;code&gt;.env&lt;/code&gt; to &lt;code&gt;ja&lt;/code&gt; and restart the development server. Detailed setup instructions are explained later, but first, here is a demo.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try the Demo First
&lt;/h2&gt;

&lt;p&gt;A demo in a fully localized Japanese state is available on Laravel Cloud.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;React&lt;/strong&gt;: &lt;a href="https://react-starter-kit-i18n-production-sbhkku.laravel.cloud/login" rel="noopener noreferrer"&gt;https://react-starter-kit-i18n-production-sbhkku.laravel.cloud/login&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Vue&lt;/strong&gt;: &lt;a href="https://vue-starter-kit-i18n-production-bsczpo.laravel.cloud/login" rel="noopener noreferrer"&gt;https://vue-starter-kit-i18n-production-bsczpo.laravel.cloud/login&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Svelte&lt;/strong&gt;: &lt;a href="https://svelte-starter-kit-i18n-production-dkejy1.laravel.cloud/login" rel="noopener noreferrer"&gt;https://svelte-starter-kit-i18n-production-dkejy1.laravel.cloud/login&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fcq4ipvgd62zj7gs4ya9b.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fcq4ipvgd62zj7gs4ya9b.png" alt=" " width="800" height="646"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Localized login screen&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;You can log in using the following account. The database is read-only, so feel free to explore.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Email: &lt;code&gt;test@example.com&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Password: &lt;code&gt;password&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Actual Setup
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Prerequisites
&lt;/h3&gt;

&lt;p&gt;You need the &lt;code&gt;laravel&lt;/code&gt; command (Laravel Installer) and &lt;code&gt;npm&lt;/code&gt;. If the installer is not installed:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;composer global require laravel/installer
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;% laravel &lt;span class="nt"&gt;--version&lt;/span&gt;
Laravel Installer 5.28.1
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;(This article does not cover Docker-based setups.)&lt;/p&gt;

&lt;h3&gt;
  
  
  Specify the Custom Starter Kit with &lt;code&gt;laravel new&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;Simply pass the repository URL to the &lt;code&gt;--using&lt;/code&gt; option of &lt;code&gt;laravel new&lt;/code&gt;. The example below uses React, but Vue and Svelte follow the same procedure with different URLs.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# Replace Your_App&lt;/span&gt;
laravel new Your_App &lt;span class="nt"&gt;--using&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;https://github.com/catatsumuri/react-starter-kit-i18n
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The repositories again:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;React&lt;/strong&gt;: &lt;a href="https://github.com/catatsumuri/react-starter-kit-i18n" rel="noopener noreferrer"&gt;https://github.com/catatsumuri/react-starter-kit-i18n&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Vue&lt;/strong&gt;: &lt;a href="https://github.com/catatsumuri/vue-starter-kit-i18n" rel="noopener noreferrer"&gt;https://github.com/catatsumuri/vue-starter-kit-i18n&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Svelte&lt;/strong&gt;: &lt;a href="https://github.com/catatsumuri/svelte-starter-kit-i18n" rel="noopener noreferrer"&gt;https://github.com/catatsumuri/svelte-starter-kit-i18n&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;I primarily use the React version. The Vue and Svelte versions use the same mechanism, but there may be rough edges. If you find any issues, I'd appreciate an issue report.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;When you run the command, it enters interactive mode and asks several questions. The defaults are generally fine.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt; ┌ Which testing framework &lt;span class="k"&gt;do &lt;/span&gt;you prefer? ──────────────────────┐
 │ › ● Pest                                                     │
 │   ○ PHPUnit                                                  │
 └──────────────────────────────────────────────────────────────┘

 ┌ Do you want to &lt;span class="nb"&gt;install &lt;/span&gt;Laravel Boost to improve AI assisted coding? ┐
 │ ● Yes / ○ No                                                        │
 └─────────────────────────────────────────────────────────────────────┘
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Next, select authentication features.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt; ┌ Which authentication features would you like to &lt;span class="nb"&gt;enable&lt;/span&gt;? ─────┐
 │ › ◼ Email verification                                       │
 │   ◼ Registration                                             │
 │   ◼ Two-factor authentication                                │
 │   ◼ Passkeys                                                 │
 │   ◼ Password confirmation                                    │
 └──────────────────────────────────────────────────────────────┘
  Use space to &lt;span class="k"&gt;select&lt;/span&gt;, enter to confirm.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;If you enable &lt;code&gt;Registration&lt;/code&gt;, the application will allow anyone to create an account. Make sure this matches your intended behavior before selecting it.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Finally, you'll be asked whether to run npm. Choosing &lt;code&gt;Yes&lt;/code&gt; is usually the safest option.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt; ┌ Would you like to run npm &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;--ignore-scripts&lt;/span&gt; and npm run build? ┐
 │ ● Yes / ○ No                                                          │
 └───────────────────────────────────────────────────────────────────────┘
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If you see the following, setup is complete:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt; Application ready &lt;span class="k"&gt;in&lt;/span&gt; &lt;span class="o"&gt;[&lt;/span&gt;Your_App]. You can start your &lt;span class="nb"&gt;local &lt;/span&gt;development using:

 ➜ &lt;span class="nb"&gt;cd &lt;/span&gt;Your_App
 ➜ composer run dev

 New to Laravel? Check out our documentation. Build something amazing!
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Verify Startup
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;cd &lt;/span&gt;Your_App
composer dev
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Start the development server and access &lt;a href="http://localhost:8000" rel="noopener noreferrer"&gt;http://localhost:8000&lt;/a&gt;. On first launch, you'll likely encounter a database connection error.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Feimknv0arksm97nxn8ks.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Feimknv0arksm97nxn8ks.png" alt=" " width="800" height="262"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If SQLite is sufficient, run the following in another terminal:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;php artisan migrate:fresh &lt;span class="nt"&gt;--seed&lt;/span&gt; &lt;span class="nt"&gt;--force&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Reload the page and the application should be running.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fooybywqly4i8xqj8sdmw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fooybywqly4i8xqj8sdmw.png" alt=" " width="800" height="498"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Switch to Japanese
&lt;/h2&gt;

&lt;p&gt;At this point, the application is still in English. However, this fork already deploys &lt;strong&gt;Japanese resources into &lt;code&gt;lang/&lt;/code&gt; during installation&lt;/strong&gt; (adding other languages is explained later).&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;% tree lang
lang
├── en
│   ├── actions.php
│   ├── auth.php
│   ├── http-statuses.php
│   ├── pagination.php
│   ├── passwords.php
│   └── validation.php
├── en.json
├── ja
│   ├── actions.php
│   ├── auth.php
│   ├── http-statuses.php
│   ├── pagination.php
│   ├── passwords.php
│   └── validation.php
├── ja.json
└── vendor-patches
    ├── locales
    │   └── ja.json
    └── &lt;span class="nb"&gt;source&lt;/span&gt;
        └── react.json
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;All you need to do is change &lt;strong&gt;&lt;code&gt;.env&lt;/code&gt;&lt;/strong&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;#APP_LOCALE=en
APP_LOCALE=ja
APP_FALLBACK_LOCALE=en
APP_FAKER_LOCALE=en_US
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Restart the development server that was running via &lt;code&gt;composer dev&lt;/code&gt;, and the application will switch to Japanese.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fylus0050984wh9i1oto1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fylus0050984wh9i1oto1.png" alt=" " width="800" height="775"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Localized login screen&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;You can log in with the seeded account &lt;code&gt;test@example.com&lt;/code&gt; / &lt;code&gt;password&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Flqjwm1erfaqq7vhkozb6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Flqjwm1erfaqq7vhkozb6.png" alt=" " width="800" height="642"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Logged-in screen&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Frw5rv6fdagw6y0bwjnv5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Frw5rv6fdagw6y0bwjnv5.png" alt=" " width="799" height="659"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Settings page is also localized&lt;/em&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Recommended Workflow for Multilingual Development
&lt;/h2&gt;

&lt;p&gt;To preserve internationalization during development, write UI strings using the &lt;code&gt;__()&lt;/code&gt; helper. It can be used directly inside React components (translations are provided via Inertia shared props).&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;lang&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@erag/lang-sync-inertia/react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="c1"&gt;// ...&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;Login&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;status&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;canResetPassword&lt;/span&gt; &lt;span class="p"&gt;}:&lt;/span&gt; &lt;span class="nx"&gt;Props&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;__&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;lang&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="c1"&gt;// ...&lt;/span&gt;
    &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nf"&gt;__&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Fallback Language(English)&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Actual usage example:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/catatsumuri/react-starter-kit-i18n/blob/main/resources/js/pages/auth/login.tsx#L116-L121" rel="noopener noreferrer"&gt;https://github.com/catatsumuri/react-starter-kit-i18n/blob/main/resources/js/pages/auth/login.tsx#L116-L121&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If no translation exists for a key, the English fallback locale is displayed, so nothing breaks. For projects that do not require multilingual support, it's perfectly acceptable to continue development directly in your localized language.&lt;/p&gt;




&lt;h2&gt;
  
  
  Adding Another Language — French Example
&lt;/h2&gt;

&lt;p&gt;Japanese is automatically deployed during installation through a Composer script, but adding other languages is also simple. Translation resources consist of two layers:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Base translations&lt;/strong&gt; (validation messages, authentication errors, etc.) — provided by &lt;a href="https://laravel-lang.com/" rel="noopener noreferrer"&gt;Laravel Lang&lt;/a&gt; for many languages&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;UI strings specific to this fork&lt;/strong&gt; (such as the 2FA settings screen) — stored in &lt;code&gt;lang/vendor-patches/locales/{locale}.json&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;To add French, create &lt;code&gt;fr.json&lt;/code&gt; based on &lt;code&gt;lang/vendor-patches/locales/ja.json&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;cat &lt;/span&gt;lang/vendor-patches/locales/fr.json
&lt;span class="o"&gt;{&lt;/span&gt;
    &lt;span class="s2"&gt;"Navigation menu"&lt;/span&gt;: &lt;span class="s2"&gt;"Menu de navigation"&lt;/span&gt;,
    &lt;span class="s2"&gt;"Once your account is deleted, all of its resources and data will also be permanently deleted. Please enter your password to confirm you would like to permanently delete your account."&lt;/span&gt;: &lt;span class="s2"&gt;"Une fois votre compte supprimé, toutes ses ressources et données seront également supprimées définitivement. Veuillez saisir votre mot de passe pour confirmer la suppression définitive de votre compte."&lt;/span&gt;,
    &lt;span class="s2"&gt;"Please proceed with caution, this cannot be undone."&lt;/span&gt;: &lt;span class="s2"&gt;"Veuillez procéder avec prudence, cette action est irréversible."&lt;/span&gt;
&lt;span class="o"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Reference (an actual implementation exists in the &lt;code&gt;locale-switcher&lt;/code&gt; branch):&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/catatsumuri/react-starter-kit-i18n/blob/feature/locale-switcher/lang/vendor-patches/locales/fr.json" rel="noopener noreferrer"&gt;https://github.com/catatsumuri/react-starter-kit-i18n/blob/feature/locale-switcher/lang/vendor-patches/locales/fr.json&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Even if translations are incomplete, missing keys fall back to English. After creating the file, apply the patch and regenerate language files.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;composer patch-vendor
php artisan lang:update
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;% php artisan lang:update

   INFO  Collecting translations...

  LaravelLang&lt;span class="se"&gt;\A&lt;/span&gt;ctions&lt;span class="se"&gt;\P&lt;/span&gt;lugin ................................. 2.42ms DONE
  LaravelLang&lt;span class="se"&gt;\L&lt;/span&gt;ang&lt;span class="se"&gt;\P&lt;/span&gt;lugin ................................... 16.39ms DONE
  LaravelLang&lt;span class="se"&gt;\S&lt;/span&gt;tarterKits&lt;span class="se"&gt;\P&lt;/span&gt;lugin ............................. 2.52ms DONE

   INFO  Storing changes...

  fr.json ................................................... 10.80ms DONE
  fr/actions.php ............................................. 6.17ms DONE
  fr/auth.php ................................................ 0.29ms DONE
  fr/validation.php ......................................... 14.22ms DONE
  &lt;span class="o"&gt;(&lt;/span&gt;en / ja are regenerated as well&lt;span class="o"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This generates &lt;code&gt;lang/fr.json&lt;/code&gt; and &lt;code&gt;lang/fr/*.php&lt;/code&gt;. Then simply update &lt;code&gt;.env&lt;/code&gt; and restart the development server.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;#APP_LOCALE=en
#APP_LOCALE=ja
APP_LOCALE=fr
APP_FALLBACK_LOCALE=en
APP_FAKER_LOCALE=en_US
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Frzsog013t8w0sp8od6nz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Frzsog013t8w0sp8od6nz.png" alt=" " width="799" height="495"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Switched to French&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Bonus: Locale Switcher (Language Switching UI)
&lt;/h2&gt;

&lt;p&gt;A UI for switching languages directly from the application is also available in the &lt;code&gt;feature/locale-switcher&lt;/code&gt; branch.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;React&lt;/strong&gt;: &lt;a href="https://react-starter-kit-i18n-feature-locale-switcher-w9x8ho.laravel.cloud/login" rel="noopener noreferrer"&gt;https://react-starter-kit-i18n-feature-locale-switcher-w9x8ho.laravel.cloud/login&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Vue&lt;/strong&gt;: &lt;a href="https://vue-starter-kit-i18n-feature-locale-switcher-tz3pkf.laravel.cloud/login" rel="noopener noreferrer"&gt;https://vue-starter-kit-i18n-feature-locale-switcher-tz3pkf.laravel.cloud/login&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Svelte&lt;/strong&gt;: &lt;a href="https://svelte-starter-kit-i18n-feature-locale-switcher-lg1ldp.laravel.cloud/login" rel="noopener noreferrer"&gt;https://svelte-starter-kit-i18n-feature-locale-switcher-lg1ldp.laravel.cloud/login&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fc4cbi8lj7ga1qwprus1m.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fc4cbi8lj7ga1qwprus1m.png" alt=" " width="800" height="578"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Locale switcher demo&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;To install directly from this branch, append &lt;code&gt;#branch-name&lt;/code&gt; to the URL.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;laravel new Your_App &lt;span class="nt"&gt;--using&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;https://github.com/catatsumuri/react-starter-kit-i18n#feature/locale-switcher
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For reference, this is how it's configured on Laravel Cloud.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F0u0uvyo3hiaseadaey5p.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F0u0uvyo3hiaseadaey5p.png" alt=" " width="799" height="523"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Closing Thoughts
&lt;/h2&gt;

&lt;p&gt;I plan to keep these starter kits aligned with upstream changes as much as possible. However, if official translation support is added upstream, I may discontinue these repositories.&lt;/p&gt;

&lt;p&gt;The issue that motivated this work:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/laravel/maestro/issues/168" rel="noopener noreferrer"&gt;https://github.com/laravel/maestro/issues/168&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;However, we are already discussing the best implementation for this internally.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  About the Translation Adapter
&lt;/h3&gt;

&lt;p&gt;For translation synchronization between Laravel and the frontend, this project uses &lt;code&gt;erag/laravel-lang-sync-inertia&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://packagist.org/packages/erag/laravel-lang-sync-inertia" rel="noopener noreferrer"&gt;https://packagist.org/packages/erag/laravel-lang-sync-inertia&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Special thanks to &lt;a href="https://github.com/eramitgupta" rel="noopener noreferrer"&gt;Er Amit Gupta&lt;/a&gt; for merging PRs related to the Svelte adapter and flat-key support.&lt;/p&gt;

</description>
      <category>php</category>
      <category>laravel</category>
      <category>react</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Trying Out Laravel Cloud (2) — Quickly Creating Per-Branch Environments in Laravel Cloud</title>
      <dc:creator>catatsumuri</dc:creator>
      <pubDate>Fri, 03 Jul 2026 04:57:16 +0000</pubDate>
      <link>https://dev.to/catatsumuri/trying-out-laravel-cloud-2-quickly-creating-per-branch-environments-in-laravel-cloud-58aa</link>
      <guid>https://dev.to/catatsumuri/trying-out-laravel-cloud-2-quickly-creating-per-branch-environments-in-laravel-cloud-58aa</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;Previously, I had the &lt;code&gt;main&lt;/code&gt; branch running as &lt;code&gt;production&lt;/code&gt; in a Laravel Cloud environment.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://dev.to/catatsumuri/trying-out-laravel-cloud-a-hands-on-guide-to-laravel-hosting-starting-at-5-3mda"&gt;https://dev.to/catatsumuri/trying-out-laravel-cloud-a-hands-on-guide-to-laravel-hosting-starting-at-5-3mda&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fdp3tbhcytbvj5lwb918r.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fdp3tbhcytbvj5lwb918r.png" alt=" " width="800" height="456"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Continuing from that setup, suppose there is a branch called &lt;a href="https://github.com/catatsumuri/react-starter-kit-i18n/tree/feature/locale-switcher" rel="noopener noreferrer"&gt;feature/locale-switcher&lt;/a&gt; in the same repository that adds language-switching functionality. In this case, it is possible to quickly add &lt;code&gt;feature/locale-switcher&lt;/code&gt; as a separate deployment environment alongside the &lt;code&gt;main&lt;/code&gt; branch. Let's walk through this demonstration.&lt;/p&gt;

&lt;h2&gt;
  
  
  Creating a New Environment
&lt;/h2&gt;

&lt;p&gt;Laravel Cloud supports running multiple branches in parallel. Here, we'll create a &lt;code&gt;New Environment&lt;/code&gt; for &lt;code&gt;react-starter-kit-i18n&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fz3i20m0lrn2qub2axrl9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fz3i20m0lrn2qub2axrl9.png" alt=" " width="729" height="473"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;You can then select the branch you want to deploy.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F1pqems1m2gee8wexjzbq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F1pqems1m2gee8wexjzbq.png" alt=" " width="465" height="408"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;An environment independent from &lt;code&gt;main&lt;/code&gt; is created as shown below. Before deploying, click &lt;code&gt;Settings&lt;/code&gt; to configure it first.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F20olammnvu6xn4dkgf2t.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F20olammnvu6xn4dkgf2t.png" alt=" " width="799" height="469"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;As before, the most important settings will likely be under &lt;code&gt;General&lt;/code&gt; and &lt;code&gt;Deployments&lt;/code&gt;. We'll focus on configuring those.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F33g68row187hgzaaa5op.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F33g68row187hgzaaa5op.png" alt=" " width="800" height="432"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;You'll probably need to add most of these environment variable settings&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;After configuring them, deploy the environment.&lt;/p&gt;




&lt;p&gt;Deployment starts in a completely separate space from &lt;code&gt;main&lt;/code&gt; (&lt;code&gt;production&lt;/code&gt;).&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fxx65ikzbgskmmnabigtz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fxx65ikzbgskmmnabigtz.png" alt=" " width="800" height="622"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Once deployment is complete, use the &lt;code&gt;Commands&lt;/code&gt; tab as needed to run &lt;code&gt;artisan&lt;/code&gt; commands and finalize the setup.&lt;/p&gt;

&lt;h2&gt;
  
  
  Issued URL and Verification
&lt;/h2&gt;

&lt;p&gt;After everything is set up, Laravel Cloud issues the URL:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://react-starter-kit-i18n-feature-locale-switcher-w9x8ho.laravel.cloud/" rel="noopener noreferrer"&gt;https://react-starter-kit-i18n-feature-locale-switcher-w9x8ho.laravel.cloud/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This URL is different from the &lt;code&gt;production&lt;/code&gt; URL.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F82b2ft8al6t7z6svh4ml.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F82b2ft8al6t7z6svh4ml.png" alt=" " width="800" height="406"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Japanese version: &lt;a href="https://react-starter-kit-i18n-production-sbhkku.laravel.cloud/" rel="noopener noreferrer"&gt;https://react-starter-kit-i18n-production-sbhkku.laravel.cloud/&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Locale Switcher version: &lt;a href="https://react-starter-kit-i18n-feature-locale-switcher-w9x8ho.laravel.cloud/" rel="noopener noreferrer"&gt;https://react-starter-kit-i18n-feature-locale-switcher-w9x8ho.laravel.cloud/&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  Verification
&lt;/h3&gt;

&lt;p&gt;Let's access &lt;a href="https://react-starter-kit-i18n-feature-locale-switcher-w9x8ho.laravel.cloud/" rel="noopener noreferrer"&gt;https://react-starter-kit-i18n-feature-locale-switcher-w9x8ho.laravel.cloud/&lt;/a&gt; and verify that it is actually running.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fug23odgude38ttzh0at0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fug23odgude38ttzh0at0.png" alt=" " width="800" height="483"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;This time, the welcome page is in English&lt;/em&gt;&lt;/p&gt;




&lt;p&gt;This Locale Switcher branch allows users to change the language from the login screen or later in the application. Let's open the login page. You can see a language selector that did not exist in the previous branch.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F54u81keyvec3zv5xjub4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F54u81keyvec3zv5xjub4.png" alt=" " width="800" height="595"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Example after switching to French&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;You can log in with:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="mailto:test@example.com"&gt;test@example.com&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;password&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;After logging in, I switched the interface to German.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F4swy22k0pboykfqeifxe.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F4swy22k0pboykfqeifxe.png" alt=" " width="799" height="479"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Switching to German&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Summary
&lt;/h2&gt;

&lt;p&gt;In this article, we reviewed how to create an additional environment for an existing application in Laravel Cloud and deploy a different branch in parallel.&lt;/p&gt;

&lt;p&gt;In this example, we published the &lt;code&gt;feature/locale-switcher&lt;/code&gt; branch on its own URL, separate from the &lt;code&gt;main&lt;/code&gt; branch, and successfully verified the language-switching functionality.&lt;/p&gt;

&lt;p&gt;The primary advantage of this feature is that new functionality can be tested on an actual server before being merged into production. It is useful not only for developers' own verification but also for sharing URLs with clients or team members for review.&lt;/p&gt;

&lt;p&gt;Traditionally, a separate server or container would need to be prepared to build a testing environment. With Laravel Cloud, however, an isolated environment can be created in just a few clicks, making it much easier to validate new features or design changes.&lt;/p&gt;

&lt;p&gt;For individual developers and small teams in particular, the ability to quickly create an environment simply to "let someone take a look" can be a significant benefit.&lt;/p&gt;

</description>
      <category>laravel</category>
      <category>php</category>
      <category>tutorial</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Trying Out Laravel Cloud - A Hands-On Guide to Laravel Hosting Starting at $5</title>
      <dc:creator>catatsumuri</dc:creator>
      <pubDate>Wed, 01 Jul 2026 22:46:36 +0000</pubDate>
      <link>https://dev.to/catatsumuri/trying-out-laravel-cloud-a-hands-on-guide-to-laravel-hosting-starting-at-5-3mda</link>
      <guid>https://dev.to/catatsumuri/trying-out-laravel-cloud-a-hands-on-guide-to-laravel-hosting-starting-at-5-3mda</guid>
      <description>&lt;h2&gt;
  
  
  What You'll Need
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;A credit card&lt;/li&gt;
&lt;li&gt;A Git remote repository on GitHub, GitLab, or Bitbucket&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Creating an Account — Sign Up
&lt;/h2&gt;

&lt;p&gt;Go to &lt;a href="https://laravel.com/cloud" rel="noopener noreferrer"&gt;https://laravel.com/cloud&lt;/a&gt; and click &lt;code&gt;Sign up&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fg86brbz19la6e2qv20yq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fg86brbz19la6e2qv20yq.png" alt=" " width="800" height="413"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;You can sign up using an email address or authenticate via GitHub or Google. If you choose GitHub, there is an advantage later when integrating with GitHub because you won't need to add an authentication adapter separately.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fmvab5msftvf98v3i59p8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fmvab5msftvf98v3i59p8.png" alt=" " width="717" height="782"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;Once authentication succeeds, your account will be created and you'll see a blank &lt;code&gt;Overview&lt;/code&gt; screen. This is where you'll deploy your applications.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fpb7ta6w8e4sja2de1jpl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fpb7ta6w8e4sja2de1jpl.png" alt=" " width="800" height="568"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  About "Organizations" in Laravel Cloud
&lt;/h2&gt;

&lt;p&gt;If you're using Laravel Cloud personally, you don't need to worry much about this section. Currently, the setup uses an organization called &lt;code&gt;catatsumuri&lt;/code&gt;, but additional organizations can be created.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F236fjtn868cl5rfdv5br.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F236fjtn868cl5rfdv5br.png" alt=" " width="407" height="282"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This feature may be useful, for example, if you're operating Laravel Cloud within a company and want billing to be handled there. Therefore, if you plan to share usage among multiple accounts under a company billing arrangement, it's recommended that you first explore and establish your organization structure.&lt;/p&gt;

&lt;p&gt;It appears that one person creates the organization and then invites other members, and billing can be configured per organization (though the author has not personally used this feature).&lt;/p&gt;

&lt;p&gt;Since the hands-on guide below does not use an additional organization, this is only mentioned here. However, before proceeding with billing, it's worth carefully considering how your team should be organized, as restructuring may become more difficult once billing has started.&lt;/p&gt;




&lt;h2&gt;
  
  
  Your First Subscription
&lt;/h2&gt;

&lt;p&gt;If you haven't subscribed yet, you'll likely see a warning like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fx4pyhxk8ogktiykzu1d9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fx4pyhxk8ogktiykzu1d9.png" alt=" " width="749" height="265"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Clicking the &lt;code&gt;Subscribe&lt;/code&gt; button takes you to the billing screen.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F4b7xrpq3ilvenie7jacz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F4b7xrpq3ilvenie7jacz.png" alt=" " width="799" height="478"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can choose from three plans:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Starter (&lt;code&gt;5&lt;/code&gt; USD)&lt;/li&gt;
&lt;li&gt;Growth (&lt;code&gt;20&lt;/code&gt; USD)&lt;/li&gt;
&lt;li&gt;Business (&lt;code&gt;200&lt;/code&gt; USD)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For most people, starting with the Starter plan is probably the best way to get familiar with the platform.&lt;/p&gt;

&lt;h3&gt;
  
  
  Payment
&lt;/h3&gt;

&lt;p&gt;Complete payment on the following screen.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fdbeegxly50fh7a8u4qkt.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fdbeegxly50fh7a8u4qkt.png" alt=" " width="593" height="454"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can choose whether the payment is made as an individual or a company. However, as mentioned earlier, billing is applied at the organization level, so this choice mainly affects how the invoice is presented. Therefore, if you want charges billed to a specific organization, you'll likely need to ensure that organization is selected before subscribing (though this has not been verified).&lt;/p&gt;

&lt;h2&gt;
  
  
  Checking Usage and Spending Limits
&lt;/h2&gt;

&lt;p&gt;Once payment is complete, open the &lt;code&gt;Usage&lt;/code&gt; tab.&lt;/p&gt;




&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F2l1b1yixxw8fbfgqthlv.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F2l1b1yixxw8fbfgqthlv.png" alt=" " width="800" height="403"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;The &lt;code&gt;Usage&lt;/code&gt; tab shows your available credit and current usage.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Since nothing has been used yet, you'll see a $5 credit balance and $0 usage.&lt;/p&gt;




&lt;p&gt;Next, look at the &lt;code&gt;Spending limit&lt;/code&gt; settings. You can access them either via &lt;code&gt;Set up spending limit&lt;/code&gt; under &lt;code&gt;Usage&lt;/code&gt; or through &lt;code&gt;Settings&lt;/code&gt; → &lt;code&gt;Billing&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fiiks8wfz73kwbnjia3ts.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fiiks8wfz73kwbnjia3ts.png" alt=" " width="799" height="238"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fwsmoae2ldtilemo6ighx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fwsmoae2ldtilemo6ighx.png" alt=" " width="487" height="647"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;For example, if you want usage to stop exactly at $5, configure it like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ftdqzed0w5xctuppukewc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ftdqzed0w5xctuppukewc.png" alt=" " width="523" height="653"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;&lt;code&gt;Stop compute at the limit&lt;/code&gt; setting&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;In practice, production web services usually cannot simply be stopped, so in such cases it may be better to use &lt;code&gt;Notify&lt;/code&gt; instead. This depends on your operational requirements. For example, stopping may be acceptable for demo environments.&lt;/p&gt;

&lt;p&gt;Whether you choose to stop services or not, enabling at least &lt;code&gt;Notify&lt;/code&gt; is advisable. This should be one of the first settings you review.&lt;/p&gt;




&lt;h2&gt;
  
  
  Deploying an Application
&lt;/h2&gt;

&lt;p&gt;Now let's actually deploy an application. For this demonstration, we'll deploy &lt;a href="https://github.com/catatsumuri/react-starter-kit-i18n" rel="noopener noreferrer"&gt;https://github.com/catatsumuri/react-starter-kit-i18n&lt;/a&gt; (a multilingual version of React Starter Kit).&lt;/p&gt;




&lt;p&gt;From the &lt;code&gt;Application&lt;/code&gt; tab, select &lt;code&gt;New application&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Faw2cirz7ajlrrqhh7q5b.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Faw2cirz7ajlrrqhh7q5b.png" alt=" " width="740" height="542"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;Since this example uses GitHub authentication, the repository is already connected and displayed. If you want to use another provider, you'll need to connect it manually.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fj6uwyfftvvangk9pxhu5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fj6uwyfftvvangk9pxhu5.png" alt=" " width="532" height="409"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;&lt;code&gt;GitLab&lt;/code&gt; and &lt;code&gt;Bitbucket&lt;/code&gt; are supported. Connection instructions are omitted here.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;As the author resides in Japan, the Tokyo region was selected.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fjt62gv7x7cxa4yrpdm31.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fjt62gv7x7cxa4yrpdm31.png" alt=" " width="800" height="588"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Select &lt;code&gt;react-starter-kit-i18n&lt;/code&gt; and &lt;code&gt;Asia Pacific (Tokyo)&lt;/code&gt;.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Clicking &lt;code&gt;Create application&lt;/code&gt; prepares the application for deployment. Deployment itself has not started yet.&lt;/p&gt;




&lt;p&gt;Once setup is complete, you'll see a screen like the following. A default environment named &lt;code&gt;production&lt;/code&gt; is provided, but this is merely a default name and does not necessarily indicate a true production environment.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F3gd54ng8mqqeky6okaal.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F3gd54ng8mqqeky6okaal.png" alt=" " width="800" height="479"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;The &lt;code&gt;production&lt;/code&gt; environment is created by default.&lt;/em&gt;&lt;/p&gt;




&lt;h3&gt;
  
  
  Be Sure to Visit Settings Before Deploying
&lt;/h3&gt;

&lt;p&gt;Before deployment, review the &lt;code&gt;Settings&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fp370krgcrulpqtyfdbkc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fp370krgcrulpqtyfdbkc.png" alt=" " width="800" height="545"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;You can freely choose the environment name. As shown earlier, it defaults to &lt;code&gt;production&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fmn8ppmg4j9cbr8wgk3v9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fmn8ppmg4j9cbr8wgk3v9.png" alt=" " width="800" height="359"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;An important point: you can choose the deployment branch here. For example, if you maintain both &lt;code&gt;main&lt;/code&gt; and &lt;code&gt;dev&lt;/code&gt; branches and only want to publish &lt;code&gt;dev&lt;/code&gt; via Laravel Cloud, select it here before deployment. In this article, however, &lt;code&gt;main&lt;/code&gt; is used.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fn4k3d74jaaolnuhk0gc4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fn4k3d74jaaolnuhk0gc4.png" alt=" " width="800" height="293"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Specify the deployment branch.&lt;/em&gt;&lt;/p&gt;




&lt;p&gt;Review the remaining environment settings as well. Ideally, choose the same PHP version as your development environment to reduce the chance of compatibility issues.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F8m5sbqdaydnrbvl6ewc1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F8m5sbqdaydnrbvl6ewc1.png" alt=" " width="800" height="521"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;Further down, you'll find configuration for &lt;strong&gt;.env&lt;/strong&gt;-based environment variables.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fckt3g2ts2f1kuct9dlcf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fckt3g2ts2f1kuct9dlcf.png" alt=" " width="800" height="802"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here, if there are additional environment variables, they should be specified in the box above. In this application, the language is designed to switch according to APP_LOCALE. Since the author wanted a Japanese-language environment, APP_LOCALE=ja was specified. In addition, because data would also be loaded, APP_ENV=local was set.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fhyujquahzv1nyluxcraz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fhyujquahzv1nyluxcraz.png" alt=" " width="799" height="468"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;A dialog appears when editing the box.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;After editing, the above dialog appears. Since deployment is not yet desired at this stage, &lt;code&gt;Save only&lt;/code&gt; was selected.&lt;/p&gt;

&lt;h3&gt;
  
  
  Be Sure to Check the Deployments Menu
&lt;/h3&gt;

&lt;p&gt;The &lt;code&gt;Deployments&lt;/code&gt; tab contains configuration for &lt;code&gt;Build commands&lt;/code&gt;, which determine how &lt;code&gt;composer&lt;/code&gt; and &lt;code&gt;npm&lt;/code&gt; are executed.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fi6dc8z98qw8phw5fwana.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fi6dc8z98qw8phw5fwana.png" alt=" " width="799" height="571"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;For this particular project, there is no &lt;strong&gt;composer.lock&lt;/strong&gt; file, so &lt;code&gt;composer update&lt;/code&gt; was used. Since database seeding was also desired, &lt;code&gt;--no-dev&lt;/code&gt; was removed.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;In general practice, however, the lock file should be committed and &lt;code&gt;composer install&lt;/code&gt; should be used.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fd4qg8uqcag1ogg40grhf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fd4qg8uqcag1ogg40grhf.png" alt=" " width="799" height="292"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Using &lt;code&gt;composer update --no-interaction --prefer-dist --optimize-autoloader&lt;/code&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;At this point, deployment can finally be started with &lt;code&gt;Save and deploy&lt;/code&gt;.&lt;/p&gt;




&lt;h3&gt;
  
  
  Deployment
&lt;/h3&gt;

&lt;p&gt;After deployment starts, you'll automatically be taken to the &lt;code&gt;Deployments&lt;/code&gt; tab where you can monitor progress.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Flfzxf54ohgzobj49e8cn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Flfzxf54ohgzobj49e8cn.png" alt=" " width="800" height="538"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;Once deployment is complete, a URL will be provided from the Environment. You can also configure a database via Add Resource (however, this article does not cover that).&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F1yhs1tcy90qiq7507gxf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F1yhs1tcy90qiq7507gxf.png" alt=" " width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;The URL is displayed.&lt;/em&gt;&lt;/p&gt;




&lt;p&gt;For this application, access is already possible at this point. You're also welcome to visit the author's deployed environment directly (arguably one of the strengths of this approach). &lt;a href="https://react-starter-kit-i18n-production-sbhkku.laravel.cloud/" rel="noopener noreferrer"&gt;https://react-starter-kit-i18n-production-sbhkku.laravel.cloud/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ffxn10eo7fn5t9zciu5vl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ffxn10eo7fn5t9zciu5vl.png" alt=" " width="800" height="587"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fo8h3og3fke2wev8uqg43.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fo8h3og3fke2wev8uqg43.png" alt=" " width="800" height="944"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Japanese-localized login screen&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fmcxmm8y8x9ecsg2ujh20.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fmcxmm8y8x9ecsg2ujh20.png" alt=" " width="800" height="713"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Configuring SQLite (Unofficial)
&lt;/h2&gt;

&lt;p&gt;Laravel Cloud does not officially support SQLite because the application's local disk is &lt;strong&gt;ephemeral and is lost on every deployment&lt;/strong&gt;. However, by taking advantage of that characteristic, SQLite can still be used in environments where persistence is not critical, at least until the next deployment occurs.&lt;/p&gt;




&lt;p&gt;From the &lt;code&gt;Commands&lt;/code&gt; tab, arbitrary commands can be executed within the environment. Here, run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;php artisan migrate:fresh &lt;span class="nt"&gt;--seed&lt;/span&gt; &lt;span class="nt"&gt;--force&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fmi5jpi5xxw39hvy1okge.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fmi5jpi5xxw39hvy1okge.png" alt=" " width="800" height="395"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Executing &lt;code&gt;php artisan migrate:fresh --seed --force&lt;/code&gt;&lt;/em&gt;&lt;/p&gt;




&lt;p&gt;If execution succeeds, you'll see output like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Frx61cm8bvtn8v5j7ugzx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Frx61cm8bvtn8v5j7ugzx.png" alt=" " width="800" height="636"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Additionally, since updates are unnecessary (and undesirable) in this case:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;chmod &lt;/span&gt;444 database/database.sqlite
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;was also executed.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fuiso8gzt00deryujls1g.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fuiso8gzt00deryujls1g.png" alt=" " width="800" height="327"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;However, because the database becomes completely read-only, cache and session data must be stored in files instead.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;CACHE_STORE=file
SESSION_DRIVER=file
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Final Verification
&lt;/h2&gt;

&lt;p&gt;The assigned URL is:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://react-starter-kit-i18n-production-sbhkku.laravel.cloud/" rel="noopener noreferrer"&gt;https://react-starter-kit-i18n-production-sbhkku.laravel.cloud/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Visit it and log in using:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;test@example.com&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;password&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F9ffukquoqofg3itl6r4p.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F9ffukquoqofg3itl6r4p.png" alt=" " width="800" height="753"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Successfully logged in&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fx5in5kamp9b8qcp38epi.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fx5in5kamp9b8qcp38epi.png" alt=" " width="800" height="553"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Updating the profile results in an error&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;This is intentional. To see the specific error, open &lt;code&gt;Logs&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ffrinunlv0wl0cwjw9hjo.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ffrinunlv0wl0cwjw9hjo.png" alt=" " width="800" height="277"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;The write operation fails with &lt;code&gt;attempt to write a readonly database&lt;/code&gt;.&lt;/em&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;This walkthrough covered the entire process of creating a Laravel Cloud account, subscribing, configuring usage limits, and deploying an application.&lt;/p&gt;

&lt;p&gt;My overall impression is that Laravel Cloud is extremely approachable for developers who simply want to publish Laravel applications without worrying about infrastructure management. On the other hand, it does not provide the same level of flexibility as traditional VPS hosting or AWS, so some trade-offs are necessary.&lt;/p&gt;

&lt;p&gt;That said, with plans starting at just $5 per month, easy branch-based environment creation, and automatic URL provisioning, it feels like a very viable option for personal projects, testing environments, and small-scale services.&lt;/p&gt;

&lt;p&gt;A good approach would be to start with the Starter plan, deploy a small application, and see whether it fits your own operational style.&lt;/p&gt;

</description>
      <category>laravel</category>
      <category>php</category>
      <category>cloud</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Laravel Maestro Contributor Tutorial</title>
      <dc:creator>catatsumuri</dc:creator>
      <pubDate>Tue, 23 Jun 2026 14:27:41 +0000</pubDate>
      <link>https://dev.to/catatsumuri/laravel-maestro-contributor-tutorial-2p89</link>
      <guid>https://dev.to/catatsumuri/laravel-maestro-contributor-tutorial-2p89</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;Laravel officially uses &lt;a href="https://github.com/laravel/maestro" rel="noopener noreferrer"&gt;Laravel Maestro&lt;/a&gt; to streamline Starter Kit development. However, there is currently not much information available on how to actually contribute to Starter Kits using Maestro.&lt;/p&gt;

&lt;p&gt;When I first started, I was confused about things such as:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The difference between the &lt;strong&gt;build/&lt;/strong&gt;, &lt;strong&gt;kits/&lt;/strong&gt;, and &lt;strong&gt;orchestrator/&lt;/strong&gt; directories&lt;/li&gt;
&lt;li&gt;The role of the watcher&lt;/li&gt;
&lt;li&gt;Which directories should be included in a &lt;code&gt;git commit&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In this article, using a real example of modifying text in a Starter Kit, we will cover:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The basic structure of Maestro&lt;/li&gt;
&lt;li&gt;The relationship between build / kits / orchestrator&lt;/li&gt;
&lt;li&gt;How to run tests&lt;/li&gt;
&lt;li&gt;The workflow up to creating a PR&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This article is intended less for Laravel users in general and more for developers considering contributing to Starter Kits or Maestro itself. If you are thinking about adding features or fixing functionality in a Starter Kit upstream, I encourage you to read through this hands-on tutorial and get a feel for the contribution workflow up to the PR stage (note that we will not actually submit a PR).&lt;/p&gt;

&lt;h2&gt;
  
  
  Clone the Repository and Get the Source Tree Locally
&lt;/h2&gt;

&lt;p&gt;First, clone the repository:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git clone https://github.com/laravel/maestro.git
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This creates a local copy of the &lt;code&gt;laravel/maestro&lt;/code&gt; source tree.&lt;/p&gt;

&lt;h2&gt;
  
  
  Running a Starter Kit Through Laravel Maestro
&lt;/h2&gt;

&lt;p&gt;At present, containers are not officially supported, and execution is always native. (If you want to run it inside a container, you will likely need to first understand the native workflow and then build your own setup.) Internally, it essentially runs something similar to &lt;code&gt;artisan serve&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;In other words, because everything runs natively, your system must have:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;php-cli&lt;/li&gt;
&lt;li&gt;composer&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;installed locally. Otherwise, you will not be able to follow the steps below.&lt;/p&gt;




&lt;h2&gt;
  
  
  Start from orchestrator/
&lt;/h2&gt;

&lt;p&gt;Before launching a Starter Kit through Maestro, let's first check the current directory structure.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;% tree -L1 -D
.
├── browser_tests
├── kits
└── orchestrator
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Currently, these three directories exist. To get started, change into &lt;strong&gt;orchestrator/&lt;/strong&gt; and install the Composer and npm dependencies.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;cd &lt;/span&gt;orchestrator
composer &lt;span class="nb"&gt;install
&lt;/span&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Next, build the project with &lt;code&gt;php artisan build&lt;/code&gt;. If you run it without options, it starts in interactive mode:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;% php artisan build

 ┌ Which starter kit would you like to build? ──────────────────┐
 │ › ● Livewire                                                 │
 │   ○ React                                                    │
 │   ○ Svelte                                                   │
 │   ○ Vue                                                      │
 └──────────────────────────────────────────────────────────────┘
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For example, selecting &lt;code&gt;Livewire&lt;/code&gt; gives:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt; ┌ Which starter kit would you like to build? ──────────────────┐
 │ Livewire                                                     │
 └──────────────────────────────────────────────────────────────┘

 ┌ Which variant would you like to use? ────────────────────────┐
 │   ○ Blank &lt;span class="o"&gt;(&lt;/span&gt;no authentication&lt;span class="o"&gt;)&lt;/span&gt;                                │
 │ › ● Fortify &lt;span class="o"&gt;(&lt;/span&gt;authentication using Fortify&lt;span class="o"&gt;)&lt;/span&gt;                   │
 │   ○ WorkOS &lt;span class="o"&gt;(&lt;/span&gt;authentication using WorkOS&lt;span class="o"&gt;)&lt;/span&gt;                     │
 └──────────────────────────────────────────────────────────────┘
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The final selection is whether to enable Teams:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt; ┌ Would you like to &lt;span class="nb"&gt;enable &lt;/span&gt;the Teams feature? ─────────────────┐
 │ ○ Yes / ● No                                                 │
 └──────────────────────────────────────────────────────────────┘
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;However, Livewire has one additional option:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt; ┌ Which Livewire variant would you like to use? ───────────────┐
 │ › ● Single File Components                                   │
 │   ○ Multiple File Components                                 │
 └──────────────────────────────────────────────────────────────┘
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;These branches make it possible to represent the following 21 variants:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Framework&lt;/th&gt;
&lt;th&gt;Blank&lt;/th&gt;
&lt;th&gt;Fortify&lt;/th&gt;
&lt;th&gt;Fortify + Teams&lt;/th&gt;
&lt;th&gt;WorkOS&lt;/th&gt;
&lt;th&gt;WorkOS + Teams&lt;/th&gt;
&lt;th&gt;Components&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Livewire&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;React&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;td&gt;—&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Svelte&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;td&gt;—&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Vue&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;td&gt;—&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;ul&gt;
&lt;li&gt;React: 5&lt;/li&gt;
&lt;li&gt;Vue: 5&lt;/li&gt;
&lt;li&gt;Svelte: 5&lt;/li&gt;
&lt;li&gt;Livewire: 6&lt;/li&gt;
&lt;li&gt;Total: &lt;strong&gt;21&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;When submitting modifications as contributions, you should always keep this matrix in mind.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;If you already know which matrix combination you want, you can pass options to &lt;code&gt;php artisan build&lt;/code&gt; and avoid interactive mode altogether (this approach will also be introduced later).&lt;/p&gt;

&lt;h3&gt;
  
  
  The build/ Directory
&lt;/h3&gt;

&lt;p&gt;Looking at the directory tree again:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;% tree &lt;span class="nt"&gt;-L1&lt;/span&gt; &lt;span class="nt"&gt;-D&lt;/span&gt;
&lt;span class="nb"&gt;.&lt;/span&gt;
├── browser_tests
├── build &lt;span class="c"&gt;# &amp;lt;------------- This was added&lt;/span&gt;
├── kits
└── orchestrator
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;A &lt;strong&gt;build/&lt;/strong&gt; directory has been generated. This directory is created by &lt;strong&gt;orchestrator/&lt;/strong&gt; and serves as a &lt;strong&gt;working directory&lt;/strong&gt;. Essentially, it is a copy of the Laravel Starter Kit corresponding to the variant selected in &lt;strong&gt;orchestrator/&lt;/strong&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  However, the Actual Kit Is Started from orchestrator/
&lt;/h3&gt;

&lt;p&gt;Now let's run it. The application is not launched from &lt;strong&gt;build/&lt;/strong&gt;; instead, from &lt;strong&gt;orchestrator/&lt;/strong&gt; run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;composer kit:run
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This runs things such as &lt;code&gt;composer setup&lt;/code&gt;, injects a &lt;strong&gt;.env&lt;/strong&gt; file, and starts the selected variant.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fcdascaxpfhsa9mlzz5yn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fcdascaxpfhsa9mlzz5yn.png" alt=" " width="799" height="347"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;The selected variant has started&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Note that &lt;code&gt;kit:run&lt;/code&gt; occupies the terminal while running, so plan your workflow accordingly. Also, the port is fixed at &lt;strong&gt;8000&lt;/strong&gt;, so if that port is unavailable, development may become inconvenient. Changing the port is not particularly difficult, but requires a somewhat hacky approach, so it is best to start in an environment where port &lt;code&gt;8000&lt;/code&gt; is available.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F8bkmcxjqnk3qlce7dnlp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F8bkmcxjqnk3qlce7dnlp.png" alt=" " width="800" height="532"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Started via &lt;code&gt;kit:run&lt;/code&gt;&lt;/em&gt;&lt;/p&gt;


&lt;h2&gt;
  
  
  Practicing Contributions with Maestro
&lt;/h2&gt;

&lt;p&gt;Next, let's practice making modifications using Maestro. The example used here is not intended to be an actual contribution candidate.&lt;/p&gt;
&lt;h3&gt;
  
  
  Case 1: Change "Log in" to "Log on" on the Login Page
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Flnkimgl3dcvxikt7lk7p.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Flnkimgl3dcvxikt7lk7p.png" alt=" " width="800" height="853"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Change &lt;code&gt;Log in&lt;/code&gt; to &lt;code&gt;Log on&lt;/code&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;There is also a &lt;code&gt;Log in&lt;/code&gt; link on the Welcome page, but for this tutorial we will focus only on the login page.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F7isvom3ig2hl5yb5j7ar.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F7isvom3ig2hl5yb5j7ar.png" alt=" " width="800" height="179"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Other occurrences of &lt;code&gt;Log in&lt;/code&gt;, such as on the Welcome page, are out of scope for this tutorial&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Looking at the matrix:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Framework&lt;/th&gt;
&lt;th&gt;Blank&lt;/th&gt;
&lt;th&gt;Fortify&lt;/th&gt;
&lt;th&gt;Fortify + Teams&lt;/th&gt;
&lt;th&gt;WorkOS&lt;/th&gt;
&lt;th&gt;WorkOS + Teams&lt;/th&gt;
&lt;th&gt;Components&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Livewire&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;React&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;—&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Svelte&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;—&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Vue&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;—&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;These variants will need to be updated. WorkOS variants do not have a login page, so they are not affected. (Again, this tutorial focuses only on the login page, and WorkOS variants delegate authentication externally.)&lt;/p&gt;
&lt;h3&gt;
  
  
  Change the File in ../build
&lt;/h3&gt;

&lt;p&gt;Work is performed in &lt;strong&gt;build/&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;First, move into the &lt;strong&gt;build&lt;/strong&gt; directory.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fsmedn4kehz0kebv66rys.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fsmedn4kehz0kebv66rys.png" alt=" " width="665" height="344"&gt;&lt;/a&gt;&lt;br&gt;
Maestro is launched from &lt;strong&gt;orchestrator/&lt;/strong&gt;, but development work is done in &lt;strong&gt;build/&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Since &lt;strong&gt;build/&lt;/strong&gt; is the actual Laravel application, search for the target string using &lt;code&gt;rg&lt;/code&gt; or a similar tool.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fu4zfne5e863qkkvjh7nz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fu4zfne5e863qkkvjh7nz.png" alt=" " width="800" height="179"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Searching with &lt;code&gt;rg "Log in"&lt;/code&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;We find that the relevant file is &lt;strong&gt;resources/views/pages/auth/login.blade.php&lt;/strong&gt;, so edit it as follows:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight diff"&gt;&lt;code&gt;             &amp;lt;div class="flex items-center justify-end"&amp;gt;
                 &amp;lt;flux:button variant="primary" type="submit" class="w-full" data-test="login-button"&amp;gt;
&lt;span class="gd"&gt;-                     {{ __('Log in') }}
&lt;/span&gt;&lt;span class="gi"&gt;+                     {{ __('Log on') }}
&lt;/span&gt;                 &amp;lt;/flux:button&amp;gt;
             &amp;lt;/div&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fl9mqy0oh3dq851jdko6d.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fl9mqy0oh3dq851jdko6d.png" alt=" " width="800" height="824"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Changed to &lt;code&gt;Log on&lt;/code&gt;&lt;/em&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  Commit &amp;amp; PRs Are Made from kits/
&lt;/h3&gt;

&lt;p&gt;Although the modification was made in &lt;strong&gt;build/&lt;/strong&gt;, this directory is temporary and is not tracked directly in Git. When you modify &lt;strong&gt;build/&lt;/strong&gt;, a &lt;strong&gt;watcher automatically updates the corresponding files in kits/&lt;/strong&gt;. You can verify this by running &lt;code&gt;git status&lt;/code&gt; inside &lt;strong&gt;build/&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fe7fchphdlax00s91y5q1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fe7fchphdlax00s91y5q1.png" width="800" height="179"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;The watcher automatically updates the corresponding files in &lt;code&gt;../kits&lt;/code&gt;&lt;/em&gt; &lt;/p&gt;
&lt;h3&gt;
  
  
  Testing
&lt;/h3&gt;

&lt;p&gt;Everything looks good, so let's run tests. Testing is done from &lt;strong&gt;orchestrator&lt;/strong&gt; using commands such as &lt;code&gt;composer kits:pint&lt;/code&gt; and &lt;code&gt;composer kits:check -- --livewire&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;cd&lt;/span&gt; ../orchestrator

&lt;span class="c"&gt;# Source formatting&lt;/span&gt;
composer kits:pint

&lt;span class="c"&gt;# PHP tests (Livewire variants only)&lt;/span&gt;
composer kits:check &lt;span class="nt"&gt;--&lt;/span&gt; &lt;span class="nt"&gt;--livewire&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F9sav48oxg62vcf2gqvse.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F9sav48oxg62vcf2gqvse.png" width="800" height="355"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Running &lt;code&gt;kit:check&lt;/code&gt; while &lt;code&gt;kit:run&lt;/code&gt; is still active results in an error&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;While &lt;code&gt;kits:pint&lt;/code&gt; is fine, due to Maestro's design, you must &lt;strong&gt;stop &lt;code&gt;kit:run&lt;/code&gt; before running &lt;code&gt;kits:check&lt;/code&gt;&lt;/strong&gt;. Therefore, terminate the terminal session where &lt;code&gt;composer kit:run&lt;/code&gt; is running.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F08sij43islw9p0wvp6dq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F08sij43islw9p0wvp6dq.png" width="697" height="752"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;The tests take quite a while, but eventually complete&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;That completes the Livewire modification. As shown earlier, Git now reports:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;% git status
On branch main
Your branch is up to &lt;span class="nb"&gt;date &lt;/span&gt;with &lt;span class="s1"&gt;'origin/main'&lt;/span&gt;&lt;span class="nb"&gt;.&lt;/span&gt;

Changes not staged &lt;span class="k"&gt;for &lt;/span&gt;commit:
  &lt;span class="o"&gt;(&lt;/span&gt;use &lt;span class="s2"&gt;"git add &amp;lt;file&amp;gt;..."&lt;/span&gt; to update what will be committed&lt;span class="o"&gt;)&lt;/span&gt;
  &lt;span class="o"&gt;(&lt;/span&gt;use &lt;span class="s2"&gt;"git restore &amp;lt;file&amp;gt;..."&lt;/span&gt; to discard changes &lt;span class="k"&gt;in &lt;/span&gt;working directory&lt;span class="o"&gt;)&lt;/span&gt;
        modified:   ../kits/Livewire/Fortify/resources/views/pages/auth/login.blade.php

no changes added to commit &lt;span class="o"&gt;(&lt;/span&gt;use &lt;span class="s2"&gt;"git add"&lt;/span&gt; and/or &lt;span class="s2"&gt;"git commit -a"&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Since the changes have been propagated into &lt;strong&gt;kits/&lt;/strong&gt;, that is the directory whose contents should be committed, pushed, and submitted in a PR.&lt;/p&gt;




&lt;h2&gt;
  
  
  Rewriting the Remaining 7 Variants
&lt;/h2&gt;

&lt;p&gt;At this point, only Livewire/Fortify has been rewritten. The remaining 7 variants must also be updated, otherwise the PR is unlikely to be accepted.&lt;/p&gt;

&lt;p&gt;Of course, you could build them one by one, rewrite them one by one, and let the changes be reflected in &lt;strong&gt;kits/&lt;/strong&gt;. However, since that requires considerable effort, it is also acceptable to modify &lt;strong&gt;kits/&lt;/strong&gt; directly. For example, you could ask an AI to rewrite them like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;# Prompt for AI
Check the git diff for the changes made to:

kits/Livewire/Fortify/resources/views/pages/auth/login.blade.php

Based on those changes, update the remaining Fortify and Fortify + Teams variants for:

- Livewire
- React
- Svelte
- Vue

so that the `Log in` button is changed to `Log on` throughout the `kits/` directory.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Even when modifying &lt;strong&gt;kits/&lt;/strong&gt; directly, it is safer to stop &lt;code&gt;kit:run&lt;/code&gt;. Use it only when working inside &lt;strong&gt;build/&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;The following files were edited:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;kits/Inertia/Fortify/React/resources/js/pages/auth/login.tsx&lt;/li&gt;
&lt;li&gt;kits/Inertia/Fortify/Svelte/resources/js/pages/auth/Login.svelte&lt;/li&gt;
&lt;li&gt;kits/Inertia/Fortify/Vue/resources/js/pages/auth/Login.vue&lt;/li&gt;
&lt;li&gt;kits/Inertia/Teams/Fortify/React/resources/js/pages/auth/login.tsx&lt;/li&gt;
&lt;li&gt;kits/Inertia/Teams/Fortify/Svelte/resources/js/pages/auth/Login.svelte&lt;/li&gt;
&lt;li&gt;kits/Inertia/Teams/Fortify/Vue/resources/js/pages/auth/Login.vue&lt;/li&gt;
&lt;li&gt;kits/Livewire/Fortify/resources/views/pages/auth/login.blade.php&lt;/li&gt;
&lt;li&gt;kits/Livewire/Teams/Fortify/resources/views/pages/auth/login.blade.php&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fuqtrqjr39p3sgy9b7ymn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fuqtrqjr39p3sgy9b7ymn.png" alt=" " width="800" height="179"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Rewritten by AI&lt;/em&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  Actually Run One Variant and Test It in the Browser
&lt;/h3&gt;

&lt;p&gt;Here, we will verify React + Fortify + No Teams. In reality, after changing all eight files, you should manually test all eight variants in a browser. However, due to space constraints, only this one is shown.&lt;/p&gt;

&lt;p&gt;Since changes made directly in &lt;strong&gt;kits/&lt;/strong&gt; require rebuilding, move to &lt;strong&gt;orchestrator/&lt;/strong&gt; and run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;php artisan build &lt;span class="nt"&gt;--kit&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;react
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fmlb3fpyd3t0y9hh6vv7x.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fmlb3fpyd3t0y9hh6vv7x.png" alt=" " width="800" height="179"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Providing &lt;code&gt;--kit&lt;/code&gt; disables interactive mode.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;After that, run &lt;code&gt;composer kit:run&lt;/code&gt;, and the application will be accessible at localhost:8000. Let's take a look.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F9y4ljppvd8mfmctpl064.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F9y4ljppvd8mfmctpl064.png" alt=" " width="800" height="179"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;The React version has also been updated.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Proceed with testing the variants one by one in this manner.&lt;/p&gt;
&lt;h3&gt;
  
  
  Final Testing
&lt;/h3&gt;

&lt;p&gt;Again, stop &lt;code&gt;kit:run&lt;/code&gt;. Then move to &lt;strong&gt;./orchestrator&lt;/strong&gt; and run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;composer kits:pint
composer kits:check
composer kits:lint
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This executes all tests and linting. Note that linting is for JavaScript.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fec1k13pmlrwjh9xj6c7o.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fec1k13pmlrwjh9xj6c7o.png" alt=" " width="800" height="179"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Since it runs 21 combinations, the testing process takes quite a while.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Feygifgrjav0wsjfadewk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Feygifgrjav0wsjfadewk.png" alt=" " width="800" height="179"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;&lt;code&gt;kits:check&lt;/code&gt; shows &lt;code&gt;21 passed&lt;/code&gt;. It takes an extremely long time.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Additionally, &lt;code&gt;kits:lint&lt;/code&gt; runs 15 checks, which also takes a very long time.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fiw4nziynkzj13p6fa9o1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fiw4nziynkzj13p6fa9o1.png" alt=" " width="800" height="179"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;&lt;code&gt;kits:lint&lt;/code&gt; shows &lt;code&gt;15 passed&lt;/code&gt;. This is also lengthy.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;In any case, only after reaching this point are you ready to commit.&lt;/p&gt;


&lt;h2&gt;
  
  
  Preparing the Commit and PR
&lt;/h2&gt;

&lt;p&gt;In this example, the changes involve these eight files. As mentioned earlier, only &lt;strong&gt;kits/&lt;/strong&gt; should ever be included in the commit. Nothing else should be touched.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git add kits/
git commit
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F66um0bxxhy24n1s1qofv.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F66um0bxxhy24n1s1qofv.png" alt=" " width="798" height="113"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Commit&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;The username shown here is arbitrary, but in practice you should create commits appropriately for the project. After that, simply follow the project's OSS contribution process and submit the PR.&lt;/p&gt;


&lt;h2&gt;
  
  
  Example: Making a Shared Backend Change
&lt;/h2&gt;

&lt;p&gt;Previously, we modified eight frontend files. As a final example, let's learn how to make a backend change. This time, we'll build with &lt;code&gt;React + Fortify&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;cd &lt;/span&gt;orchestrator
php artisan build &lt;span class="nt"&gt;--kit&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;react
composer kit:run
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then work inside the &lt;strong&gt;build/&lt;/strong&gt; directory.&lt;/p&gt;

&lt;h3&gt;
  
  
  First, Set Up the Authentication Database
&lt;/h3&gt;

&lt;p&gt;Inside &lt;strong&gt;build/&lt;/strong&gt;, run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;php artisan migrate:fresh &lt;span class="nt"&gt;--seed&lt;/span&gt; &lt;span class="nt"&gt;--force&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ft0h0guvpalcxhls2nrog.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ft0h0guvpalcxhls2nrog.png" alt=" " width="798" height="113"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;The database was recreated and seeded.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;You can now log in using &lt;code&gt;test@example.com / password&lt;/code&gt;. Log in, navigate to Settings, click the profile update button, and observe the toast message.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Flamksurlw8jgo7kn6ncj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Flamksurlw8jgo7kn6ncj.png" alt=" " width="798" height="113"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;It displays &lt;code&gt;Profile updated.&lt;/code&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Let's change that text. Search for it using &lt;code&gt;rg&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fr6oncwrey1y4vjmypg7e.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fr6oncwrey1y4vjmypg7e.png" alt=" " width="798" height="113"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Searching with &lt;code&gt;rg&lt;/code&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;It turns out that simply modifying &lt;strong&gt;app/Http/Controllers/Settings/ProfileController.php&lt;/strong&gt; is sufficient. For example, change it to &lt;code&gt;Profile changed&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Then:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;% git status
On branch main
Your branch is ahead of &lt;span class="s1"&gt;'origin/main'&lt;/span&gt; by 1 commit.
  &lt;span class="o"&gt;(&lt;/span&gt;use &lt;span class="s2"&gt;"git push"&lt;/span&gt; to publish your &lt;span class="nb"&gt;local &lt;/span&gt;commits&lt;span class="o"&gt;)&lt;/span&gt;

Changes not staged &lt;span class="k"&gt;for &lt;/span&gt;commit:
  &lt;span class="o"&gt;(&lt;/span&gt;use &lt;span class="s2"&gt;"git add &amp;lt;file&amp;gt;..."&lt;/span&gt; to update what will be committed&lt;span class="o"&gt;)&lt;/span&gt;
  &lt;span class="o"&gt;(&lt;/span&gt;use &lt;span class="s2"&gt;"git restore &amp;lt;file&amp;gt;..."&lt;/span&gt; to discard changes &lt;span class="k"&gt;in &lt;/span&gt;working directory&lt;span class="o"&gt;)&lt;/span&gt;
        modified:   ../kits/Inertia/Base/app/Http/Controllers/Settings/ProfileController.php
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;As shown above, the watcher detects the change and updates &lt;strong&gt;kits/Inertia/Base/app/Http/Controllers/Settings/ProfileController.php&lt;/strong&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Updating Livewire
&lt;/h3&gt;

&lt;p&gt;Notice the focus on &lt;strong&gt;kits/Inertia&lt;/strong&gt;. At this stage, all Inertia backend changes have been completed. However, the Livewire side has not yet been updated, so we must make the corresponding Livewire changes.&lt;/p&gt;

&lt;p&gt;Stop &lt;code&gt;kit:run&lt;/code&gt;, then in &lt;strong&gt;orchestrator/&lt;/strong&gt; run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;php artisan build &lt;span class="nt"&gt;--kit&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;livewire
composer kit:run
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Once it starts, move to &lt;strong&gt;build/&lt;/strong&gt; and run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;php artisan migrate:fresh &lt;span class="nt"&gt;--seed&lt;/span&gt; &lt;span class="nt"&gt;--force&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then log in and navigate to the relevant page.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fedltknieaihrjinkf89y.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fedltknieaihrjinkf89y.png" alt=" " width="798" height="113"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;The style is actually a little different from React and the others, but functionally it's equivalent.&lt;/em&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  Livewire Does Not Handle This Through a Controller
&lt;/h3&gt;

&lt;p&gt;Searching with &lt;code&gt;rg&lt;/code&gt; reveals that this is handled in &lt;strong&gt;resources/views/pages/settings/profile.blade.php&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fi4yke0v5o8waia22ibxa.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fi4yke0v5o8waia22ibxa.png" alt=" " width="798" height="113"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Handled in a view file rather than a controller.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;This can be confusing if you're not familiar with Livewire (the author isn't particularly experienced with it either), but since it is just a simple text replacement, let's make the change.&lt;/p&gt;

&lt;p&gt;Then:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fkrm5fz0gjnomdyh67duo.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fkrm5fz0gjnomdyh67duo.png" alt=" " width="798" height="113"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As shown, &lt;strong&gt;kits/Livewire/Fortify/resources/views/pages/settings/profile.blade.php&lt;/strong&gt; is now modified as well.&lt;/p&gt;

&lt;p&gt;For this change, these two files will be committed. The remaining steps are the same: stop &lt;code&gt;kit:run&lt;/code&gt;, then run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;composer kits:pint
composer kits:check
&lt;span class="c"&gt;# composer kits:lint # Not necessary this time&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Since this is not a frontend change, &lt;code&gt;kits:lint&lt;/code&gt; is unnecessary. If the tests pass, proceed with the same commit, push, and PR workflow.&lt;/p&gt;

</description>
      <category>laravel</category>
      <category>php</category>
    </item>
    <item>
      <title>Laravel in 2026: Starter Kits, AI SDK, and the End of the Breeze Era</title>
      <dc:creator>catatsumuri</dc:creator>
      <pubDate>Sun, 24 May 2026 22:57:40 +0000</pubDate>
      <link>https://dev.to/catatsumuri/laravel-in-2026-starter-kits-ai-sdk-and-the-end-of-the-breeze-era-1m0g</link>
      <guid>https://dev.to/catatsumuri/laravel-in-2026-starter-kits-ai-sdk-and-the-end-of-the-breeze-era-1m0g</guid>
      <description>&lt;p&gt;Why Laravel? That is not the topic here.&lt;/p&gt;

&lt;p&gt;This article assumes you already decided to build with Laravel, and instead focuses on a more practical question:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;What does the Laravel ecosystem actually look like in 2026, and what should you choose today?&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The original draft was based on material gathered through ChatGPT Deep Research, then heavily revised with additional analysis and commentary from actual ecosystem observation. The goal is not neutrality for its own sake, but a realistic reading of where Laravel is heading.&lt;/p&gt;




&lt;h1&gt;
  
  
  The State of Laravel in April 2026
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Executive Summary
&lt;/h2&gt;

&lt;p&gt;As of April 2026, the situation around Laravel starter kits has become fairly clear:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Breeze and Jetstream are not “dead,” but they are no longer the strategic center of the ecosystem.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Laravel officially shifted its public onboarding flow toward the new Starter Kits in 2025. Breeze and Jetstream still receive maintenance updates even in 2026, but their READMEs explicitly position them as belonging to the Laravel 11 era and earlier.&lt;/p&gt;

&lt;p&gt;The practical conclusion is:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Breeze should no longer be considered the default choice for new production systems&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Jetstream remains acceptable for existing systems, but is difficult to justify for new adoption&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;The modern default is now Starter Kit + Inertia, especially React&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Livewire is still highly relevant and should not be dismissed as “legacy inertia”&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That last point matters more than many people realize.&lt;/p&gt;

&lt;p&gt;A surprisingly large portion of the discourse around Laravel UI strategy focuses only on GitHub stars of the public starter repositories. That produces a misleading picture.&lt;/p&gt;

&lt;p&gt;Yes, React Starter Kit currently has stronger momentum as the public-facing “entry point.” But the broader Laravel UI ecosystem still shows enormous Livewire adoption.&lt;/p&gt;

&lt;p&gt;The ecosystem split is becoming increasingly visible:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;React + Inertia dominates external AI-oriented products and modern SaaS UX&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Vue remains a pragmatic choice for teams with existing Vue investment&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Livewire continues to excel in internal systems, admin panels, and PHP-centric organizations&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Svelte is promising, but still lacks ecosystem gravity for default adoption&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The larger story, however, is not merely frontend selection.&lt;/p&gt;

&lt;p&gt;The real shift is that Laravel’s AI SDK is beginning to change Laravel’s architectural assumptions themselves.&lt;/p&gt;

&lt;p&gt;This is not just “another package.”&lt;/p&gt;

&lt;p&gt;Laravel is increasingly treating AI capabilities as part of the framework’s default application model:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;AI SDK&lt;/li&gt;
&lt;li&gt;MCP integration&lt;/li&gt;
&lt;li&gt;Boost&lt;/li&gt;
&lt;li&gt;Cloud APIs&lt;/li&gt;
&lt;li&gt;Agent Skills&lt;/li&gt;
&lt;li&gt;Maestro-managed starter kits&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These are not isolated experiments anymore.&lt;/p&gt;

&lt;p&gt;They are converging into a coherent platform direction.&lt;/p&gt;




&lt;h1&gt;
  
  
  Research Assumptions
&lt;/h1&gt;

&lt;p&gt;This analysis prioritizes primary sources:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Laravel 13 release notes&lt;/li&gt;
&lt;li&gt;Official AI SDK documentation&lt;/li&gt;
&lt;li&gt;Starter Kit documentation&lt;/li&gt;
&lt;li&gt;Laravel blog posts&lt;/li&gt;
&lt;li&gt;Public statements by Taylor Otwell&lt;/li&gt;
&lt;li&gt;Official GitHub repositories, issues, and pull requests&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Community discussions in both English and Japanese were used mainly to identify practical pain points rather than as authoritative sources.&lt;/p&gt;

&lt;p&gt;One important complication is that the new Starter Kits are distributed as cloneable repositories rather than Packagist packages.&lt;/p&gt;

&lt;p&gt;That means install counts cannot be measured in the same way as Breeze or Jetstream.&lt;/p&gt;

&lt;p&gt;As a result, public GitHub signals such as:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;stars&lt;/li&gt;
&lt;li&gt;forks&lt;/li&gt;
&lt;li&gt;issue activity&lt;/li&gt;
&lt;li&gt;ecosystem discussion volume&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;must be treated as imperfect adoption proxies.&lt;/p&gt;

&lt;p&gt;This is actually a structural weakness of repository-template distribution models in general.&lt;/p&gt;




&lt;h1&gt;
  
  
  Comparing the Starter Kit Options
&lt;/h1&gt;

&lt;p&gt;Let’s state the conclusion first.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Breeze is no longer the default recommendation for new production applications.&lt;/p&gt;

&lt;p&gt;Jetstream is difficult to justify outside existing systems.&lt;/p&gt;

&lt;p&gt;The primary battlefield is now Starter Kit + Inertia or Starter Kit + Livewire.&lt;/p&gt;

&lt;p&gt;The strongest default choice today is React + Inertia.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;However, dismissing Livewire as merely “legacy momentum” is a serious misunderstanding.&lt;/p&gt;

&lt;h2&gt;
  
  
  Breeze
&lt;/h2&gt;

&lt;p&gt;Breeze still has real advantages:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;minimal structure&lt;/li&gt;
&lt;li&gt;easy-to-read authentication flow&lt;/li&gt;
&lt;li&gt;relatively small codebase&lt;/li&gt;
&lt;li&gt;useful for backend/API-oriented systems&lt;/li&gt;
&lt;li&gt;easier onboarding for traditional Laravel developers&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;There is also a practical reality many people understate:&lt;/p&gt;

&lt;p&gt;A large number of teams still adopt Breeze successfully even in Laravel 12 and 13.&lt;/p&gt;

&lt;p&gt;Why?&lt;/p&gt;

&lt;p&gt;Because the modern Starter Kits are heavy.&lt;/p&gt;

&lt;p&gt;Not only technically heavy, but operationally heavy:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;rapidly changing upstream conventions&lt;/li&gt;
&lt;li&gt;evolving frontend architecture&lt;/li&gt;
&lt;li&gt;weak documentation stability&lt;/li&gt;
&lt;li&gt;limited Japanese-language ecosystem support&lt;/li&gt;
&lt;li&gt;frontend discipline requirements many Laravel teams historically never needed&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In practice, many teams still choose Breeze simply because they can fully understand it.&lt;/p&gt;

&lt;p&gt;That matters.&lt;/p&gt;

&lt;p&gt;Still, from Laravel’s strategic direction, Breeze is no longer where the framework’s future investment is concentrated.&lt;/p&gt;

&lt;p&gt;Laravel increasingly treats the application starting point not as:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“authentication scaffolding”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;but rather as:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“AI-ready frontend + auth + DX platform foundation”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;That is a major philosophical shift.&lt;/p&gt;

&lt;p&gt;Breeze still has value.&lt;/p&gt;

&lt;p&gt;But increasingly, that value resembles:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;learning material&lt;/li&gt;
&lt;li&gt;minimal proof-of-concept foundation&lt;/li&gt;
&lt;li&gt;compatibility layer&lt;/li&gt;
&lt;li&gt;reference implementation&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;rather than “the modern standard.”&lt;/p&gt;




&lt;h2&gt;
  
  
  Jetstream
&lt;/h2&gt;

&lt;p&gt;Jetstream faces a harder problem.&lt;/p&gt;

&lt;p&gt;Historically, Jetstream differentiated itself through:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;teams support&lt;/li&gt;
&lt;li&gt;2FA&lt;/li&gt;
&lt;li&gt;session management&lt;/li&gt;
&lt;li&gt;more feature-complete authentication workflows&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;But much of that territory is now being absorbed by the Starter Kit ecosystem itself.&lt;/p&gt;

&lt;p&gt;Laravel’s newer Starter Kits increasingly support:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;built-in authentication&lt;/li&gt;
&lt;li&gt;WorkOS integration&lt;/li&gt;
&lt;li&gt;passkeys&lt;/li&gt;
&lt;li&gt;social login&lt;/li&gt;
&lt;li&gt;magic authentication&lt;/li&gt;
&lt;li&gt;SSO flows&lt;/li&gt;
&lt;li&gt;team variants&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Meanwhile, Maestro now manages large variant matrices internally across:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Fortify&lt;/li&gt;
&lt;li&gt;WorkOS&lt;/li&gt;
&lt;li&gt;Teams&lt;/li&gt;
&lt;li&gt;framework variants&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;As a result, Jetstream’s unique positioning has weakened significantly.&lt;/p&gt;

&lt;p&gt;Existing Jetstream systems are still perfectly reasonable to maintain.&lt;/p&gt;

&lt;p&gt;But for greenfield applications, the argument for starting with Jetstream has become increasingly thin.&lt;/p&gt;




&lt;h2&gt;
  
  
  React Starter Kit + Inertia
&lt;/h2&gt;

&lt;p&gt;This is currently the strongest default recommendation for new external-facing Laravel applications.&lt;/p&gt;

&lt;p&gt;The reasons are straightforward:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;React ecosystem dominance&lt;/li&gt;
&lt;li&gt;strong AI UI ecosystem compatibility&lt;/li&gt;
&lt;li&gt;shadcn/ui momentum&lt;/li&gt;
&lt;li&gt;Radix primitives&lt;/li&gt;
&lt;li&gt;React 19 ecosystem maturity&lt;/li&gt;
&lt;li&gt;TypeScript-first workflows&lt;/li&gt;
&lt;li&gt;modern component architecture&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;More importantly, AI-oriented UX increasingly favors rich client-side interaction models.&lt;/p&gt;

&lt;p&gt;That naturally aligns with React.&lt;/p&gt;

&lt;p&gt;Laravel appears fully aware of this.&lt;/p&gt;

&lt;p&gt;The modern Starter Kits are clearly optimized around:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;TypeScript&lt;/li&gt;
&lt;li&gt;component-driven UI&lt;/li&gt;
&lt;li&gt;modern frontend tooling&lt;/li&gt;
&lt;li&gt;AI-ready interaction patterns&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;rather than traditional server-rendered MVC assumptions.&lt;/p&gt;

&lt;p&gt;The downside is equally obvious:&lt;/p&gt;

&lt;p&gt;This stack requires real frontend engineering discipline.&lt;/p&gt;

&lt;p&gt;Teams accustomed to purely backend-centric Laravel workflows often underestimate:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;frontend state complexity&lt;/li&gt;
&lt;li&gt;TypeScript maintenance&lt;/li&gt;
&lt;li&gt;component architecture overhead&lt;/li&gt;
&lt;li&gt;npm ecosystem churn&lt;/li&gt;
&lt;li&gt;modern frontend build tooling expectations&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Still, for customer-facing AI-heavy products, React + Inertia is currently the strongest default choice.&lt;/p&gt;




&lt;h2&gt;
  
  
  Vue Starter Kit + Inertia
&lt;/h2&gt;

&lt;p&gt;Vue remains the pragmatic choice for organizations already invested in Vue.&lt;/p&gt;

&lt;p&gt;The migration cost is lower.&lt;/p&gt;

&lt;p&gt;The mental model is stable.&lt;/p&gt;

&lt;p&gt;The Composition API ecosystem is mature.&lt;/p&gt;

&lt;p&gt;However, React currently has stronger gravity in:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;AI-oriented UI libraries&lt;/li&gt;
&lt;li&gt;external ecosystem examples&lt;/li&gt;
&lt;li&gt;modern component ecosystems&lt;/li&gt;
&lt;li&gt;bleeding-edge frontend tooling momentum&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Vue is therefore less “future dominant,” but still highly viable.&lt;/p&gt;

&lt;p&gt;For many teams, stability may matter more than ecosystem fashion.&lt;/p&gt;




&lt;h2&gt;
  
  
  Svelte Starter Kit + Inertia
&lt;/h2&gt;

&lt;p&gt;Svelte is interesting.&lt;/p&gt;

&lt;p&gt;The developer experience is genuinely attractive.&lt;/p&gt;

&lt;p&gt;Svelte 5 is modern and elegant.&lt;/p&gt;

&lt;p&gt;Inertia integration is surprisingly clean.&lt;/p&gt;

&lt;p&gt;But ecosystem gravity still matters.&lt;/p&gt;

&lt;p&gt;Right now:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;ecosystem scale remains limited&lt;/li&gt;
&lt;li&gt;learning resources are thinner&lt;/li&gt;
&lt;li&gt;Laravel-specific operational knowledge is scarce&lt;/li&gt;
&lt;li&gt;hiring pools are smaller&lt;/li&gt;
&lt;li&gt;official investment signals are weaker&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Svelte is viable for teams already committed to it.&lt;/p&gt;

&lt;p&gt;But it is still difficult to recommend as the default Laravel frontend strategy.&lt;/p&gt;




&lt;h2&gt;
  
  
  Livewire Is Not Dead
&lt;/h2&gt;

&lt;p&gt;This point deserves emphasis.&lt;/p&gt;

&lt;p&gt;Many discussions incorrectly frame Livewire as a fading legacy option.&lt;/p&gt;

&lt;p&gt;The numbers simply do not support that narrative.&lt;/p&gt;

&lt;p&gt;Livewire still maintains enormous ecosystem presence:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;tens of millions of installs&lt;/li&gt;
&lt;li&gt;massive production footprint&lt;/li&gt;
&lt;li&gt;strong GitHub activity&lt;/li&gt;
&lt;li&gt;official Laravel investment&lt;/li&gt;
&lt;li&gt;Flux UI integration&lt;/li&gt;
&lt;li&gt;Livewire 4 ecosystem momentum&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The important distinction is this:&lt;/p&gt;

&lt;p&gt;Public starter kit repository popularity does not equal total ecosystem dominance.&lt;/p&gt;

&lt;p&gt;Livewire continues to perform extremely well for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;internal business systems&lt;/li&gt;
&lt;li&gt;admin dashboards&lt;/li&gt;
&lt;li&gt;operational tooling&lt;/li&gt;
&lt;li&gt;PHP-centric organizations&lt;/li&gt;
&lt;li&gt;teams minimizing frontend specialization&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Where Livewire becomes less comfortable is extremely interaction-heavy AI UX with complex client-side state.&lt;/p&gt;

&lt;p&gt;There, React usually provides more architectural flexibility.&lt;/p&gt;

&lt;p&gt;But for large classes of real-world business applications, Livewire remains extremely competitive.&lt;/p&gt;

&lt;p&gt;Calling it “only inertia” misunderstands the actual Laravel user base.&lt;/p&gt;




&lt;h1&gt;
  
  
  Laravel’s AI Direction
&lt;/h1&gt;

&lt;p&gt;The most important shift in Laravel right now is not frontend technology.&lt;/p&gt;

&lt;p&gt;It is the framework’s AI-native direction.&lt;/p&gt;

&lt;p&gt;Laravel increasingly behaves as though AI is not an extension layer, but part of the framework’s core application model.&lt;/p&gt;

&lt;p&gt;This matters because many frameworks currently integrate AI as:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;external orchestration&lt;/li&gt;
&lt;li&gt;generic SDK wrappers&lt;/li&gt;
&lt;li&gt;thin API abstractions&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Laravel is instead attempting to integrate AI directly into:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;queues&lt;/li&gt;
&lt;li&gt;events&lt;/li&gt;
&lt;li&gt;auth&lt;/li&gt;
&lt;li&gt;filesystem&lt;/li&gt;
&lt;li&gt;application lifecycle&lt;/li&gt;
&lt;li&gt;structured workflows&lt;/li&gt;
&lt;li&gt;operational tooling&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In other words:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Laravel is trying to remain Laravel while becoming AI-native.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;That is strategically important.&lt;/p&gt;

&lt;p&gt;And honestly, fairly ambitious.&lt;/p&gt;




&lt;h1&gt;
  
  
  1-Year Outlook
&lt;/h1&gt;

&lt;p&gt;Over the next year, Laravel’s AI direction will likely continue aggressively.&lt;/p&gt;

&lt;p&gt;The signals are already obvious:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;AI SDK&lt;/li&gt;
&lt;li&gt;MCP support&lt;/li&gt;
&lt;li&gt;Boost&lt;/li&gt;
&lt;li&gt;Cloud APIs&lt;/li&gt;
&lt;li&gt;Agent Skills&lt;/li&gt;
&lt;li&gt;Maestro&lt;/li&gt;
&lt;li&gt;Starter Kit consolidation&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The likely short-term evolution areas are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;conversation state stabilization&lt;/li&gt;
&lt;li&gt;tool-loop orchestration&lt;/li&gt;
&lt;li&gt;structured output improvements&lt;/li&gt;
&lt;li&gt;vector-store integrations&lt;/li&gt;
&lt;li&gt;multi-tenant AI architecture support&lt;/li&gt;
&lt;li&gt;operational maturity around AI workflows&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This is not based on secret roadmap knowledge.&lt;/p&gt;

&lt;p&gt;It is simply the logical reading of where official framework investment is concentrated.&lt;/p&gt;




&lt;h1&gt;
  
  
  3-Year Outlook
&lt;/h1&gt;

&lt;p&gt;Within roughly three years, Laravel’s UI strategy will probably polarize even further.&lt;/p&gt;

&lt;p&gt;The ecosystem split may become:&lt;/p&gt;

&lt;h2&gt;
  
  
  React + Inertia
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;external-facing products&lt;/li&gt;
&lt;li&gt;AI-first experiences&lt;/li&gt;
&lt;li&gt;rich interactive UX&lt;/li&gt;
&lt;li&gt;modern SaaS platforms&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Livewire
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;internal systems&lt;/li&gt;
&lt;li&gt;management interfaces&lt;/li&gt;
&lt;li&gt;operational tooling&lt;/li&gt;
&lt;li&gt;PHP-centric organizations&lt;/li&gt;
&lt;li&gt;productivity-oriented systems&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Vue likely survives as the “stable pragmatic middle.”&lt;/p&gt;

&lt;p&gt;Svelte may remain niche unless official investment accelerates significantly.&lt;/p&gt;

&lt;p&gt;Meanwhile, Breeze and Jetstream increasingly transition into compatibility assets rather than ecosystem centers.&lt;/p&gt;




&lt;h1&gt;
  
  
  5-Year Outlook
&lt;/h1&gt;

&lt;p&gt;Five years is long enough that predictions become dangerous.&lt;/p&gt;

&lt;p&gt;Still, some directional probabilities are visible.&lt;/p&gt;

&lt;p&gt;The Laravel components most likely to remain strategically central are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Eloquent&lt;/li&gt;
&lt;li&gt;Queue&lt;/li&gt;
&lt;li&gt;Events&lt;/li&gt;
&lt;li&gt;Auth&lt;/li&gt;
&lt;li&gt;Broadcasting&lt;/li&gt;
&lt;li&gt;Filesystem&lt;/li&gt;
&lt;li&gt;AI-integrated application primitives&lt;/li&gt;
&lt;li&gt;Maestro-managed starter ecosystems&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The components most likely to lose strategic importance are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;legacy authentication starter packages&lt;/li&gt;
&lt;li&gt;older frontend assumptions&lt;/li&gt;
&lt;li&gt;Blade-first public application architecture&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This last point deserves nuance.&lt;/p&gt;

&lt;p&gt;Blade itself is not dying.&lt;/p&gt;

&lt;p&gt;Blade remains deeply embedded inside Laravel:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;mail rendering&lt;/li&gt;
&lt;li&gt;internal templating&lt;/li&gt;
&lt;li&gt;Inertia foundations&lt;/li&gt;
&lt;li&gt;server-side workflows&lt;/li&gt;
&lt;li&gt;operational tooling&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;But Blade is increasingly no longer the assumed default public UI architecture.&lt;/p&gt;

&lt;p&gt;That distinction matters.&lt;/p&gt;




&lt;h1&gt;
  
  
  Final Thoughts
&lt;/h1&gt;

&lt;p&gt;Laravel in 2026 feels fundamentally different from Laravel in the Breeze era.&lt;/p&gt;

&lt;p&gt;The framework is no longer optimizing primarily for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;simple MVC onboarding&lt;/li&gt;
&lt;li&gt;lightweight auth scaffolding&lt;/li&gt;
&lt;li&gt;traditional PHP-only workflows&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Instead, Laravel is increasingly positioning itself as:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;an AI-native application platform&lt;/li&gt;
&lt;li&gt;with integrated operational tooling&lt;/li&gt;
&lt;li&gt;modern frontend expectations&lt;/li&gt;
&lt;li&gt;strong developer experience&lt;/li&gt;
&lt;li&gt;full-stack orchestration assumptions&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That creates both strengths and risks.&lt;/p&gt;

&lt;p&gt;The strength is coherence.&lt;/p&gt;

&lt;p&gt;Laravel increasingly feels like a unified application platform rather than a disconnected package collection.&lt;/p&gt;

&lt;p&gt;The risk is that complexity rises.&lt;/p&gt;

&lt;p&gt;The modern Laravel ecosystem now expects:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;frontend literacy&lt;/li&gt;
&lt;li&gt;TypeScript familiarity&lt;/li&gt;
&lt;li&gt;operational maturity&lt;/li&gt;
&lt;li&gt;AI workflow understanding&lt;/li&gt;
&lt;li&gt;ecosystem adaptation speed&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For some teams, that is exciting.&lt;/p&gt;

&lt;p&gt;For others, it is exhausting.&lt;/p&gt;

&lt;p&gt;But regardless of preference, the direction itself is becoming difficult to ignore.&lt;/p&gt;

&lt;p&gt;And if you are building new Laravel applications in 2026, pretending the ecosystem has not changed is probably the real mistake.&lt;/p&gt;

</description>
      <category>laravel</category>
      <category>php</category>
      <category>breeze</category>
      <category>ai</category>
    </item>
    <item>
      <title>Laravel Starter Kit Localization Is Surprisingly Painful</title>
      <dc:creator>catatsumuri</dc:creator>
      <pubDate>Sun, 17 May 2026 10:01:21 +0000</pubDate>
      <link>https://dev.to/catatsumuri/laravel-starter-kit-localization-is-surprisingly-painful-2ipk</link>
      <guid>https://dev.to/catatsumuri/laravel-starter-kit-localization-is-surprisingly-painful-2ipk</guid>
      <description>&lt;h2&gt;
  
  
  About Laravel Starter Kits Since Laravel 12
&lt;/h2&gt;

&lt;p&gt;These are meant to rapidly deploy functionality that is almost essential during the initial launch of an application, including the following:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Layouts

&lt;ul&gt;
&lt;li&gt;A typical sidebar layout&lt;/li&gt;
&lt;li&gt;Or a typical header layout &lt;/li&gt;
&lt;li&gt;Breadcrumbs&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;Authentication

&lt;ul&gt;
&lt;li&gt;Basic session management&lt;/li&gt;
&lt;li&gt;Password reminders&lt;/li&gt;
&lt;li&gt;Self-registration&lt;/li&gt;
&lt;li&gt;TOTP-based 2FA&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;User settings

&lt;ul&gt;
&lt;li&gt;Profile&lt;/li&gt;
&lt;li&gt;Light mode / dark mode switching&lt;/li&gt;
&lt;li&gt;Account deletion&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;Simple dashboard&lt;/li&gt;

&lt;/ul&gt;




&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu8rrew63rjz1a2kvofru.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu8rrew63rjz1a2kvofru.png" width="498" height="530"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Provided authentication screen&lt;/em&gt;&lt;/p&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqcs9xy4yh2neoidoi5n3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqcs9xy4yh2neoidoi5n3.png" width="793" height="815"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Part of the user settings&lt;/em&gt;&lt;/p&gt;



&lt;p&gt;As you can see, this is extremely convenient for getting a project off the ground. However, especially in Japanese-speaking regions, adoption does not seem to be progressing very well. One reason is probably that the functionality is somewhat difficult to understand, but another major factor is likely the effort required for Japanese localization. Nowadays, with AI programming, identifying and rewriting English interfaces is not especially difficult, but not everyone has access to AI development agents, repeatedly translating everything with AI is exhausting, and if you are making an ambitious attempt to support multilingualization as OSS, then Laravel Starter Kits will inevitably run into localization issues.&lt;/p&gt;
&lt;h3&gt;
  
  
  Laravel Starter Kits Actually Come in About Four Flavors
&lt;/h3&gt;

&lt;p&gt;Even when we say “Laravel Starter Kit,” there are currently about four flavors. First, I want to organize them.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Livewire-based&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Inertia.js-based&lt;/strong&gt;

&lt;ul&gt;
&lt;li&gt;React&lt;/li&gt;
&lt;li&gt;Vue&lt;/li&gt;
&lt;li&gt;Svelte&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;At a broad level, things first split into Livewire and Inertia.js, and under Inertia.js there are three more flavors, each with branches beneath them... This huge number of variations is itself one of the characteristics of this project. Since the localization situation differs between &lt;strong&gt;Livewire and Inertia.js&lt;/strong&gt;, you first need to understand that distinction.&lt;/p&gt;

&lt;p&gt;To give the conclusion up front: if you intend to complete your project with Livewire, multilingualization is not especially difficult, and there is already some infrastructure in place. However, if you try to localize Inertia.js, there is no translation mechanism in the Starter Kit’s default state.&lt;/p&gt;
&lt;h2&gt;
  
  
  Projects for i18n in Laravel
&lt;/h2&gt;
&lt;h3&gt;
  
  
  Laravel’s Built-in Translation Mechanism
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;On the backend side&lt;/strong&gt;, Laravel itself already has localization functionality, which is reinforced through additional resources provided by Laravel Lang.&lt;/p&gt;

&lt;p&gt;Laravel 13 Localization Documentation:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://laravel.com/docs/13.x/localization" rel="noopener noreferrer"&gt;https://laravel.com/docs/13.x/localization&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  About Laravel-Lang
&lt;/h3&gt;

&lt;p&gt;There has actually been a project called &lt;a href="https://laravel-lang.com/" rel="noopener noreferrer"&gt;Laravel-Lang&lt;/a&gt; for quite a while, and it already provides some multilingualization mechanisms.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://laravel-lang.com/basic-usage.html" rel="noopener noreferrer"&gt;https://laravel-lang.com/basic-usage.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Following the documentation:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;composer require laravel-lang/common
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This resolves and installs the following dependencies:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;laravel-lang/publisher&lt;/li&gt;
&lt;li&gt;laravel-lang/lang&lt;/li&gt;
&lt;li&gt;laravel-lang/attributes&lt;/li&gt;
&lt;li&gt;laravel-lang/http-statuses&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;laravel-lang/starter-kits&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;At first glance, it seems like this package might somehow magically handle Starter Kit localization, but reality is not so simple. We’ll look at that later. Simply installing the package only expands files under &lt;strong&gt;vendor/&lt;/strong&gt;, so at this stage, nothing is actually usable yet.&lt;/p&gt;

&lt;h2&gt;
  
  
  Deploying Into the Actual Project With the lang:add Command
&lt;/h2&gt;

&lt;p&gt;You execute it like this. Here, we’ll only deploy &lt;code&gt;ja&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;php artisan lang:add ja
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The actual implementation of this command comes from the previously resolved dependency &lt;code&gt;laravel-lang/publisher&lt;/code&gt;, which performs the following tasks:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Determine the target locale&lt;/li&gt;
&lt;li&gt;Select only enabled plugins from the plugin list&lt;/li&gt;
&lt;li&gt;Read the key list from &lt;code&gt;source/...&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Read values from &lt;code&gt;locales/{locale}/...&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Write them into &lt;code&gt;lang/{locale}.json&lt;/code&gt; or &lt;code&gt;lang/{locale}/*.php&lt;/code&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;In any case, once this command is executed, things should expand like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight console"&gt;&lt;code&gt;&lt;span class="go"&gt;   INFO  Collecting translations...

  LaravelLang\Actions\Plugin ............................................................................. 2.37ms DONE
  LaravelLang\Attributes\Plugin .......................................................................... 0.83ms DONE
  LaravelLang\HttpStatuses\Plugin ........................................................................ 1.28ms DONE
  LaravelLang\Lang\Plugin ................................................................................ 5.90ms DONE
  LaravelLang\StarterKits\Plugin ......................................................................... 1.37ms DONE

   INFO  Storing changes...

  ja.json ................................................................................................ 5.04ms DONE
  ja/actions.php ......................................................................................... 4.65ms DONE
  ja/auth.php ............................................................................................ 0.45ms DONE
  ja/http-statuses.php ................................................................................... 2.02ms DONE
  ja/pagination.php ...................................................................................... 0.55ms DONE
  ja/passwords.php ....................................................................................... 0.52ms DONE
  ja/validation.php
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Locale Configuration
&lt;/h3&gt;

&lt;p&gt;As described in the &lt;a href="https://laravel.com/docs/13.x/localization#configuring-the-locale" rel="noopener noreferrer"&gt;official documentation&lt;/a&gt;, this is determined by the &lt;code&gt;APP_LOCALE&lt;/code&gt; environment variable, and falls back to &lt;code&gt;APP_FALLBACK_LOCALE&lt;/code&gt; if unavailable. Therefore, for Japanese localization, the configuration would typically look like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;#APP_LOCALE=en
APP_LOCALE=ja
APP_FALLBACK_LOCALE=en
APP_FAKER_LOCALE=en_US
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This localizes the backend.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj743kho3p9e27f5iisxh.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj743kho3p9e27f5iisxh.png" width="672" height="473"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;For example, after installing the package and configuring the locale, even 404 pages are immediately translated into Japanese. But this is backend functionality.&lt;/em&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Frontend Support
&lt;/h2&gt;

&lt;p&gt;This is where the problem begins.&lt;/p&gt;

&lt;p&gt;As mentioned earlier, the situation differs between Livewire and Inertia.js. To say it first: &lt;strong&gt;the only thing functioning relatively properly at the moment is Livewire&lt;/strong&gt;. So let’s start with the Livewire side.&lt;/p&gt;
&lt;h3&gt;
  
  
  Roughly How Laravel-Lang Builds Translation Files
&lt;/h3&gt;

&lt;p&gt;There are actually two major types of translation files: &lt;strong&gt;&lt;code&gt;.json&lt;/code&gt;&lt;/strong&gt; and &lt;strong&gt;&lt;code&gt;.php&lt;/code&gt;&lt;/strong&gt; types. Since the frontend mainly uses &lt;code&gt;.json&lt;/code&gt; files, I’ll focus on those here.&lt;/p&gt;

&lt;p&gt;At this point, the dependency resolution from &lt;code&gt;laravel-lang/common&lt;/code&gt; should have expanded the following four files:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;vendor/laravel-lang/starter-kits/locales/ja/json.json
vendor/laravel-lang/lang/locales/ja/json.json
vendor/laravel-lang/http-statuses/locales/ja/json.json
vendor/laravel-lang/actions/locales/ja/json.json
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;These are merged together to ultimately form the file &lt;strong&gt;lang/ja.json&lt;/strong&gt;. However, not everything is blindly copied over; there is actually a filtering stage called &lt;code&gt;source&lt;/code&gt; defined beforehand. For example, let’s look at the Livewire one.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/Laravel-Lang/starter-kits/blob/main/source/livewire/main/livewire.json" rel="noopener noreferrer"&gt;https://github.com/Laravel-Lang/starter-kits/blob/main/source/livewire/main/livewire.json&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Only the keys listed here are picked up and internally expanded, so this mechanism seems intended to filter out unnecessary keys.&lt;/p&gt;

&lt;p&gt;Meanwhile, the current React situation looks like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/Laravel-Lang/starter-kits/blob/main/source/react/main/react.json" rel="noopener noreferrer"&gt;https://github.com/Laravel-Lang/starter-kits/blob/main/source/react/main/react.json&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;…Yeah.&lt;/p&gt;

&lt;p&gt;So let’s look at how the Livewire Starter Kit is actually translated by examining the login screen.&lt;/p&gt;

&lt;h2&gt;
  
  
  Translating the Livewire Starter Kit Login Screen
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/laravel/livewire-starter-kit/blob/main/resources/views/pages/auth/login.blade.php" rel="noopener noreferrer"&gt;https://github.com/laravel/livewire-starter-kit/blob/main/resources/views/pages/auth/login.blade.php&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In this case, translation hooks are already embedded throughout the UI from the beginning. For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="c"&gt;&amp;lt;!-- Remember Me --&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;flux:checkbox&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;"remember"&lt;/span&gt; &lt;span class="na"&gt;:label=&lt;/span&gt;&lt;span class="s"&gt;"__('Remember me')"&lt;/span&gt; &lt;span class="na"&gt;:checked=&lt;/span&gt;&lt;span class="s"&gt;"old('remember')"&lt;/span&gt; &lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"flex items-center justify-end"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;flux:button&lt;/span&gt; &lt;span class="na"&gt;variant=&lt;/span&gt;&lt;span class="s"&gt;"primary"&lt;/span&gt; &lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"submit"&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"w-full"&lt;/span&gt; &lt;span class="na"&gt;data-test=&lt;/span&gt;&lt;span class="s"&gt;"login-button"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    {{ __('Log in') }}
  &lt;span class="nt"&gt;&amp;lt;/flux:button&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;As shown, it passes things through PHP’s translation system using &lt;code&gt;__()&lt;/code&gt;. Since Livewire is tightly integrated with the backend (essentially operating in a pure Blade-like manner), this approach is possible.&lt;/p&gt;

&lt;h3&gt;
  
  
  The Quality of Livewire’s Japanese Resources
&lt;/h3&gt;

&lt;p&gt;So does installing the language pack solve everything? Unfortunately, no. At present, the &lt;strong&gt;translation quality is extremely poor&lt;/strong&gt;, or rather, most of it is untranslated.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/Laravel-Lang/starter-kits/blob/main/locales/ja/json.json" rel="noopener noreferrer"&gt;https://github.com/Laravel-Lang/starter-kits/blob/main/locales/ja/json.json&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Since translation files are generated based on this, there’s honestly no way around fixing it. I’ve been sending PRs and discussing things, so maybe it’ll improve somewhat, but who knows...&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/Laravel-Lang/starter-kits/pull/1902" rel="noopener noreferrer"&gt;https://github.com/Laravel-Lang/starter-kits/pull/1902&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;a href="https://livewire-starter-kit-ja.catatsumuri.org/login" rel="noopener noreferrer"&gt;https://livewire-starter-kit-ja.catatsumuri.org/login&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can view the current proposal using &lt;code&gt;test@example.com&lt;/code&gt; / &lt;code&gt;password&lt;/code&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  As for Inertia.js UIs Like React
&lt;/h3&gt;

&lt;p&gt;Let’s look at the login screen again. Since we compared the &lt;code&gt;Remember me&lt;/code&gt; section earlier, here’s just the corresponding part.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/laravel/react-starter-kit/blob/main/resources/js/pages/auth/login.tsx#L76-L94" rel="noopener noreferrer"&gt;https://github.com/laravel/react-starter-kit/blob/main/resources/js/pages/auth/login.tsx#L76-L94&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The strings are written directly into the source code, meaning that whether it’s Japanese or any other language, &lt;strong&gt;nothing gets translated as-is&lt;/strong&gt; (naturally).&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;That is the current state of localization (i18n) in Laravel Starter Kits. Outside of Livewire, things are honestly pretty rough. For English-speaking users, this tends not to become a major issue, but outside that environment... the problems become extremely apparent. I suspect everyone is just aggressively rewriting UIs using AI or similar tools, but I really wish things were handled a little better. For now, I’ve at least tried contributing Japanese resources through PRs, but in the end, what’s actually going to happen here?&lt;/p&gt;

</description>
      <category>laravel</category>
      <category>inertiajs</category>
      <category>php</category>
    </item>
  </channel>
</rss>
