Laravel how to deploy in vercel

Question

I'm trying to deploy Laravel 8 project in Vercel, however, I am constantly facing this error:

Error: No Output Directory named "dist" found after the Build completed. You can configure the Output Directory in your Project Settings.

I have followed the steps mentioned here, but unfortunately it showing the same error. Has anyone experienced such problem before?

Braise

Answer 1

The easiest way to do this is change vercel-php version in vercel.json file. Like this -

"api/index.php": { "runtime": "[email protected]" }

Also change the output directory to "api". This is my way which fixed this problem. Hope this helpful to you.

Thyroiditis

Answer 2

Simply create the "dist" directory/folder in your project root directory.

Disabled

where exactly I should create this folder? and should it be empty folder? – Braise

Answer 3

• In your Vercel project settings, go to the "Build & Development Settings" section.
• Under the "Build Command" field, enter the command to build your Laravel project. This command is typically composer install followed by npm install and npm run prod if you are using Laravel Mix. If you are not using Laravel Mix, replace the last command with your own build command.
• Under the "Output Directory" field, enter the path to the directory where your Laravel project is built. This is typically public for Laravel projects. Save your build settings.

Louettalough

Answer 4

To fix this issue you have to set the output directory to "api".

Stonedead

Answer 5

Follow these steps

1. create a folder called api
2. Inside the folder, create a file called index.php
3. In the index.php file write the following.

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

4. In the root directory, create a file called .vercelignore.

5. In the file created, write the following:

   /vendor

6. Create an empty folder named dist

7. Create a file called vercel.json

8. In the file created write the following

{

{"version": 2,
"framework": "null",

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

"env": {
    "APP_ENV": "production",
    "APP_DEBUG": "true",
    "APP_URL": "https://akos-portfolio.vercel.app",

    "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"
}}

}

You can now upload your file to vercel.

watch https://www.youtube.com/watch?v=dERa0R2zLqc&t=103s . to understand how it can be done

Swamp

Answer 6

You would create a new directory dist on the root project as below:

# create the directroy 
mkdir dist

# create a .gitkeep file inside the dist folder
touch dist/.gitkeep

# commit your changes
git add . && git commit -m "dist folder added"

# deploy your app
vercel

The purpose of the .gitkeep file is to be able to push an empty directory with your git changes, dist folder in your case. More of that explained in this blog post. Thus you won't need to specify api folder as an output directory in Vercel.

Vespine