Deploying a Laravel 10 application with Vite on a shared host can be challenging, but it is not impossible. In this article, we will go through the steps required to deploy a Laravel 10 application with Vite on a shared host. We will cover everything from configuring the server to deploying the application.

Prerequisites

Before we begin, make sure you have the following:

• A shared hosting account with cPanel access

• A domain name

• SSH access to the server

If you don't have SSH access, you will need to contact your hosting provider to enable it for you. SSH access is essential for running command-line tools like Composer and Node.js.

Step 1: Create a Laravel 10 Application

First, let's create a new Laravel 10 application. We can do this using the Composer command-line tool. Open up your terminal or command prompt and navigate to the directory where you want to create the application.

composer create-project laravel/laravel myapp "8.*"

This command will create a new Laravel 10 application in a directory called "myapp". We are using version 8.x because Laravel 10 is not yet released as of the time of writing.

Step 2: Install Vite

Next, we need to install Vite, a modern build tool for JavaScript applications. We will use Vite to compile our front-end assets and optimize them for production.

To install Vite, we need to have Node.js and npm installed on our system. If you don't have Node.js installed, download it from the official website.

Once you have Node.js installed, run the following command to install Vite:

npm install --save-dev vite

Step 3: Configure Vite

Now that we have Vite installed, we need to configure it to work with Laravel. First, we need to create a new configuration file called "vite.config.js" in the root directory of our Laravel application. In this file, we will define how Vite should compile our front-end assets.

module.exports = {
  build: {
    manifest: true,
    outDir: '../public',
    rollupOptions: {
      input: 'resources/js/app.js',
    },
  },
  server: {
    proxy: {
      '/': {
        target: 'http://myapp.test',
        changeOrigin: true,
      },
    },
  },
}

Let's go through each configuration option:

• build.manifest: This option generates a manifest file that maps the filenames of the compiled assets to their corresponding URLs. This is useful for cache-busting.

• build.outDir: This option specifies the output directory for the compiled assets. We are setting it to "../public" because we want to compile our assets outside of the "public" directory of our Laravel application.

• build.rollupOptions.input: This option specifies the entry point for our front-end assets. We are setting it to "resources/js/app.js", which is the default entry point for Laravel applications.

• server.proxy: This option sets up a proxy for our Laravel application. We are setting it to "myapp.test", which is the URL of our Laravel application in our local development environment. When we run Vite's development server, it will proxy requests to our Laravel application.

Step 4: Compile Assets with Vite

Now that we have Vite configured, we can compile our frontend assets using the following command:

npx vite build

This command will compile our assets and store them in the "../public" directory.

Step 5: Upload Files to the Server

Next, we need to upload the compiled assets and the rest of our Laravel application to the server. We can do this using an FTP client like FileZilla or by using CPanel's file manager. Make sure to upload all the files in the "myapp" directory to the root directory of your website.

Step 6: Configure the Server

Now that we have uploaded our files, we need to configure the server to serve our Laravel application. First, we need to create a new database and user for our application. We can do this using cPanel's MySQL Database Wizard.

Once we have created the database, we need to update the ".env" file in the root directory of our Laravel application with the database credentials. Open up the file and update the following lines:

DB_DATABASE=your_database_name
DB_USERNAME=your_database_username
DB_PASSWORD=your_database_password

Next, we need to create a new virtual host for our Laravel application. To do this, log in to cPanel and navigate to the "Domains" section. Click on "Addon Domains" and add a new domain. Make sure to set the document root to the public directory of your Laravel application.

Finally, we need to set the correct permissions for our storage and bootstrap/cache directories. We can do this using the following commands:

chmod -R 777 storage
chmod -R 777 bootstrap/cache

Step 7: Test the Application

Now that we have configured the server, we can test our Laravel application by visiting the domain name in a web browser. If everything is set up correctly, you should see the default Laravel welcome page.

To test Vite, open up the developer console in your web browser and check the network tab. You should see requests to the compiled assets with URLs that include a hash. This means that Vite is working correctly and the assets are being cached-busted.

Conclusion

Deploying a Laravel 10 application with Vite on a shared host can be a challenging task, but with the right tools and configuration, it is achievable. By following the steps outlined in this article, you should be able to deploy your application and start serving your users. Remember to always test your application thoroughly before releasing it to the public.