Problem when deploying the laravel application with vite/tailwind on digital ocean.

Problem when deploying the laravel application with vite/tailwind on digital ocean.

To deploy a Laravel application with Vite and Tailwind CSS on DigitalOcean, you'll need to follow several steps to ensure that all the dependencies are installed and configured correctly. Here's a comprehensive guide to help you through the process:

1. Prerequisites:

   • Make sure you have a DigitalOcean account and a Droplet (Virtual Private Server) running Ubuntu 20.04 or later.
   • Install SSH client software on your local machine to connect to your Droplet.
   • Install Git and Composer on your local machine if you haven't already.

2. Clone your Laravel project:

   • SSH into your Droplet using your terminal or command prompt.
   • Navigate to the directory where you want to store your Laravel project.
   • Clone your Laravel project from your Git repository using the following command: git clone <your-repository-url>

3. Install Laravel:

   • Navigate to your Laravel project directory: cd <your-project-name>
   • Install Laravel using Composer: composer install
   • Create a .env file by copying the .env.example file: cp .env.example .env
   • Set up your database credentials in the .env file.
   • Run the Laravel installation script: php artisan install

4. Install Vite and Tailwind CSS:

   • Install Vite globally using npm: npm install -g create-vite
   • Create a new Vite project in your Laravel project directory: create-vite
   • Navigate to the new Vite project directory: cd vite
   • Install Tailwind CSS: npm install tailwindcss@latest postcss@latest autoprefixer@latest
   • Configure Tailwind CSS by creating a postcss.config.js file: touch postcss.config.js
   • Add the following code to the postcss.config.js file:

module.exports = {
  plugins: [require('tailwindcss'), require('autoprefixer')],
};

5. Configure Laravel to use Vite:
   • Update the webpack.mix.js file to use Vite instead of Laravel's default webpack configuration:

const { createVuePlugin } = require('vite');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
  plugins: [
    createVuePlugin(),
    new VueLoaderPlugin(),
  ],
};

• Update the webpack.config.js file to use Laravel's mix configuration and Vite's development server:

const mix = require('laravel-mix');
const { createVuePlugin } = require('vite');
const { VueLoaderPlugin } = require('vue-loader');

require('dotenv').config();

mix.webpackConfig({
  plugins: [
    createVuePlugin(),
    new VueLoaderPlugin(),
  ],
});

mix.browserSync({
  watch: ['resources/js/**/*.{js,vue}', 'resources/scss/**/*.{scss,css}'],
  proxy: 'laravel.test',
});

• Update the package.json file to include a new script for starting the development server:

"scripts": {
  "development": "npm run development && npm run hot",
  "development:hot": "mix --hot",
  "production": "npm run production && php artisan serve"
},

6. Start the development server:

   • Run the following command to start the development server: npm run development
   • Open your web browser and navigate to http://laravel.test to view your Laravel application with Vite and Tailwind CSS.

7. Configure your DigitalOcean Droplet to use the production environment:

   • Update your .env file with your production database credentials.
   • Run the following command to build your Laravel application for production: php artisan build
   • Update your DigitalOcean Droplet's nginx.conf file to serve your Laravel application:

server {
  listen 80;
  server_name laravel.test;

  root /var/www/html/<your-project-name>/public;

  index index.php index.html;

  location / {
    try_files $uri $uri/ /index.php$is_args$args;
  }

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

• Restart your Nginx server: sudo systemctl restart nginx
• Run your Laravel application in production mode: php artisan serve --production
• Open your web browser and navigate to http://laravel.test to view your Laravel application in production.

That's it! You've successfully deployed a Laravel application with Vite and Tailwind CSS on DigitalOcean. If you encounter any issues, feel free to leave a comment below and I'll do my best to help you out.