How to use ngrok with Laravel Breeze (Inertia + Vue.js) when using two different ports?

How to use ngrok with Laravel Breeze (Inertia + Vue.js) when using two different ports?

To use ngrok with Laravel Breeze (Inertia + Vue.js) when using two different ports, follow these steps:

1. Install ngrok:

   • Download ngrok from https://ngrok.io/ and extract the zip file.
   • Add the ngrok executable to your system's PATH.

2. Start ngrok for your Laravel application:

   • Open a terminal or command prompt and navigate to your Laravel project directory.
   • Start the Laravel development server: php artisan serve --port=6000 (or any other port number you prefer).
   • Start ngrok with the following command: ngrok http 6000 (replace 6000 with the port number you used for Laravel).
   • Wait for ngrok to create a secure tunnel. Once it's done, you'll see two URLs: one for HTTP and another for HTTPS. Copy the HTTPS URL.

3. Start ngrok for your Vue.js application:

   • If you have your Vue.js application in a separate project, navigate to its directory and start the development server: npm run serve --port=3000 (or any other port number you prefer).
   • Start ngrok with the following command: ngrok http 3000 (replace 3000 with the port number you used for Vue.js).
   • Wait for ngrok to create a secure tunnel. Once it's done, you'll see two URLs: one for HTTP and another for HTTPS. Copy the HTTPS URL for the Vue.js application.

4. Configure Laravel Breeze:

   • Open your .env file in your Laravel project and set the following variables:

     VITE_BASE_URL=http://localhost:4141/api
     VITE_APP_API_URL=http://localhost:4141/api
     

     Replace 4141 with the number that appears at the end of the ngrok HTTPS URL for your Laravel application.

5. Configure Vue.js:

   • Open your vue.config.js file in your Vue.js project and set the following variables:

     devServer: {
       proxy: {
         '*': {
           target: 'http://localhost:4141',
           ws: true,
           changeOrigin: true,
         },
       },
     },
     

     Replace 4141 with the number that appears at the end of the ngrok HTTPS URL for your Laravel application.

6. Test the setup:

   • Start both servers: php artisan serve --port=6000 and npm run serve --port=3000.
   • Open your Laravel application in a web browser using the HTTPS URL generated by ngrok for your Laravel application.
   • Open your Vue.js application in a separate web browser tab using the HTTPS URL generated by ngrok for your Vue.js application.
   • Make sure both applications can communicate with each other through the Laravel API.

That's it! You have successfully set up ngrok with Laravel Breeze (Inertia + Vue.js) when using two different ports.