ngrok 404 error accessing Laravel//Vue site

I have a large Laravel/Vue app running on Valet with webpack, and I am attempting to get ngrok running using a custom domain. However, whenever I try, I get a 404 error (although I have run it on this site in the past).

The Vue front end is run on port 8080, and we access it at http://web.test:8080. When I run the ngrok command

ngrok http: web.test:8080 --domain=sedwardsgt.ngrok.app

it shows that it is running with this line

Forwarding                    https://sedwardsgt.ngrok.app -> http://web.test:8080

In my .env file, I have these settings

APP_URL=https://sedwardsgt.ngrok.app
SESSION_DOMAIN=.sedwardsgt.ngrok.app
ASSET_URL=https://sedwardsgt.ngrok.app

Now if I attempt to access the site without webpack being started I get

ERR_NGROK_8012
Traffic was successfully tunneled to the ngrok agent, but the agent failed to establish a connection to the upstream web service at `http://web.test:8080`. The error encountered was:

dial tcp 127.0.0.1:8080: connect: connection refused

But when I start webpack and attempt to access the site, I get 404 - Not Found (with the <head> value in the error page being Valet - Not Found).

I have tried to just use valet share. but even when I specify web.test:8080, it only redirects to port 80-, not port 8080.

In both my local ngrok Inspect dashboard (at http://127.0.0.1:4040/inspect/http), and in my nrok account on the Traffic Inspector in my account at ngrok.com, I can see the requests coming through.

Do I need to add another config step somewhere?

LaryAI

1 year ago

Best Answer

Level 58

It looks like you're encountering a couple of issues with your ngrok setup for your Laravel/Vue application. Let's break down the problem and provide a solution.

Problem Breakdown

ngrok 404 Error: This typically means that ngrok is successfully forwarding the request, but the local server is not handling it correctly.
ERR_NGROK_8012: This error indicates that ngrok cannot connect to the local server on the specified port (8080).

Solution Steps

Ensure Webpack is Running: Make sure your Webpack development server is running on port 8080. You can start it with:
```
npm run dev
```
or
```
npm run watch
```
Check Local Access: Verify that you can access your Vue application locally via http://web.test:8080. If this doesn't work, the issue is with your local setup, not ngrok.
Update ngrok Command: Use the correct ngrok command to forward traffic to your local server. The command should be:
```
ngrok http 8080 --host-header=web.test
```
This command tells ngrok to forward traffic to port 8080 and use web.test as the host header.
Update .env File: Ensure your .env file has the correct settings. It looks like you have this part correct, but double-check:
```
APP_URL=https://sedwardsgt.ngrok.app
SESSION_DOMAIN=.sedwardsgt.ngrok.app
ASSET_URL=https://sedwardsgt.ngrok.app
```
Valet Configuration: If you're using Laravel Valet, make sure that Valet is properly configured to serve your site on web.test. You can link your project directory with:
```
valet link web
```
Check Firewall/Proxy Settings: Ensure that no firewall or proxy settings are blocking the connection to port 8080.

Example Workflow

Start your Webpack development server:
```
npm run dev
```
Verify local access: Open your browser and go to http://web.test:8080. Ensure that your Vue application is accessible.
Start ngrok with the correct command:
```
ngrok http 8080 --host-header=web.test
```
Access your application via the ngrok URL: Open your browser and go to https://sedwardsgt.ngrok.app.

By following these steps, you should be able to resolve the 404 error and successfully access your Laravel/Vue application through ngrok. If you still encounter issues, double-check each step to ensure everything is configured correctly.

1 like

tykus

1 year ago

Level 104

Is Valet actually serving on port 8080?

wonder95

1 year ago

Level 5

Thanks Larry!! You're the best!!

The issue was the --host-header=web.test param. Once I added that, I was able to access the site.

(and yes, I do know that LarryAI is a bot).

Please or to participate in this conversation.