Self Guide for Deploying Laravel and React Applications on a VPS

Emmanuel (Emmo00) - Feb 26 - - Dev Community

This is a documentation of the steps I took in deploying my Laravel and React application to a VPS.

If you're reading along, I'm sure it'd be useful irrespective of the application stack.

1. Initial VPS Setup

Before deploying your applications, you need to prepare your server environment.

Update Your System 

sudo apt update && sudo apt upgrade -y
Enter fullscreen mode Exit fullscreen mode

Install Essential Dependencies 

sudo apt install apache2 unzip curl git -y
Enter fullscreen mode Exit fullscreen mode

2. Laravel Backend Deployment

Add ondrej/php PPA as a software repository. 

sudo add-apt-repository ppa:ondrej/php # Press enter when prompted.
sudo apt update
Enter fullscreen mode Exit fullscreen mode

Install PHP and Required Extensions 

sudo apt install php php-cli php-mbstring php-xml php-bcmath php-tokenizer php-curl php-zip php-mysql -y
Enter fullscreen mode Exit fullscreen mode

Install Composer 

curl -sS https://getcomposer.org/installer | php
sudo mv composer.phar /usr/local/bin/composer
Enter fullscreen mode Exit fullscreen mode

Set Up MySQL Database 

sudo apt install mysql-server -y
sudo mysql_secure_installation
Enter fullscreen mode Exit fullscreen mode

Create a database and user for your Laravel application:

sudo mysql -u root -p
Enter fullscreen mode Exit fullscreen mode

Within the MySQL prompt:

CREATE DATABASE laravel_db;
CREATE USER 'laravel_user'@'localhost' IDENTIFIED BY 'your_strong_password';
GRANT ALL PRIVILEGES ON laravel_db.* TO 'laravel_user'@'localhost';
FLUSH PRIVILEGES;
EXIT;
Enter fullscreen mode Exit fullscreen mode

Deploy Your Laravel Application 

cd /var/www
git clone https://github.com/your-username/your-laravel-project.git laravel
cd laravel
composer install
cp .env.example .env
Enter fullscreen mode Exit fullscreen mode

Edit the .env file with your database credentials:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_db
DB_USERNAME=laravel_user
DB_PASSWORD=your_strong_password
Enter fullscreen mode Exit fullscreen mode

Generate the application key and run migrations:

php artisan key:generate
php artisan migrate --seed
php artisan config:cache
Enter fullscreen mode Exit fullscreen mode

Configure Apache for Laravel

Create a new Apache configuration file:

sudo nano /etc/apache2/sites-available/laravel.conf
Enter fullscreen mode Exit fullscreen mode

Add the following configuration:

<VirtualHost *:80>
    ServerAdmin webmaster@yourdomain.com
    DocumentRoot /var/www/laravel/public
    ServerName api.yourdomain.com

    <Directory /var/www/laravel/public>
        AllowOverride All
        Require all granted
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/laravel_error.log
    CustomLog ${APACHE_LOG_DIR}/laravel_access.log combined
</VirtualHost>
Enter fullscreen mode Exit fullscreen mode

Enable the site and required modules:

sudo a2ensite laravel.conf
sudo a2enmod rewrite
sudo systemctl restart apache2
Enter fullscreen mode Exit fullscreen mode

Set Proper File Permissions 

sudo chown -R www-data:www-data /var/www/laravel
sudo chmod -R 775 /var/www/laravel/storage /var/www/laravel/bootstrap/cache
Enter fullscreen mode Exit fullscreen mode

3. React Frontend Deployment

Step 1: Build Your React Application

On your local development machine:

npm run build
Enter fullscreen mode Exit fullscreen mode

Step 2: Transfer the Build to Your VPS

Using SCP:

scp -r build/ username@your-vps-ip:/var/www/react
Enter fullscreen mode Exit fullscreen mode

Alternatively, you could clone your repository and build directly on the server (I'd recommend the former especially if deploying with a CICD pipeline):

cd /var/www
git clone https://github.com/your-username/your-react-project.git react
cd react
npm install
npm run build
Enter fullscreen mode Exit fullscreen mode

Step 3: Configure Apache for React

Create a new Apache configuration:

sudo nano /etc/apache2/sites-available/react.conf
Enter fullscreen mode Exit fullscreen mode

Add the following:

<VirtualHost *:80>
    ServerAdmin webmaster@yourdomain.com
    DocumentRoot /var/www/react/build
    ServerName yourdomain.com

    <Directory /var/www/react/build>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted

        # This configuration ensures that React Router works correctly
        RewriteEngine on
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule ^ index.html [L]
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/react_error.log
    CustomLog ${APACHE_LOG_DIR}/react_access.log combined
</VirtualHost>
Enter fullscreen mode Exit fullscreen mode

Enable the site:

sudo a2ensite react.conf
sudo systemctl restart apache2
Enter fullscreen mode Exit fullscreen mode

4. Secure Your Applications with SSL

For production applications, SSL is essential. Let's Encrypt provides free SSL certificates:

sudo apt install certbot python3-certbot-apache -y
sudo certbot --apache -d yourdomain.com -d api.yourdomain.com
Enter fullscreen mode Exit fullscreen mode

Follow the prompts to complete the SSL setup.

5. Set Up Process Management for Laravel

Configure Supervisor for Queue Workers 

sudo apt install supervisor -y
sudo nano /etc/supervisor/conf.d/laravel-worker.conf
Enter fullscreen mode Exit fullscreen mode

Add the following configuration:

[program:laravel-worker]
process_name=%(program_name)s_%(process_num)02d
command=php /var/www/laravel/artisan queue:work --tries=3 --sleep=3
autostart=true
autorestart=true
user=www-data
numprocs=2
redirect_stderr=true
stdout_logfile=/var/log/laravel-worker.log
Enter fullscreen mode Exit fullscreen mode

Activate the configuration:

sudo supervisorctl reread
sudo supervisorctl update
sudo supervisorctl start laravel-worker:*
Enter fullscreen mode Exit fullscreen mode

Set Up Laravel Scheduler 

crontab -e
Enter fullscreen mode Exit fullscreen mode

Add this line:

* * * * * cd /var/www/laravel && php artisan schedule:run >> /dev/null 2>&1
Enter fullscreen mode Exit fullscreen mode

6. Advanced Configuration

Set Up a Load Balancer (Optional)

For high-traffic applications, consider setting up Nginx as a load balancer in front of Apache:

sudo apt install nginx -y
Enter fullscreen mode Exit fullscreen mode

Create a configuration file:

sudo nano /etc/nginx/sites-available/loadbalancer
Enter fullscreen mode Exit fullscreen mode

Add:

upstream backend {
    server 127.0.0.1:8080;
    # Add more servers if you have multiple instances
}

server {
    listen 80;
    server_name yourdomain.com;

    location / {
        proxy_pass http://backend;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}
Enter fullscreen mode Exit fullscreen mode

Configure Redis for Caching (Optional) 

sudo apt install redis-server -y
Enter fullscreen mode Exit fullscreen mode

Update your Laravel .env file:

CACHE_DRIVER=redis
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379
Enter fullscreen mode Exit fullscreen mode

7. Maintenance and Updates

Automating Laravel Updates

Create a simple script:

sudo nano /usr/local/bin/update-laravel
Enter fullscreen mode Exit fullscreen mode

Add:

#!/bin/bash
cd /var/www/laravel
git pull
composer install --no-dev
php artisan migrate --force
php artisan config:cache
php artisan route:cache
php artisan view:cache
sudo chown -R www-data:www-data /var/www/laravel
Enter fullscreen mode Exit fullscreen mode

Make it executable:

sudo chmod +x /usr/local/bin/update-laravel
Enter fullscreen mode Exit fullscreen mode

Monitoring Your Application

Install monitoring tools:

sudo apt install htop net-tools -y
Enter fullscreen mode Exit fullscreen mode

8. Troubleshooting

Common Laravel Issues

  1. 500 Internal Server Error

    • Check Laravel logs: tail -f /var/www/laravel/storage/logs/laravel.log
    • Check Apache logs: tail -f /var/log/apache2/laravel_error.log

  2. Permission Issues

    • Run: sudo chown -R www-data:www-data /var/www/laravel

Common React Issues

  1. White Screen / Not Loading

    • Check browser console for errors
    • Verify .htaccess file in build directory

  2. API Connection Issues

    • Ensure your .env file in React has the correct API URL

Conclusion

You've now successfully deployed both your Laravel backend and React frontend on a single VPS.

Remember to regularly back up your database and application files, keep your server updated with security patches, and monitor your application's performance as your user base grows.

Up until now we have done the deployment manually, but you should definitely consider setting up a CICD pipeline for easy, automated deployment. GitHub Actions is a good recommendation.

Happy coding!👍🏻

Image
Isoleren
Image
The Importance of Concierge Security in High-End Properties

security, webdev
Image
10 Tools and Resources to Master CORS

webdev, programming, javascript, cors
Image
Python Fundamentals – Data Types, Control Flow, and Loops

python, programming, beginners, learning
Image
Best Amzon Review - Page 200 of 618 - The Most Honest Amazon Reviews
Image
The 4 Basic Parts of Essay Writing Every Student Should Know

essaywriting, academicsuccess, studytips, writingskills
Image
An Overview to Selecting the Right GMP Certified Weight-loss Products
Image
Home Schilder Utrecht
Image
ColorJitter in PyTorch (2)

python, pytorch, colorjitter, v2
Image
How to Create a Sample Resume and Deploy it on GitHub Pages

github, git, githunt, tutorial
Image
Cash App Limits: How Much Can You Withdraw, Send and Receive Daily?

webdev, javascript, ai, python
Image
Debunking Top 5 Myths about Hiring Financial Advisors

kolkatafinancialexperts, financialserviceskolkata, financialgrowth
Image
The Essential 10-Step Employee Onboarding Process with ServiceNow HRSD

servicenow, hrsd, productivity
Image
Optimizing Industrial Steam Systems with Efficient Traps and Valves

manufacturing, steam, valves
Image
Top Trends Shaping E-Commerce Development in 2025

ecommerce, ecommercedevelopment, ecommdev
Image
How Ecommerce App Localization Helps in Business Growth

app, applocalization, translation, translationcompany
Image
Day 2: Breaking Down Django Apps & Project Structure

django, webdev, programming, beginners
Image
Best TV Spy Shows- Top 10 Must-Watch Series for Espionage Fans - Best Amzon Review
Image
The Hilarious Journey of IP Address Allocation: From IANA to Your ISP
. . . . . .