Deploying a Laravel 10.7 and Vue 3 project from GitHub to Hostinger

Shared hosting is kind of overlooked these days in favor of platforms like Vercel and Netlify that do a courtesy of building and instant deployment of your project. Just push the ok button and watch your website being published online.

I decided to check how fast is a Git deployment with Hostinger and was astonished with the speed and convenience of deployment of my freshly started Laravel 10.7 / Vue 3 blog project.

Upon purchase of https://oleg-blog.tech domain name for a ridiculous price of 1.41 EUR, installing SSL certificate, establishing an e-mail account [e-mail] and MySQL database (all complimentary with my Premium Hosting plan), I have started bash terminal on my Linux Ubuntu 22.04 machine to initiate a new Laravel project:

composer create-project laravel/laravel larablog

I will not go through the whole procedure here since it’s not a Laravel tutorial. However, I would like to point out that the documentation at https://bootcamp.laravel.com/inertia/installation is profound and so easy to read that it doesn’t take more than 20 minutes before you insert php artisan serve in your terminal and see the starter page looking at you from localhost:8000.

Since we are using Vue 3 in this project there is still a few moments I would like to drive your attention to. First, you will need to install Laravel Breeze to use the framework. There is also a Breeze installation for React available from the same source. You can enter into your terminal the following:

composer require laravel/breeze --dev

php artisan breeze:install vue

Next, you need to start your local development environment for the node files:

npm run dev

Last, you will need to create a MySQL database in your local environment and enter all the details for the database, the e-mail SMTP server and other information you might need into .env file. After that you can run the following command from your bash terminal:

php artisan migrate

Once you have made sure that your project is now working in the local environment and you can register in your database and log in, it’s time to create a private repository on GitHub and commit your code into it. Please note, that it is crucial for your code to work later on Hostinger platform to remove all the .env, /public/*, /storage/*, vendor files from .gitignore before you make a commit.

Also, since your Laravel project will serve all the files from /public folder per se, you will need to create an additional .htaccess file in the root folder with the following code inside:

RewriteEngine On
RewriteBase /

# Serve files from the root directory
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ public/$1 [L]

After making a Git commit and performing file synchronization it was time to get back to the Hostinger account, find Git from the Advanced menu and follow the instruction steps from the provided tutorial https://support.hostinger.com/en/articles/1583302-how-to-deploy-a-git-repository to deploy the repo from under the intended domain.

Before the actual deployment you will need to copy the RSA key and paste it in your GitHub settings in order for the hosting provider to be able to access private repository on GitHub. I also chose to add a webhook directly to my project so that I don’t need to manually update Hostinger every time I add new features to my project. Now, with the webhook added and the project being successfully published, there is still one last step to be taken.

Database migration, that I already initially did in my project locally before committing it to GitHub will not work on a database on Hostinger. I needed to use SSH to go on the Hostinger server and run php artisan migrate command from the terminal there. In order to access the server, you need to copy the code from the menu on the dashboard under Advanced → SSH Access and post it into your terminal. Voi la now I am free to develop my blog with instant deployment using a shared hosting service with a convenience of edge computing.

In conclusion, with a few extra minutes invested in setting up the project, it is possible to have a domain, hosting, database and an e-mail service ready almost at the speed that cloud computing services offer. For a startup, a blogger or a small company this might be an ideal solution to bring out their ideas, products and services directly to their customer and save some money on the way.