Deployment OF Laravel application with NPM (Node Package Manager) to Hostinger

Introduction: Deployment of Laravel Application with NPM to Hostinger Using the Pre-Build Process and Vite

Deploying a Laravel application with modern front-end tooling like Vite involves combining server-side PHP logic with client-side assets managed through Node Package Manager (NPM). Vite, as a fast and efficient build tool, is ideal for managing and bundling your front-end assets, especially for Laravel applications.

In this guide, we will walk through the process of deploying a Laravel application to Hostinger using the pre-build process. This approach ensures that all static assets (JavaScript, CSS, images, etc.) are compiled locally, optimized for production, and ready for deployment to the server. Hostinger’s hosting platform provides an ideal environment for Laravel applications, supporting PHP, Node.js, and modern deployment workflows.

1. Prepare Your Laravel Application

Before deploying, ensure your application is production-ready:

1. Run composer install –optimize-autoloader –no-dev to install PHP dependencies without development dependencies.
2. Run npm install and npm run prod to compile front-end assets.
3. Set up the .env file with production configurations, especially database and app settings.

2. Upload Laravel Files to Hostinger

Option 1: Using File Manager

1. Compress your Laravel project into a .zip file.PHP dependencies without development dependencies.
2. Log in to your Hostinger control panel.
3. Go to File Manager and upload the .zip file.
4. Extract the contents to the public_html folder (or a subfolder for a subdomain).

Option 2: Using FTP

1. Use an FTP client (e.g., FileZilla) and connect to your Hostinger account.
2. Upload your Laravel files to the public_html directory.

3. Set Up the Public Directory

Hostinger serves files from the public_html directory, so you need to map Laravel’s public directory to it.

Option 1: Move the Contents

1. Copy all the contents of the public directory in Laravel to public_html.
2. Update index.php in public_html:

require __DIR__.'/../vendor/autoload.php';
$app = require_once __DIR__.'/../bootstrap/app.php';

Option 2: Use a Subfolder

1. Keep the Laravel structure intact.
2. In your Hostinger panel, set the document root of your domain or subdomain to the Laravel public directory.

4. Set File Permissions

Ensure the storage and bootstrap/cache directories are writable:

chmod -R 775 storage bootstrap/cache

5. Configure Environment

Edit your .env file:

1. Update the database credentials (DB_DATABASE, DB_USERNAME, DB_PASSWORD) to match the Hostinger database.
2. Set APP_ENV=production and APP_DEBUG=false.

6. Set Up the Database

1. Create a new database in the Hostinger control panel under Databases.
2. Import your Laravel database backup using phpMyAdmin or the Hostinger database import tool.
3. Import your Laravel database backup using phpMyAdmin or the Hostinger database import tool.

php artisan migrate

7. Install Node.js Dependencies

Hostinger doesn’t support running Node.js commands like npm directly on shared hosting. Instead:

1. Run npm install and npm run prod locally.
2. Upload the compiled public/css and public/js directories to the server.

8. Set Up .htaccess

Add or update the .htaccess file in public_html to handle routing:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteRule ^(.*)$ public/$1 [L]
</IfModule>

9. Final Checks

1. Test the application in your browser.
2. Verify the front-end assets and routes are working correctly.
3. Check for any errors in the storage/logs directory.

10. Optional: Use SSL

Enable SSL for your site in the Hostinger control panel under SSL and ensure APP_URL in .env starts with https://.

Application shows http://[::1]:4000/ in production

Quick Checklist:

• Set APP_ENV=production in .env.
• Configure vite.config.js with build.outDir set to public/build.
• Use the @vite Blade directive in templates.
• Run npm run build to generate production assets.
• Clear Laravel cache with php artisan config:cache.
• Verify asset URLs in the browser’s Developer Tools.

When your Laravel + Node.js application shows http://[::1]:4000/ in production, it indicates that the application is misconfigured and is trying to reference the development server instead of using properly built production assets. Here’s a step-by-step guide to fix this issue:

1. Verify Vite Configuration

In your Laravel project, ensure your Vite configuration (vite.config.js or vite.config.ts) is correctly set for production:

Proper Vite Configuration for Laravel

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'], // Adjust as per your setup
            refresh: true, // Enables live reload in development
        }),
    ],
    server: {
        host: '0.0.0.0', // Bind to all IPs for development
        port: 4000, // Development server port
    },
    build: {
        outDir: 'public/build', // Production assets go here
    },
});

Key Points:

1. The build.outDir specifies where production assets are output. For Laravel, it should be in public/build.
2. The server.port is only used during development, so it won’t affect production if everything is configured correctly.

2. Build for Production

Run the production build command to generate optimized assets:

npm run build

3. Update Laravel Blade Files

Ensure your Laravel views reference the production assets instead of the development server. If you’re using Vite with Laravel, make sure you include assets properly:

Blade Syntax for Including Vite Assets, in your Blade views (e.g., resources/views/layouts/app.blade.php):

@vite(['resources/css/app.css', 'resources/js/app.js'])

1. Laravel will automatically load the correct assets based on the environment (APP_ENV=production for production).
2. If your environment is set to APP_ENV=local, Laravel will try to load from the development server (hence http://[::1]:4000).

4. Set Up the .env File

Ensure your .env file is correctly configured for production:

APP_ENV=production
APP_DEBUG=false
APP_URL=https://yourdomain.com

# Optional Vite-related variables
VITE_ASSET_URL=/build

5. Clear and Cache Laravel Configurations

After updating .env and Blade files, clear and cache the Laravel configurations:

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

6. Double-Check Deployment

• Ensure Static Files are Deployed: Verify that the public/build directory has been uploaded to your server if you’re using FTP or similar deployment methods.
• Use a Reverse Proxy: If your Node.js app handles certain routes (e.g., WebSocket), ensure your web server (e.g., Nginx or Apache) is correctly proxying those routes while serving Laravel for others.

7. Prevent Development Server URLs

If http://[::1]:4000 still appears, it means the application is falling back to the development server because:

• Vite’s Dev Server is Running: Ensure npm run dev is not running on your production server.
• Asset URLs are incorrect: Laravel tries to use the Vite development server if it thinks it’s in a development environment.

Force Laravel to Use Production Assets

In your vite.config.js, add the following:

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    server: {
        strictPort: true, // Avoid port fallbacks
    },
});

8. Debug Using Laravel Logs

If the problem persists, check Laravel logs to ensure there are no errors in the asset paths:

tail -f storage/logs/laravel.log

9. Remove Hardcoded http://[::1]:4000 URLs

If there are hardcoded references to http://[::1]:4000 in your app:

Search the codebase for this string and replace it with environment-driven URLs:

const BASE_URL = process.env.NODE_ENV === 'production'
    ? '/build'
    : 'http://localhost:4000';