I'm working on a node project on my vagrant laravel/homestead box.
Everything works fine, I can access the project when I go to the host define in my /etc/hosts :
192.168.10.10 project
But, I'm trying to build and watch my project with webpack, so I installed webpack-dev-server and I can run it :
http://localhost:8080/
webpack result is served from /
content is served from /home/vagrant/Workspace/Kanban
404s will fallback to /index.html
[...]
webpack: bundle is now VALID.
My problem is, when I try to access project:8080 with my browser, I get a loading error.
A netstat -an | grep 8080 in the vagrant shows me that the box is listening.
I tried to forward ports using homestead.yaml
ports:
- send: 8080
to: 8080
protocol: tcp
But with or without port forwarding, all I get is an error page.
What can I do to make my webpack watcher work ?
Okay, I finnaly found the answer.
The problem was about not ports but the dev-server. It is configured by default to work only on the localhost. The solution was to add a rule to the configuration :
devServer : {
[...]
, host : '0.0.0.0'
}
Setting the host to '0.0.0.0' allows the dev-server to be accessible from anywhere, therefore, to my "real" host.
I found the explanation on a GitHub issue. Too bad that the arguments list wasn't on the official documentation.
Related
I've had a docker-compose/nginx setup going for years & it's been beautiful—hot reload worked for React, Vue, Golang, Flask, Django, Php, etc & all the services could talk to each other, & I used it for projects at several companies ... but recently I decided to update to modern versions of the Alpine, Node, Python, etc Docker images. It's been a mostly smooth transition except for the node services, where I've hit a wall. Both vanilla CRA (create-react-app) and vanilla Vite React SWC installs come back with the same error, after I start the docker-compose/nginx network:
CRA:
WebSocket connection to 'wss://react-apps.raphe.localhost:3000/ws' failed:
Vite:
WebSocket connection to 'wss://vite-react-apps.raphe.localhost:8082/' failed:
w/CRA, the page loads, but there is no hot-reload. With Vite/SWC I get a blank white page. For reference, the url for one of the services (CRA) is: https://react-apps.raphe.localhost:8082/. If I start either service in dev mode without docker/nginx, they run fine w/hot-reload, e.g., these both work:
http://localhost:3000/
http://localhost:5173/
I found various solutions for solving those ^ issues on the web. One was to put WDS_SOCKET_PORT=0 in the .env or docker-compose environment. Another, with vite, was to mess around with the vite.config.js & I tried everything under the sun in that file. Another was to use WATCHPACK_POLLING=true with CRA and CHOKIDAR_USEPOLLING=true with vite. Nothing worked ...
...so, after a couple days of pain, I tried rolling all my code back a year, and got the same error! So I'm really dead in the water. I started to think it might have something to do with my Docker or Chrome versions, since those are the only pieces of the puzzle I haven't rolled back & were updated recently. Could that really be the issue?
Has anyone else dealt with this? It's crazy annoying. Here's an example of one of my development docker-compose services, for reference:
react-apps:
container_name: ${COMPOSE_PROJECT_NAME}-react-apps
restart: always
build:
context: ../rfe_react_apps/
dockerfile: Dockerfile.dev
command: yarn start
environment:
- REACT_APP_SENTRY=${SENTRY}
- REACT_APP_ENV=development
- BROWSER=none
expose:
- 3000
volumes:
- ../rfe_react_apps/:/app/
... & the relevant bit in the nginx config:
server {
listen 443 ssl http2;
listen [::]:443 ssl http2;
include /etc/nginx/conf.d/certs.txt;
ssl_protocols TLSv1.3;
ssl_ciphers HIGH:!aNULL:!MD5;
server_name react-apps.*;
location / {
proxy_pass http://react-apps:3000;
}
}
... & the full vite Chrome console error, in case there's a clue there (I don't totally understand what it's trying to tell me):
GET https://vite-react-apps.raphe.localhost:8082/src/main.jsx 500
client.ts:78 WebSocket connection to 'wss://vite-react-apps.raphe.localhost:8082/' failed:
setupWebSocket # client.ts:78
(anonymous) # client.ts:68
client.ts:78 WebSocket connection to 'wss://localhost:5173/' failed:
setupWebSocket # client.ts:78
fallback # client.ts:43
(anonymous) # client.ts:99
client.ts:48 [vite] failed to connect to websocket.
your current setup:
(browser) vite-react-apps.raphe.localhost:8082/ <--[HTTP]--> localhost:5173/ (server)
(browser) vite-react-apps.raphe.localhost:8082/ <--[WebSocket (failing)]--> localhost:5173/ (server)
Check out your Vite / network configuration and https://vitejs.dev/config/server-options.html#server-hmr .
At this point I've given up, & I rely on this stack for income. I will be so happy if anyone can unstick me here!
I banged my way to a solution (no errors now, hot-reload works), although I don't love it. Here's what I had to change to get the CRA service going: added these vars to the CRA service's environment in my docker-compose file:
- WDS_SOCKET_HOST=localhost
- WDS_SOCKET_PORT=3000
... and swapped out the expose section for this:
ports:
- 3000:3000
That has the unintended side-effect of making the service available at http://localhost:3000, which is fine (since this is just a development environment), but messy. For vite, SWC was erroring out, something about missing bindings, so I switched to vanilla vite/React and finally got lucky with this combination: the docker-compose service:
vite-react-apps:
container_name: ${COMPOSE_PROJECT_NAME}-vite-react-apps
restart: always
build:
context: ../rfe_vite_react_apps/
dockerfile: Dockerfile.dev
command: yarn dev --port 5173 --host
ports:
- 5173:5173
volumes:
- ../rfe_vite_react_apps/:/app/
Again, annoyingly, this means the service is also available at http://localhost:5173/. So the important bits there ^ are the --port 5173 (for some reason, it says 5173 is already in use otherwise, even when it isn't), and, again, swapping out the expose section for ports. I also had to add this to my vite.config.js:
server: {
hmr: {
port: 5173,
host: "localhost",
protocol: "ws",
},
},
Again, don't love this! ... but it's only for my development docker-compose file. Everything works fine in production, I can use expose instead of ports, etc. Not sure why I have to do this stuff now, it worked so beautifully before. If anyone knows of a cleaner solution, or can explain why things changed, I'd love to know.
I have installed webpack-dev-server on a Digital Ocean droplet. On starting the service, it says,
http://localhost:8080/
webpack result is served from /
content is served from
But when I access the IP address of the droplet with port 8080 in the browser, it shows connection refused error.
On running a node server, I am able to access it through the IP address
You cannot access a server local from outside the droplet if it is running at port 8080. If you want to get it public, try to run the server at port 80, that is the default public port.
You can configure apache or other HTTP server if you want more features or configs.
As #netoguimaraes suggested, I could not get it running through port 8080. I restarted the webpack-dev-server using port 80 and it worked.
webpack-dev-server --hot --inline --host 0.0.0.0 --port 80
On running ngrok and going to the suggested url, i get
GET /favicon.icon 404 error in ngrok.
In which folder does ngrok search for the favicon.ico file ?
How do i fix this ?
Very new to ngrok. Do help me out
Thanks in advance
I ran into a similar problem with URIs from ngrok being served as 404s.
I have a local Apache, PHP and MySQL stack setup on macOS using *.dev domains.
So in my case, I needed to set the host-header option in ngrok to match the hostname of the virtual host Apache was configured for.
Here's the relevant part of my Apache virtual host configuration:
<VirtualHost *:80>
ServerName example.dev
ServerAlias www.example.dev
...
UseCanonicalName Off
</VirtualHost>
The necessary ngrok arguments to tunnel requests to my private development domain were:
$ ngrok http example.dev:80 -host-header=example.dev
What ngrok do is,make tunnels to localhost.That allows you tunnel requests from Internet to your local machine.
You can see following details after running : ngrok http 8888
Tunnel Status
online
Version 2.0.19/2.0.19
Web Interface http://127.0.0.1:4040
Forwarding http://299954c1.ngrok.io -> localhost:8888
Now all the data intended for 'http://299954c1.ngrok.io' url which is publically accessible will come to your local machine at port 8888
You need to have some server running on your local machine at port 8888 which can serve 'favicon.icon' static file
If you are able to get icon by hitting : localhost:8888/favicon.icon in your browser, You will surely get it from http://299954c1.ngrok.io/favicon.icon
When reading the articles it all seems easy, but I am unable to get this to work. I run apache 2.4.7
Several virtual hosts are running just fine. I need one virtual host to run at port 8080 only. So I added Listen 8080 to ports.conf
In the virtualhost conf file:
VirtualHost *:8080>
After a restart I am not getting the virtual host. I do see the default server page and I also notice that the Listen 8080 line is working.
What am I forgetting?
I've trouble in connecting to a wss secured socket server via google appengine frontend with managed VM support.
buy default google exposes only port 8080 in docker image google/nodejs-runtime, Even if expose port 8443 in Dockerfile like below i can connect only to http://localhost:8080 not https://localhost:8443
FROM google/nodejs
WORKDIR /app
ADD package.json /app/
RUN npm install
ADD . /app
EXPOSE 8443
CMD []
ENTRYPOINT ["/nodejs/bin/npm", "start"]
Still i can see port 8080 include in the container
"/nodejs/bin/npm start 8443/tcp, 0.0.0.0:8080->8080/tcp
If i log in to my managed vm instance and run the container image with
docker run -d -p 8443:8443 nodejs.default.wss-check:latest
and try
$curl https://localhost:8443
I get curl: (60) SSL certificate problem: unable to get local issuer certificate, It looks like its connecting but i've to use realdomain name
I've created a issue in github aswell https://github.com/GoogleCloudPlatform/appengine-nodejs-quickstart/issues/13, but not that helpful.
Same set up works like a charm in normal compute instance. but it doesn't auto scale.
Any help on this issue will be appreciated.
The reason you can't curl to https on localhost (curl: (60) SSL certificate problem: unable to get local issuer certificate) is because "localhost" is unknown to any CA. You need to run curl -k https://localhost:8443 to get it to ignore the lack of a certificate for localhost.
Looks like currently Google Managed VM supports Websocket connection only on JAVA
Even if you try websocket connection on with nodejs on GMV it defaults to polling transport. if you wanna see this in live you can use set socket transports, deploy to live and look in to console- network and see which transport its using!
socket.set('transports', [
'websocket'
, 'flashsocket'
, 'htmlfile'
, 'xhr-polling'
, 'jsonp-polling'
]);
We have to wait untill google implements websocket support in Managed VM. If anyone get this working on GMV, Please comment here :)