Deploy Laravel application using Vercel

Hello Artisans,

In this blog post, we will see how to deploy the laravel application on Vercel. It is a popular serverless platform.

Step 1: First, we create a new laravel application.

composer create-project laravel/laravel laravel-vercel-project

Step 2: Create api folder, within that folder create index.php file, and add the code below.

<?php  
require __DIR__ . "/../public/index.php";

It is an entry point that will forward the control to public/index.php file which normally gets called when we visit our laravel application.

Step 3: Create .vercelignore file and add the below line in it.

/vendor

Step 4: Now create vercel.json file and add the below code

{
    "version": 2,
    "framework": null,
    "functions": {
        "api/index.php": { "runtime": "vercel-php@0.6.0" }
    },
    "routes": [
        {
            "src": "/(.*)",
            "dest": "/api/index.php"
        }
    ],
    "env": {
        "APP_ENV": "production",
        "APP_DEBUG": "true",
        "APP_URL": "https://your.url.from.vercel.app",
        "APP_KEY": add API key here from your .env file",

        "APP_CONFIG_CACHE": "/tmp/config.php",
        "APP_EVENTS_CACHE": "/tmp/events.php",
        "APP_PACKAGES_CACHE": "/tmp/packages.php",
        "APP_ROUTES_CACHE": "/tmp/routes.php",
        "APP_SERVICES_CACHE": "/tmp/services.php",
        "VIEW_COMPILED_PATH": "/tmp",

        "CACHE_DRIVER": "array",
        "LOG_CHANNEL": "stderr",
        "SESSION_DRIVER": "cookie"
    }
}

• In the above code routes array will forward all incoming URIs to our newly set serverless function which we created in Step 2.

"routes": [{
    "src": "/(.*)",
    "dest": "/api/index.php"
}],

• env will be our Vercel's env file.

Step 4: The last step is to create dist folder in the project directory.

• Now save all the files and push your repository to GitHub. Now login to your Vercel application.
• On the right side click Add New then select Project option. After that import your laravel application from GitHub.

• Now we will configure our project by giving a name to the project.
• Then select the other option from Framework Preset.

• The next step is to add the required env.

If your deployment has failed go to the home page select the project then go to settings

• In the General section go to Node.js version section and select the node version as 18x, save the changes, and trigger to re-deploy the application.

• Tada!! Your application is live now.

Happy Reading
🦄 ❤️