Deploy Laravel on Vercel with database, image storage, and email for free.

This is how I deploy and test my app in the production environment. I learn that vercel can host the Laravel app and auto-deploy if a git is connected.

I found this article which is my base you can also read the article to set up the laravel app.

Easy, Free, Serverless Laravel With Vercel

Here I will share -
1. How to add PostgreSQL to your app.
2. How to send emails from your app using Sendinblue.
3. How to store Image and edit on the fly using Cloudinary.
4. How to add a custom domain.

Vercel’s limitation:
Vercel provides very generous plans for hobby or free user, which I will use in this tutorial. Keep in mind vercel can execute 10sec serverless functions. Has 1024MB of max Ram. The /tmp folder has 512MB of storage. There is no bandwidth or any other limit for your app.

1. Adding PostgreSQL.

Let’s start with how to add PostgreSQL to your laravel app. Vercel does not provide a database hosting service. So I chose elephantsql.com’s “TINY TURTLE” database with a 20MB limit. 20MB for a normal CRUD function is enough for me.

You can create your new instance from elephantsql dashboard.

Fill the form and select the region and that’s it your database is ready to use. You can find all database related info on the database details page.

Now goto https://vercel.com/<user>/<project>/settings/environment-variables
or
User > Project > Settings > environment-variables
and add new plain text with “DATABASE_URL”, ”DB_HOST”, ”DB_PORT”, ”DB_DATABASE”, ”DB_USERNAME”, “DB_PASSWORD”.

Now you are all set. Just redeploy your app from the deployment menu and all the database settings will be available to your app. You can also hard code your database information to the config/database.php file.

That's it. Your app is now connected with a database, hosted on vercel.

NOTE: I add all variable to my local environment and migrate from my dev setup. Vercel does not give any cli to work with. You can also add a route for migration call, but I prefer SQL import or migrate from a local dev environment.

2. Adding Email Support using Sendinblue.

Vercel does not provide a default email gateway, So I am using Sendinblue for my app. Please create an account and send an email to their support asking for activating transactional email. Add all the settings to your vercel settings and you are done. Try sending password reset mail to test it’s working or not.

3. Add Images using Cloudinary.

Cloudinary provides a free image hosting service and you can manipulate images on the fly without any other extensions. Cloudinary has a laravel package which can be found here.

Installation

Like any other packages, I use composer to install.

composer require cloudinary-labs/cloudinary-laravel

Then add the following lines to config/app.php providers and aliases.

'providers' => [
    ...
    CloudinaryLabs\CloudinaryLaravel\CloudinaryServiceProvider::class,
    ...
]

Add config/app.php aliases part.

'aliases' => [
    ...
    'Cloudinary' => CloudinaryLabs\CloudinaryLaravel\Facades\Cloudinary::class,
    ...
]

Goto your Cloudinary dashboard and copy these settings and add them to variable config files.

CLOUDINARY_URL=xxxxxxxxxxxxx
CLOUDINARY_UPLOAD_PRESET=xxxxxxxxxxxxx
CLOUDINARY_NOTIFICATION_URL=

You can make use of Cloudinary like any other storage driver.

You can upload image inline like
$result = $request->file('file')->storeOnCloudinary();

Using Cloudinary is simple and give you generous usage limits.

4. Add a Custom Domain

I pinged using cmd and get the IP for my app, then I added an “A” DNS record with IP and that's it. Vercel also created a letsencrypt licence for it.

That’s it. Your website is now fully functional and completely free with some limitation. For most use cases, the free alternative is enough.

I have used 3rd party free software to get all the functions of a website. Next, I will try to add Redis into my app.