[6.x] Add SQLite production support

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - Added `CraftCms\Yii2Adapter\Database\DeprecatedTable`.
 - Added `CraftCms\Cms\Translation\Formatter::asRelativeTime()`. ([#19146](https://github.com/craftcms/cms/pull/19146))
+- Added SQLite database support. ([#19149](https://github.com/craftcms/cms/pull/19149))
 - `craft\elements\Category::find()` now returns a `CraftCms\Yii2Adapter\Element\Queries\CategoryQuery` object. ([#19120](https://github.com/craftcms/cms/pull/19120))
 - `craft\elements\GlobalSet::find()` now returns a `CraftCms\Yii2Adapter\Element\Queries\GlobalSetQuery` object. ([#19120](https://github.com/craftcms/cms/pull/19120))
 - `craft\elements\Tag::find()` now returns a `CraftCms\Yii2Adapter\Element\Queries\TagQuery` object. ([#19120](https://github.com/craftcms/cms/pull/19120))

resources/js/modules/install/components/DbFields.vue

@@ -7,15 +7,34 @@
   import CraftInputPassword from '@craftcms/cp/vue/CraftInputPassword.vue';
   import Select from '@/common/form/Select.vue';
 
+  type DbDriver = 'mysql' | 'mariadb' | 'pgsql' | 'sqlite';
+  type DbFormData = {
+    driver: DbDriver;
+    host?: string;
+    port?: number;
+    database?: string;
+    username?: string;
+    password?: string;
+    prefix?: string;
+  };
+  type DbDefaults = {
+    host?: string;
+    port?: string;
+    database: string;
+    username?: string;
+    prefix?: string;
+  };
+
   const emit = defineEmits<{
-    (e: 'update:modelValue', value: any): void;
+    (e: 'update:modelValue', value: DbFormData): void;
   }>();
   const props = withDefaults(
     defineProps<{
-      modelValue?: any;
+      modelValue: DbFormData;
+      defaults: Record<DbDriver, DbDefaults>;
       errors?: Record<string, string>;
     }>(),
-    {modelValue: () => ({}), errors: () => ({})}
+    {errors: () => ({})}
   );
 
   const model = computed({
@@ -27,9 +46,15 @@
     },
   });
 
+  const selectedDriver = computed(() => model.value.driver);
+  const currentDefaults = computed(() => props.defaults[selectedDriver.value]);
+  const isSqlite = computed(() => selectedDriver.value === 'sqlite');
+
   const options = [
     {value: 'mysql', label: 'MySQL'},
+    {value: 'mariadb', label: 'MariaDB'},
     {value: 'pgsql', label: 'PostgreSQL'},
+    {value: 'sqlite', label: 'SQLite'},
   ];
 
   useFocusField('db-driver');
@@ -45,34 +70,37 @@
   </Callout>
 
   <div class="grid grid-cols-5 gap-2">
-    <div class="col-span-2">
+    <div :class="isSqlite ? 'col-span-3' : 'col-span-2'">
       <Select
         :label="t('Driver')"
         name="driver"
         id="db-driver"
         v-model="model.driver"
         ref="db-driver"
         :options="options"
-        :error="errors?.drive"
+        :error="errors?.driver"
       />
     </div>
-    <div class="col-span-2">
+
+    <div class="col-span-2" v-if="!isSqlite">
       <CraftInput
         :label="t('Host')"
         name="host"
         id="db-host"
         v-model="model.host"
-        placeholder="127.0.0.1"
+        :placeholder="currentDefaults.host ?? undefined"
         :error="errors?.host"
       />
     </div>
-    <div>
+
+    <div v-if="!isSqlite">
       <CraftInput
         :label="t('Port')"
         name="port"
         id="db-port"
         v-model="model.port"
         size="7"
+        :placeholder="currentDefaults.port ?? undefined"
         :error="errors?.port"
       />
     </div>
@@ -82,14 +110,14 @@
     </ul>
   </div>
 
-  <div class="grid grid-cols-2 gap-2">
+  <div class="grid grid-cols-2 gap-2" v-if="!isSqlite">
     <div>
       <CraftInput
         :label="t('Username')"
         name="username"
         id="db-username"
         v-model="model.username"
-        placeholder="root"
+        :placeholder="currentDefaults.username ?? undefined"
         :error="errors?.username"
       />
     </div>
@@ -110,12 +138,13 @@
   </div>
 
   <div class="grid grid-cols-4 gap-2">
-    <div class="col-span-2">
+    <div :class="isSqlite ? 'col-span-3' : 'col-span-2'">
       <CraftInput
-        :label="t('Database Name')"
+        :label="isSqlite ? t('Database File Path') : t('Database Name')"
         name="name"
         id="db-database"
         v-model="model.database"
+        :placeholder="currentDefaults.database"
         :errors="errors?.database"
       />
     </div>

resources/js/modules/install/components/InstallingScreen.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
   import {t} from '@craftcms/cp';
   import {onMounted} from 'vue';
-  import {useActionClient} from '@/common/composables/useFetch';
-  import {usePage} from '@inertiajs/vue3';
+  import {usePost} from '@/common/composables/useFetch';
+  import {install as installAction} from '@actions/InstallController';
   import Pane from '@/common/components/Pane.vue';
 
-  const {props: pageProps} = usePage();
+  type InstallResponse = {
+    redirect: string;
+  };
 
   const props = defineProps<{
     data: any;
@@ -17,10 +19,10 @@
     isSuccess,
     isLoading,
     isError,
-  } = useActionClient('install/install', {
-    onSuccess: () => {
+  } = usePost<InstallResponse>(installAction().url, {
+    onSuccess: ({redirect}) => {
       setTimeout(() => {
-        window.location.href = pageProps.postCpLoginRedirect as string;
+        window.location.href = redirect;
       }, 1000);
     },
   });

resources/js/pages/install/Install.vue

@@ -15,18 +15,21 @@
   import Modal from '@/common/components/Modal.vue';
   import StepScreen from '@/modules/install/components/StepScreen.vue';
 
+  type DbDriver = 'mysql' | 'mariadb' | 'pgsql' | 'sqlite';
+  type DbDefaults = {
+    host?: string;
+    port?: string;
+    database: string;
+    username?: string;
+    prefix?: string;
+  };
+
   const backgroundImageUrl = computed(() => `url(${backgroundUrl})`);
   const props = defineProps<{
     dbConfig: {
-      driver: 'mysql' | 'pgsql';
-      url: string | null;
-      host: string | null;
-      port: string | null;
-      database: string | null;
-      username: string | null;
-      password: string | null;
-      prefix: string | null;
+      driver: DbDriver;
     };
+    dbDefaults: Record<DbDriver, DbDefaults>;
     localeOptions?: Array<{id: string; name: string; selected: boolean}>;
     licenseHtml?: string;
     defaultSystemName: string;
@@ -68,12 +71,12 @@
     },
     db: {
       driver: props.dbConfig.driver,
-      host: props.dbConfig.host,
-      port: props.dbConfig.port,
-      database: props.dbConfig.database,
-      username: props.dbConfig.username,
-      password: props.dbConfig.password,
-      prefix: props.dbConfig.prefix,
+      host: undefined,
+      port: undefined,
+      database: undefined,
+      username: undefined,
+      password: undefined,
+      prefix: undefined,
     },
     site: {
       name: props.defaultSystemName,
@@ -181,7 +184,11 @@
               v-if="isCurrent('db')"
               class="screen"
             >
-              <DbFields v-model="formData.db" :errors="errors.db" />
+              <DbFields
+                v-model="formData.db"
+                :defaults="dbDefaults"
+                :errors="errors.db"
+              />
             </StepScreen>
 
             <StepScreen

src/Console/Commands/Install/InstallCommand.php

@@ -18,6 +18,7 @@
 use CraftCms\Cms\Validation\Rules\EnvValueRule;
 use Illuminate\Console\Command;
 use Illuminate\Console\ConfirmableTrait;
+use Illuminate\Database\Console\Migrations\MigrateCommand;
 use Illuminate\Support\Facades\DB;
 use Illuminate\Validation\Rule;
 use Illuminate\Validation\Rules\Password;
@@ -203,7 +204,7 @@ public function handle(
         info('Installing Craft CMS...');
 
         PromptTask::run('Running initial migrations', function (Logger $logger) {
-            $this->callSilent('migrate', [
+            $this->callSilent(MigrateCommand::class, [
                 '--force' => true,
             ]);
             $logger->success('Initial migrations completed.');