Using 'public' as Web Root with Vite and Craft CMS
When working with Vite and Craft CMS, it's a good practice to use a public/ directory as your web root. This approach keeps your project clean and secure by separating source code from publicly accessible files.
By default, Craft CMS uses the web/ folder as the public web root. If you prefer using public/ instead, you can simply rename the web/ folder to public/ and update your server configuration to reflect this change. Additionally, you’ll need to update Craft’s @webroot alias in config/general.php:
'aliases' => [ '@web' => getenv('PRIMARY_SITE_URL'), '@webroot' => dirname(__DIR__) . '/public', ],
In your Vite setup (vite.config.js), make sure the build output directory matches the new public path:
build: { outDir: '../public/dist', emptyOutDir: true, }
Using public/ as your web root ensures better organization, especially when deploying to production. It separates asset builds and keeps sensitive source files out of public reach while maintaining compatibility with both Craft and Vite.