Header

Deploying a Laravel + React Application to FortRabbit Using DeployHQ

Devops & Infrastructure, Frontend, PHP, and Tutorials

Post Image

In today's web development landscape, managing deployments for modern applications can be challenging, especially when dealing with a full-stack application that combines Laravel and React. This guide will walk you through setting up a robust deployment pipeline using DeployHQ to deploy your Laravel and React application to FortRabbit hosting.

Prerequisites

Before we begin, make sure you have:

  • A Laravel application with React frontend ready for deployment
  • A Git repository (GitHub, GitLab, or Bitbucket)
  • A FortRabbit account
  • A DeployHQ account

1. Preparing Your Laravel + React Application

First, ensure your Laravel and React application is properly structured and ready for production deployment. Your project structure should look something like this:

your-project/
├── app/
├── resources/
│   ├── js/
│   │   ├── components/
│   │   └── app.js
├── public/
├── package.json
├── composer.json
└── .env

Make sure your package.json includes the necessary scripts for building your React application:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "watch": "vite build --watch"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.0.0",
    "laravel-vite-plugin": "^0.7.8",
    "vite": "^4.3.9"
  }
}

2. Setting Up FortRabbit

Creating Your App

  1. Log in to your FortRabbit account
  2. Click "Create new App"
  3. Choose PHP 8.1 or higher
  4. Select your preferred region
  5. Choose the scaling plan that fits your needs

Configure Your App

After creating your app, you'll need to set up the necessary configurations:

  1. Navigate to your app's settings
  2. Set up your MySQL database
  3. Configure your domain settings
  4. Enable SSL if needed

Make note of your deployment credentials, as you'll need them for DeployHQ:

git remote add fortrabbit YOUR_APP_NAME@deploy.REGION.frbit.com:YOUR_APP_NAME.git

3. Configuring DeployHQ

Creating a New Project

  1. Log in to DeployHQ
  2. Click "New Project"
  3. Connect your Git repository
  4. Choose "Laravel" as your project name, for example

Setting Up Your Server

  1. Go to "Servers" in your project
  2. Click "New Server"
  3. Select "SFTP/SSH" as your server type
  4. Enter your FortRabbit SFTP host or IP and credentials, as explained here.
  5. Configure your deployment path:
/srv/app/htdocs

4. Deployment Configuration

In the SSH Commands, we are going to configure:

  1. Before Commands:
php artisan config:cache
php artisan route:cache
php artisan view:cache
  1. After Commands
php artisan migrate --force

Config Files

In DeployHQ, set up a config file called .env with the following values:

APP_ENV=production
APP_KEY=your-app-key
DB_CONNECTION=mysql
DB_HOST=your-fortrabbit-mysql-host
DB_DATABASE=your-database
DB_USERNAME=your-username
DB_PASSWORD=your-password

5. Automated Build Process

Create a build pipeline in DeployHQ by navigating to Project Settings > Build Pipeline:

  1. Add a New Command, for example called Build Frontend Assets, in which we are going to use node LTS (22.12):
npm ci
npm run build
  1. Another one called Optimize Laravel, with the following commands, using PHP 8.3:
composer install --no-dev --optimize-autoloader

6. Continuous Integration Setup

Automatic Deployments

  1. Go to Project Settings > Automatic Deployments
  2. Enable automatic deployments for your main branch
  3. Configure deployment triggers:
branches:
  main:
    - server: Production
      path: /srv/app/htdocs
  staging:
    - server: Staging
      path: /srv/app/htdocs

Deployment Notifications

Set up Slack or email notifications:

  1. Go to Project Settings > Notifications
  2. Add your preferred notification method
  3. Configure notification events:
    • Deployment started
    • Deployment successful
    • Deployment failed

7. First Deployment

To initiate your first deployment:

  1. Commit and push your changes to your repository
  2. In DeployHQ, click "Deploy Now"
  3. Monitor the deployment process
  4. Check the deployment logs for any issues

Verification Steps

After deployment, verify:

  1. Application loads correctly
  2. Frontend assets are properly built
  3. Database migrations completed successfully
  4. Cache configuration is working
  5. API endpoints are responding

8. Maintenance and Best Practices

Zero-Downtime Deployments

To minimise downtime during deployments, add these commands to your deployment script:

php artisan down --render="maintenance"
# Your deployment commands here
php artisan up

Cache Management

Implement proper cache clearing:

// config/deploy.php
return [
    'steps' => [
        'down' => [
            'artisan:down',
        ],
        'deploy' => [
            'optimize:clear',
            'config:cache',
            'route:cache',
            'view:cache',
            'event:cache',
        ],
        'up' => [
            'artisan:up',
        ],
    ],
];

Backup Strategy

Set up automatic backups in FortRabbit:

  1. Configure database backups
  2. Set up file backups
  3. Test restore procedures

Troubleshooting Common Issues

Build Failures

If your build fails, check:

  1. Node.js and PHP versions match your local environment
  2. All dependencies are properly listed in package.json and composer.json
  3. Build scripts are correctly configured
  4. Environment variables are properly set

Deployment Failures

Common deployment issues and solutions:

  1. Permission errors:
chmod -R 775 storage bootstrap/cache
  1. Composer memory limits:
COMPOSER_MEMORY_LIMIT=-1 composer install
  1. Node.js memory issues:
NODE_OPTIONS=--max_old_space_size=4096 npm run build

Conclusion

You now have a fully automated deployment pipeline for your Laravel and React application using DeployHQ and FortRabbit. This setup provides:

  • Automated builds and deployments
  • Zero-downtime deployments
  • Proper cache management
  • Database migration handling
  • Frontend asset optimization

Remember to:

  • Regularly update your dependencies
  • Monitor your deployment logs
  • Keep your environment variables secure
  • Maintain proper backup procedures

Additional Resources


Ready to streamline your deployment process? Sign up for DeployHQ and start automating your deployments today!

A little bit about the author

Facundo is the CTO at DeployHQ. He oversees our software engineering team by day and, in his free time, enjoys hobbies such as cycling, spending time in nature, and the company of Bono 🐶

Tree

Proudly powered by Katapult. Running on 100% renewable energy.