Laravel on Vercel

RESPONSE HEADERS

X-Powered-By: PHP/8.2.16
                

CLONE REPOSITORY

  1. git clone https://github.com/RevanSP/LARAVEL-VERCEL-EXAMPLE.git
  2. cd LARAVEL-VERCEL-EXAMPLE
  3. composer install
  4. cp .env.example .env
  5. mkdir dist

TESTING YOUR API

To test your newly created REST API, visit the /api/api/status route on Vercel.

Example URL: https://laravel-vercel-preview.vercel.app/api/api/status

Expected JSON response:

{
 "X-Powered-By": "'PHP/' . phpversion()",
  "database": {
    "status": "'Connected successfully!/Connected failed!'",
    "version": "'$conn->server_info'",
    "host": "'$host'",
    "database": "'$database'"
 }
}
                

Note: When running locally, use /api/status (without the extra /api prefix).

SETTING APP_KEY

You must add the APP_KEY from your .env file into the vercel.json configuration. To do this, follow these steps:

  1. Generate your APP_KEY using the command php artisan key:generate
  2. Copy the generated key into the vercel.json file
{
   //

    "env": {
        //

        // Add your APP_KEY here
        "APP_KEY": "",
        // Add your APP_KEY here

        //
    }

    //
}
                

CONNECT WITH MYSQL (FREE)

This free service allows you to connect to a remote MySQL database for testing purposes. Please note that this is not intended for production use, but it provides an easy way to experiment and test your database connections.

The free tier includes the following resources:

  • 1 MySQL Database
  • 25 MB Storage
  • Limited Queries
  • Email Support
  • Remote MySQL Access

To set it up, follow these steps:

  1. Register an account: Visit https://freedb.tech/register.html and register using your email, or create a dummy account through https://temporary-mail-generator.vercel.app.
  2. Verify your email: After registration, check your email to verify your account.
  3. Create a database and user: Go to your https://freedb.tech/dashboard to create a new database and user. Then, update .env file in your Laravel project and update .env in Vercel your Laravel project settings.
    DB_HOST=sql.freedb.tech
    DB_PORT=3306
    DB_DATABASE=                // Add your DATABASE NAME here
    DB_USERNAME=                // Add your DATABASE USER here
    DB_PASSWORD=                // Add your PASSWORD here
                            
  4. Access phpMyAdmin: Visit https://phpmyadmin.freedb.tech, and log in using the server, username, and password you just created in the https://freedb.tech/dashboard.
  5. Import your local database (optional): If you have an existing SQL database, you can export it from your local phpMyAdmin and import the .sql file into your remote database on phpMyAdmin at https://phpmyadmin.freedb.tech.

DATABASE STATUS

Connected successfully!

MySQL Version: 8.0.41-0ubuntu0.22.04.1

Host: sql.freedb.tech

Database Name: freedb_laravercel

The status above could be either "Connected successfully!" or "Connection failed!." As mentioned earlier, this is not suitable for production use, but it is perfect for testing or demo projects.

If you need storage, you can use the Cloudinary service for free, or simply convert each uploaded file into base64 (not recommended) in your CRUD Controller logic.

HOSTING ON VERCEL

  1. Create a repo on GitHub and push this code from your repository.
  2. Follow these steps before proceeding to Vercel:
    1. Open your terminal and navigate to your project folder.
    2. Initialize a new Git repository if you haven't already:
    3. git init
    4. Run the following command to add all your changes:
    5. git add .
    6. Commit your changes with a message describing the changes:
    7. git commit -m "Your commit message"
    8. Create or rename your branch to `main` (if it’s not already named `main`):
    9. git branch -M main
    10. If you haven't connected your local repository to GitHub, you can do so by running:
    11. git remote add origin https://github.com/your-username/your-repository.git
    12. Push your changes to GitHub:
    13. git push -u origin main
  3. In Vercel, click "Import Project" and connect your repository from GitHub.
  4. Click "Deploy" to start the process.

VERCEL BUILD SETTINGS

  • In Vercel, go to Settings > General, and under Build & Development Settings, set the Output Directory to public.
  • Set Node.js Version to 18.x or higher (but not the latest version) and then redeploy.