I'm new to nuxt and having trouble getting HMR websocket connection configured on a nuxt project and running in Gitpod. The project uses nuxt 3 + vite.
After running yarn dev the dev server is running on port 3000 and the frontend tries to connect via websocket to the vite dev server running on port 24678.
Unfortunately the servers are exposed on Gitpod environments via a reverse proxy and on https endpoints. So the internal servers are running on the defined ports and are publicly exposed on different SSL endpoints like https://3000-CONTAINER_ID.gitpod.io/ and https://24678-CONTAINER_ID.gitpod.io/. But the HMR tries to connect by default to ws://3000-CONTAINER_ID.gitpod.io:24678/_nuxt/.
I tried to adjust the vite HMR config on nuxt, but I'm out of luck. The closest I came to what I wanted to achieve was this config:
export default defineNuxtConfig({
...
server: {
hmr: {
protocol: 'wss',
clientPort: 443,
},
proxy: {
'/_nuxt': 'http://localhost:24678/_nuxt',
}
},
...
});
With this the websocket URL in the frontend looks right, being: wss://3000-CONTAINER_ID.gitpod.io/_nuxt/, but I get an WebSocket connection to ... failed. with an [vite] server connection lost. polling for restart... resulting in a page reload endless loop.
I prepared a git repo that could be directly started in Gitpod.
Any help to create the right setup to automate my dev environment with Gitpod would be awesome.
Related
I am trying to run a Node application in a Docker container. The installation instructions specified that after adding host: '0.0.0.0' to config/local.js and running docker-compose up the app should be accessible at localhost:3000, but I get an error message in the browser saying "The connection was reset - The connection to the server was reset while the page was loading."
I have tried to add the host: '0.0.0.0' in different places, or remove it entirely, access https://localhost:3000 as opposed to at http, connecting to localhost:3000/webpack-dev-server/index.html, etc.
What could be going wrong?
I am setting up a reactjs application on port 3000 as well as a nodejs API server on port 3500 on the same box on the internet. Assume the box has a domain name example.com, and I am using nginx in reverse proxy to receive the end users over https, and internally direct it to the port 3000 of the reactjs server.
On the react code, while calling axios API for a get command, which of the following should I be using:
localhost:3500
http://localhost:3500
https://localhost:3500
example.com:3500
http://example.com:3500
https://example.com:3500
Few tests I did:
Access from my browser the reactjs application successfully as example.com (nginx does the mapping to port 3000)
Using https://reqbin.com/ I was able to access the nodejs server API and get the correct result using: http://example.com:3500/users
Using https instead of http causes an error: SSL connection error Error code: 10035
If end user is supposed to connect over https to the react server, then the react server as well as the nodejs server should be running in https mode, or the browser will block the request and it will never reach the server.
Here is how to:
Run the react server in https mode:
Change nginx reverse proxy configuration to be:
proxy_pass https://localhost:3000;
Changed the URL for the nodejs server that axios is calling from http://localhost:3500 to https://example.com:3500
After npm run build, and upload the build directory to the server, run the following commands:
su
serve -s build --listen 3000 --ssl-cert "/etc/letsencrypt/live/example.com/fullchain.pem" --ssl-key "/etc/letsencrypt/live/example.com/privkey.pem"
Run the nodejs server in https mode:
Change the code of server.js with the following:
const https = require('https');
const fs = require('fs');
const options = {
key: fs.readFileSync('/etc/letsencrypt/live/example.com/privkey.pem'),
cert: fs.readFileSync('/etc/letsencrypt/live/example.com/fullchain.pem')
};
https.createServer(options, app).listen(PORT, ()=>{
console.log(`Server running https on port ${PORT}`)
});
Run the following commands:
su
node server
Trying to setup a staging environment on Amazon LINUX EC2 instance and migrate from Heroku.
My repository has two folders:
Web
API
Our frontend and backend are running on the same port in deployment
In dev, these are run on separate ports and all requests from WEB and proxied to API
(for ex. WEB runs on PORT 3000 and API runs on PORT 3001. Have a proxy set up in the package.json file in WEB/)
Currently the application deployment works like this:
Build Web/ for distribution
Copy build/ to API folder
Deploy to Heroku with web npm start
In prod, we only deploy API folder with the WEB build/
Current nginx.conf looks like this
Commented out all other attempts
Also using PM2 to run the thread like so
$ sudo pm2 bin/www
Current thread running like so:
pm2 log
This is running on PORT 3000 on the EC2 instance
Going to the public IPv4 DNS for instance brings me to the login, which it's getting from the /build folder but none of the login methods (or any API calls) are working.
502 response example
I have tried a lot of different configurations. Set up the proxy_pass to port 3000 since thats where the Node process is running.
The only response codes I get are 405 Not Allowed and 502 Bad Gateway
Please let me know if there is any other information I can provide to find the solution.
It looks like you don't have an upstream block in your configuration. Looks like you're trying to use proxy-pass to send to a named server and port instead of a defined upstream. There's is an example on this page that shows how you define the upstream and then send traffic to it. https://nginx.org/en/docs/http/ngx_http_upstream_module.html
server backend1.example.com weight=5;
server backend2.example.com:8080;
server unix:/tmp/backend3;
server backup1.example.com:8080 backup;
server backup2.example.com:8080 backup;
}
server {
location / {
proxy_pass http://backend;
}
}````
Turns out there was an issue with express-sessions being stored in Postgres.
This led me to retest the connection strings and I found out that I kept receiving the following error:
connect ECONNREFUSED 127.0.0.1:5432
I did have a .env file holding the env variables and they were not being read by pm2.
So I added this line to app.js:
const path = require("path");
require('dotenv').config({ path: path.join(__dirname, '.env') });
then restarted the app with pm2 with the following command:
$ pm2 restart /bin/www --update-env
I am trying to develop a React Client that consumes the Frappe REST API but on each request I am getting a CORS error. according to the community forum, I have to edit the Nginx conf to allow CORS requests but I am facing this error on my machine (localhost) and the dev server is not Nginx so how can I allow CORS requests on localhost?
// site_config.json
{
// allow all origins
"allow_cors": "*"
// restrict to Origin:
"allow_cors": ["http://demo-site.com"]
}
Reference:
https://github.dev/frappe/frappe/blob/07af98255b6ac9bb3b277fc1b9d6999a86a90e9f/frappe/app.py#L159
I don't think you need to configure CORS, especially during local development.
Let's say your React client is running the port 8080 and Frappe server is on 8000. You can proxy all your requests from localhost:8080 to localhost:8000.
In production, you can generate the static assets and put them in the www folder of the Frappe app.
Add "allow_cors": "*" to common_site_config.json and restart bench
I have a vue project with Node back-end.
The architecture is simple, APIs are exposed by Node which are cosumed by Vue fornt-end.
In developent environment vue dev server runs on port 8080 and the Node server runs on port 3000. The api calls from Vue are being redirected to port 3000 using following devServer configuration in vue.config.js
devServer: {
proxy:{
'/api/*':{
target: 'http://localhost:3000'
}
}
}
I want to deploy this app on RHEL server but unable to find the proper configuration.
I deployed vue app on apache and ran the server simply using node server.js.
How to achieve porxy similar to dev environment? I tried Ngnix for proxy with no success so far.
Need help with approach.