Deploying a Full-Stack Application with Laravel and Vue.js on Digital Ocean

In today’s fast-paced digital landscape, deploying a full-stack application efficiently can significantly enhance your development workflow. Laravel, a robust PHP framework, combined with Vue.js, a progressive JavaScript framework, provides an excellent solution for building modern web applications. In this article, we will walk you through the process of deploying a full-stack application using Laravel and Vue.js on Digital Ocean, ensuring you have all the tools and insights needed for a smooth deployment.

What is a Full-Stack Application?

A full-stack application refers to software that encompasses both the front-end (client-side) and back-end (server-side) development. This means it handles everything from database management and server configurations to user interface and experience.

Use Cases for Laravel and Vue.js

• Single Page Applications (SPAs): Vue.js is perfect for building SPAs with dynamic content.
• RESTful APIs: Laravel excels at creating APIs that can be consumed by front-end frameworks like Vue.js.
• Real-time Applications: With Laravel Echo and Vue.js, you can create applications that require real-time data updates, such as chat apps or live dashboards.

Prerequisites

Before we dive into the deployment process, ensure you have the following:

• A Digital Ocean account.
• Basic knowledge of PHP, Laravel, JavaScript, and Vue.js.
• A local development environment with Laravel and Vue.js set up.

Step-by-Step Deployment Guide

Step 1: Setting Up a Digital Ocean Droplet

1. Log in to Your Digital Ocean Account: Access your Digital Ocean control panel.
2. Create a Droplet:
3. Choose an image: Select Ubuntu 20.04.
4. Choose a plan: The basic plan (1GB RAM) is often sufficient for smaller applications.
5. Select a datacenter region close to your target audience.
6. Add your SSH keys for secure access.
7. Create the Droplet and take note of the IP address assigned to it.

Step 2: Installing Required Software

Connect to your Droplet via SSH:

ssh root@your_droplet_ip

Once connected, run the following commands to install Nginx, PHP, Composer, and MySQL:

# Update package index
apt update && apt upgrade -y

# Install Nginx
apt install nginx -y

# Install PHP and required extensions
apt install php php-fpm php-mysql php-xml php-mbstring php-curl php-zip -y

# Install Composer
curl -sS https://getcomposer.org/installer | php
mv composer.phar /usr/local/bin/composer

# Install MySQL
apt install mysql-server -y

Step 3: Setting Up MySQL Database

1. Secure MySQL Installation:

mysql_secure_installation

1. Create a Database for your Laravel application:

CREATE DATABASE your_database_name;
CREATE USER 'your_username'@'localhost' IDENTIFIED BY 'your_password';
GRANT ALL PRIVILEGES ON your_database_name.* TO 'your_username'@'localhost';
FLUSH PRIVILEGES;
EXIT;

Step 4: Deploying Laravel Application

1. Clone Your Laravel Application from your version control system:

cd /var/www
git clone https://github.com/your_username/your_laravel_app.git
cd your_laravel_app

1. Install Dependencies:

composer install

1. Environment Configuration:

Copy the example environment file and configure it:

cp .env.example .env
php artisan key:generate

Edit the .env file to set your database connection:

DB_DATABASE=your_database_name
DB_USERNAME=your_username
DB_PASSWORD=your_password

1. Run Migrations:

php artisan migrate

Step 5: Setting Up Vue.js

1. Install Node.js and npm:

curl -sL https://deb.nodesource.com/setup_14.x | bash -
apt install nodejs -y

1. Navigate to the Vue.js directory within your Laravel app and install dependencies:

cd /var/www/your_laravel_app
npm install

1. Build Your Vue.js Assets:

npm run production

Step 6: Configuring Nginx

1. Create a new Nginx server block:

nano /etc/nginx/sites-available/your_laravel_app

1. Add the following configuration:

server {
    listen 80;
    server_name your_droplet_ip;

    root /var/www/your_laravel_app/public;

    index index.php index.html index.htm;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ /\.ht {
        deny all;
    }
}

1. Enable the configuration and restart Nginx:

ln -s /etc/nginx/sites-available/your_laravel_app /etc/nginx/sites-enabled/
nginx -t
systemctl restart nginx

Step 7: Accessing Your Application

Open your browser and navigate to http://your_droplet_ip. You should see your Laravel application running with Vue.js integrated.

Troubleshooting Tips

• Common Issues:
• 404 Errors: Check your Nginx configuration and ensure the document root is set correctly.
• Database Connection Errors: Verify database credentials in the .env file.
• Permissions Issues: Ensure the storage and bootstrap/cache directories are writable.

Conclusion

Deploying a full-stack application with Laravel and Vue.js on Digital Ocean is a straightforward process that enables developers to leverage the best of both worlds. By following these steps, you can have your application up and running in no time. With the power of Laravel's back-end capabilities and Vue.js's dynamic front-end features, you're well on your way to delivering outstanding web applications that meet modern user expectations. Happy coding!