Masri

Recent Notes

Prepare your Laravel-Vue app for production

9 min read

Okay, here’s a step-by-step guide to prepare and deploy your Laravel/Vue application to Hostinger. This guide assumes you’re using Laravel with Inertia.js and Vite (common with Vue 3 setups).

Phase 1: Preparing Your Laravel/Vue App for Production

These steps are generally done on your local development machine before uploading.

1. Laravel Backend Preparation

1.1. Update Dependencies:

Ensure your composer.json and package.json have the latest stable versions of your dependencies.

Bash

composer update
npm update # or yarn upgrade

1.2. Environment Configuration (.env):

Your production .env file will be different from your local one. Do NOT upload your local .env file directly. Create a .env.production or similar to keep track of production settings, but you will set these variables directly on Hostinger.

Key variables to set for production:

Ini, TOML

APP_NAME="Your App Name"
APP_ENV=production
APP_KEY= # Will be generated on the server or copied from local if fresh install
APP_DEBUG=false
APP_URL=https://yourdomain.com # Replace with your actual domain

LOG_CHANNEL=stack
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=error

DB_CONNECTION=mysql
DB_HOST= # Provided by Hostinger
DB_PORT=3306 # Usually 3306, confirm with Hostinger
DB_DATABASE= # Your database name on Hostinger
DB_USERNAME= # Your database username on Hostinger
DB_PASSWORD= # Your database password on Hostinger

# Ensure your session, cache, and queue drivers are suitable for production
SESSION_DRIVER=database # or redis, memcached
CACHE_DRIVER=database # or redis, memcached
QUEUE_CONNECTION=database # or redis, beanstalkd, SQS

# For email
MAIL_MAILER=smtp
MAIL_HOST= # e.g., smtp.hostinger.com or your email provider
MAIL_PORT= # e.g., 587 or 465
MAIL_USERNAME= # Your email username
MAIL_PASSWORD= # Your email password
MAIL_ENCRYPTION=tls # or ssl
MAIL_FROM_ADDRESS="noreply@yourdomain.com"
MAIL_FROM_NAME="${APP_NAME}"

# If using Vite
VITE_APP_ENV=production

1.3. Clear Local Configurations and Caches:

This ensures you’re not packaging any local-specific cached files.

Bash

php artisan config:clear
php artisan route:clear
php artisan view:clear
php artisan event:clear
php artisan optimize:clear # Clears all compiled files

1.4. Optimize for Production (Optional locally, but good practice):

These commands will be run on the server, but you can test them locally.

Bash

composer install --optimize-autoloader --no-dev
php artisan config:cache
php artisan route:cache
php artisan view:cache
php artisan event:cache # If you use event discovery

Note: After running config:cache, .env changes won’t take effect until you run php artisan config:clear and php artisan config:cache again.

2. Vue.js (with Vite/Inertia) Frontend Build

2.1. Build Your Frontend Assets:

This command compiles your Vue components, CSS (Tailwind), and other assets into optimized static files, typically in the public/build directory.

Bash

npm run build # or yarn build

This process uses Vite to bundle your assets and generate a manifest.json file, which Laravel uses to serve the correct, versioned assets.

2.2. Verify Build Output:

Check your public/build directory. You should see hashed CSS and JS files.

3. Preparing Your Code for Upload

3.1. .gitignore:

Ensure your .gitignore file correctly excludes files and folders that shouldn’t be in version control or on the server, such as:

/node_modules
/public/hot
/public/storage
/storage/*.key
/vendor
.env
.env.backup
*.env
.phpunit.result.cache
Homestead.json
Homestead.yaml
npm-debug.log
yarn-error.log

The vendor directory is usually installed on the server via composer install. However, some shared hosting plans might require you to upload it if you don’t have SSH access or composer available. Clarify this with Hostinger support or documentation. For this guide, we’ll assume you can run composer on Hostinger.

3.2. Commit Your Changes:

If you’re using Git (highly recommended):

Bash

git add .
git commit -m "Prepare for production deployment"
git push # To your remote repository (e.g., GitHub, GitLab)

Phase 2: Deploying to Hostinger

These steps are done within your Hostinger hPanel or via SSH.

4. Hostinger Account Setup

4.1. Choose a Suitable Hosting Plan:

Ensure your Hostinger plan supports PHP (latest stable version recommended for Laravel), MySQL (or PostgreSQL), and ideally SSH access for easier command-line operations. Shared hosting, VPS, or Cloud hosting plans can work.

4.2. Access hPanel:

Log in to your Hostinger account and navigate to your hPanel.

4.3. Domain Setup:

Ensure your domain is correctly pointing to your Hostinger account.

5. Database Setup on Hostinger

5.1. Create a MySQL Database:

  • In hPanel, find “Databases” → “MySQL Databases”.
  • Create a new database. Note down the database name, username, and password. Hostinger often prefixes these with your account username (e.g., u123456789_dbname).
  • The database host is usually localhost but confirm this in your Hostinger database section.

6. Uploading Your Application Files

You have a few options:

If your Hostinger plan includes SSH access and Git:

  • Access your server via SSH: Find SSH access details in hPanel.

  • Clone your repository:

    Bash

    cd public_html # Or your desired hosting directory
git clone your_repository_url . # The dot clones into the current directory

  • If public_html is not empty, you might want to clone into a new directory, configure it, and then point your domain to the public folder of your Laravel app within that new directory. Or, clear public_html before cloning if it’s a fresh setup.

6.2. Option B: Using Hostinger’s File Manager

  • In hPanel, go to “Files” → “File Manager”.
  • Create a ZIP archive of your project excluding node_modules and .env. If SSH is not available, you might need to include the vendor folder (after running composer install --optimize-autoloader --no-dev locally).
  • Upload the ZIP file to your desired directory (e.g., directly into public_html or a subdirectory).
  • Extract the ZIP file using the File Manager.

6.3. Option C: Using FTP/SFTP

  • Use an FTP client like FileZilla or Cyberduck.
  • Connect to your Hostinger server using FTP/SFTP credentials (found in hPanel).
  • Upload your project files (again, excluding node_modules, .env. Consider including vendor if no SSH).

7. Server-Side Configuration

These steps are ideally done via SSH. If you don’t have SSH, some might be possible via hPanel’s “Cron Jobs” (for running commands) or “PHP Configuration”, but it’s much more limited.

7.1. Install Composer Dependencies:

If you didn’t upload the vendor folder:

Bash

# Navigate to your project root
cd /path/to/your/laravel-app

# Install composer if not available globally, or use Hostinger's provided PHP CLI
# Hostinger might have composer pre-installed or provide a specific command.
# Check their documentation.
# Example:
# php /path/to/composer.phar install --optimize-autoloader --no-dev
composer install --optimize-autoloader --no-dev

7.2. Set Up the .env File:

  • Copy your .env.example to .env:

    Bash

    cp .env.example .env

  • Edit the .env file with your production database credentials (from step 5.1), app URL, mail settings, and other necessary production configurations. You can use a terminal text editor like nano or vim, or edit it via Hostinger’s File Manager.

    Bash

    nano .env

  • Generate Application Key:

    Bash

    php artisan key:generate

7.3. Set Document Root:

Your web server (Apache or LiteSpeed on Hostinger) needs to point to your Laravel app’s /public directory.

  • In hPanel, go to “Domains” → [Your Domain] → “Advanced” (or similar wording like “Website Configuration”, “Document Root”).
  • Change the document root from public_html (or yourdomain.com/public_html) to public_html/public (or yourdomain.com/public_html/your-app-folder/public if you installed it in a subfolder).
  • Hostinger’s default structure might be /home/uXXXXXX/domains/yourdomain.com/public_html. So, if your Laravel app is directly in public_html, the public path will be public_html/public.

7.4. Set File Permissions:

Ensure the storage and bootstrap/cache directories are writable by the web server.

Bash

chmod -R 775 storage bootstrap/cache
# You might also need to set ownership if running commands as a different user
# than the web server, though often not an issue on shared hosting.
# chown -R www-data:www-data storage bootstrap/cache (example, user/group may vary)

Hostinger’s File Manager usually has options to set permissions too.

7.5. Run Migrations and Seeders (if applicable):

Bash

php artisan migrate --force # The --force flag is required in production
# php artisan db:seed --class=ProductionSeeder --force # If you have specific production seeders

7.6. Optimize Laravel for Production:

Bash

php artisan config:cache
php artisan route:cache
php artisan view:cache
php artisan event:cache # If using event discovery

If you built your frontend assets locally and uploaded them (step 2.1), they are already in public/build. Laravel with Vite will automatically use them if APP_ENV is production and APP_DEBUG is false.

If you use the public disk for storing user-uploaded files or other assets:

Bash

php artisan storage:link

This creates a symbolic link from public/storage to storage/app/public. Some shared hosting environments have issues with symlinks. If it fails: * Hostinger might have a tool for this. * You might need to manually copy files or adjust your file upload/retrieval logic. * A common workaround is to create a route that serves files from the storage/app/public directory.

8. Cron Jobs (Scheduled Tasks)

If your application uses Laravel’s scheduler:

  • In hPanel, find “Cron Jobs”.

  • Set up a cron job to run the Laravel scheduler every minute:

    * * * * * cd /path/to/your-laravel-app && php artisan schedule:run >> /dev/null 2>&1

    Replace /path/to/your-laravel-app with the actual path to your project root on Hostinger. You can find this path using pwd in SSH or often in the File Manager.

9. Final Checks and Testing

9.1. Test Your Application:

  • Open your domain in a web browser.
  • Thoroughly test all functionalities: user registration, login, core features, forms, etc.
  • Check browser developer console for any errors (JavaScript, CSS, 404s).
  • Check Laravel logs (storage/logs/laravel.log) for any server-side errors. You can view this via SSH or the File Manager.

9.2. HTTPS/SSL:

Hostinger usually provides free SSL certificates (Let’s Encrypt). Ensure it’s active for your domain. Force HTTPS by either:

  • Hostinger hPanel settings: Look for an “SSL” or “Force HTTPS” option.
  • .htaccess (if using Apache/LiteSpeed): Add rules to your .htaccess file in the public directory (Laravel’s default .htaccess often handles this, but double-check).
  • Laravel Middleware: Create a middleware to redirect all HTTP requests to HTTPS.

9.3. PHP Version:

Ensure Hostinger is using a compatible PHP version for your Laravel application. You can usually change this in hPanel under “PHP Configuration” or “PHP Version Manager”. Select the version your app requires (e.g., PHP 8.1, 8.2).

Troubleshooting & Tips:

  • Check Hostinger Documentation: Hostinger has specific guides and a knowledge base. Search for “Laravel deployment on Hostinger” there.

  • Hostinger Support: If you encounter specific issues related to their platform, their support can be helpful.

  • Clear Caches: If you make changes (e.g., to .env or code) and don’t see them reflected, remember to clear/rebuild Laravel’s caches:

    Bash

    php artisan optimize:clear
php artisan config:cache
php artisan route:cache
php artisan view:cache

  • Error Reporting: Temporarily set APP_DEBUG=true in your .env on the server to see detailed error messages if you’re troubleshooting. Remember to set it back to false once resolved.

  • Consider a VPS: If you find shared hosting limitations (SSH access, composer, symlinks, performance) too restrictive, a Hostinger VPS plan will give you more control.

This comprehensive guide should help you get your Laravel/Vue app up and running on Hostinger! Good luck! 🚀

───✱*.｡:｡✱*.:｡✧*.｡✰*.:｡✧*.｡:｡*.｡✱ ───

Graph View

Backlinks