Trying to host Vue3 development on a remote machine, using vite to serve development, do hot module replacement (HMR), etc., and it works perfectly when developing locally.
I'd like to be able to develop remotely, and so I thought I'd set up an instance, put the dev stuff on it, and run a caddy instance to front port 3000 to port 80.
This almost works. I get the page served fine, but HMR fails, and the page reloads itself every few seconds because the websocket cannot connect.
I can add another port forward with caddy, but it appears that it has to have a different path (e.g., I can forward everything for path '/static' to some other port), but it doesn't appear, from a cursory look at the vite code, that the websocket code uses a different path, it just runs via '/' like everything else. Is there a separate path? Can one be configured?
Is there a way to deal with this?
Thanks!
If anyone is still looking for a solution to this. Add the following line to your vite.config.js file:
server: { hmr: { port: 80 }, },
Change the port number to match whatever your port your browser is using. (e.g. if running in a docker container setup as 3005:3000, then you would want to set this config to 3005 not 3000)
Related
So, I'm currently setting up a Raspberry Pi to be my testing server and to host code backups over SFTP(I really don't like Git). After tussling with Hamachi for a bit, I was recommended Ngrok. Installing Ngrok, I was able to open a port just fine without a config file. It was at this point that I decided that I'd want multiple ports open. I read through the documentation, and wrote this config file.
authtoken:(REDACTED)
tunnels:
httpnorm:
proto: http
addr: 80
httptest:
proto: http
addr:69420
sftp1:
proto: tcp
addr:22
sftp2:
proto:tcp
addr: 21
Now, this is a completely fine YAML file, I've even checked it for error twice, so the formatting doesn't appear to be an issue. However, upon running the command "./ngrok start -config='ngroksetup.yml' sftp1", I get the following output.
ERROR: Tunnel 'sftp1' is not defined in the config files.
ERROR: Tunnels available:
ERROR: Config files read: [ngroksetup.yml]
That isn't correct, because ngroksetup.yml(which is on the root of the filesystem) clearly has listed tunnels. Why is it incorrectly interpreting the setup file?
User error. The issue would be obvious from the get go if I had included my auth token, but I didn't want my auth token being stolen for obvious reasons. Thankfully, the way I wrote it kind of gives it away. I needed a space between the : and the auth token itself, just like how I missed the space on the (REDACTED).
I'm using ngrok (free account) in my localhost for my coded web server written in Go
In Ubuntu, after starting my server (which listens on port 3000), I run this command to start ngrok:
./ngrok http 3000
Then other PC can get access to my demo web by path provided by ngrok, for instance, http://6fed323a.ngrok.io
But when they do something on it (for example, click on a button that redirects), the host of URL becomes localhost again
There isn't any functions of ngrok that allows access to all routes in server, is there? I'm learning
I just ran into this issue, the reason for this is because your button uses a straight absolute path redirect which ngrok (or any tunneling service ive used so far) cannot handle. You need to use a relative path redirect such as:
window.location.href = '/path';
In general, it is considered best practice to always use relative urls so that the app is not bound to the hostname. Of course, this is in an ideal work- most legacy apps may not follow this unfortunately.
While I was working on a Rails app I wanted to run it on ngrok but I got error below:
The connection to http://xxxxxx.ngrok.io was successfully tunneled to your ngrok client, but the client failed to establish a connection to the local address localhost:3000.
It seems like ngrok works fine but my local server is not. Which is true since I forgot to run my rails app first by run $ rails s. By doing so I was able to get ngrok tunneing works fine.
Make sure your local server run first.
I have noticed ngrok url changes to localhost url when I click on site logo which is defined as root_path in my route file. But other links and header tabs for example works fine and shows ngrok url.
Good luck.
I've struggled for couple of weeks on this configuration.What I want to achieve can be listed as follows.
1.I registered a domain not long ago.And I've set up some web service on my VPS,such as a blog,a forum and Owncloud. Now I want to configured the Nginx so that I can run all the service on one VPS and one IP address. In order to run owncloud,I have to modify the /etc/php5/fpm/pool.d/www.confto listen = 9000.In this case,I can only get one service (Owncloud)function,because if I want to run the forum I must uncomment the listen = /var/run/php5-fpm.sock.What's more,I've tried to uncomment both of them,Nginx showed 502 afterwards.
2.I'm using Hexo as my blog.When I start the server,I can access into my blog on IP:4000.So I wonder if I could run my blog server on background and edit the posts online via a subdomain which has been redirected to port 4000.If it's possible,should I modify the nginx.conf or add something in sites-available?
3.Can I deploy different web services on different subdomain?Which file is to modify?It's said that I can achieve this by using reverse proxy?
Sorry for the pathetic English and expression.Thanks in advance.
Going at it point by point:
The advantage of PHP-FPM, which you are using, is that you can have multiple separate interpreters running in your pool. To do so, simply copy the file at /etc/php5/fpm/pool.d/www.conf to somewhere else, say /etc/php5/fpm/pool.d/forum.conf, change the listen directive, and you've got a second php interpreter running, entirely separate from the first one. That way owncloud (www) and your forum (forum) have their own distinct php.
This is called reverse-proxying. nginx does that well. You simply add a new site definition in sites-available that does reverse-proxying to port 4000 on your server, then symlink (or copy) that site definition to sites-enabled and restart nginx. You will have to setup Hexo to start automatically for that to work.
You can deploy different web services on different subdomains. As long as the dns is configured to point that name to your server, you can configure the server to respond differently for every subdomain using site definitions. You need to modify the files in sites-enabled to determine which names nginx knows how to respond to.
I have a site which has the capability to change branding. When branding changes various colours change. To enable this, the site utilizes less (as in lesscss.org) and one included jsp (called style.jsp) has various less variables which then change the look of the site.
All of this works fine when I run locally with the site served up on port 8080.
When I deployed this to our QA site we noticed it appeared to be caching the colors, such that changing brands didn't change the colours. On our QA site I redirect port 80 to port 8080 using nginx, so I tried accessing the site directly on port 8080 and it started working again.
After much head scratching I couldn't work out why there was any caching going on in nginx, so I tried something else. I redirected port 8181 to port 8080 expecting it to still cache, but it didn't. I've tried various ports and port 80 is the only one which seems to exhibit this caching behavior.
Does anyone know why it behaves differently on port 80 to any other port?
For anyone else interested...
The less.js will be in development mode if the request is on any other port than port 80. In development mode the generated css is put in the standard browser cache as you'd expect. In non-development mode, the css is put in a secret mystical cache that will not be affected by ctrl-r, shift-F5 etc.
I am developing a single web application that will dynamically change its content depending on which domain name is used to reach the site. Multiple domains will point to the same application. I wish to use the following code (or something close) to detect the domain name and perform the customizations:
string theDomainName = Request.Url.Host;
switch (theDomainName)
{
case "www.clientone.com":
// do stuff
break;
case "www.clienttwo.com":
// do other stuff
break;
}
I would like to test the functionality of the above using the ASP.NET development server. I created mappings in the local HOSTS file to map www.clientone.com to 127.0.0.1, and www.clienttwo.com to 127.0.0.1. I then browse to the application with the browser using www.clinetone.com (etc).
When I try to test this code using the ASP.net development server the URL always says localhost. It does NOT capture the host entered in the browser, only localhost.
Is there a way to test the URL detection functionality using the development server?
Thanks.
Figured this one out on my own. The problem here wasn't that the HOSTS file didn't work, it was that I was using the wrong method to detect the host header from the browser.
This does NOT work, and only repeats the 127.0.0.1 localhost that the ASP development server lives on.
Request.Url.Host;
However, by using the following instead, the domain entered into the browser is stored and can be used to dynamically change the site behavior, even on the ASP development server.
HttpContext.Current.Request.Headers.Get("Host").ToString();
So the solution to test multiple domains on a Dev server is:
create several test domains in the HOSTS file on your local machine pointing to 127.0.0.1
use the Headers.Get("Host") syntax to sniff the domain entered into the browser
The only 'gotcha' that I found is that you must still manually preserve the specific port that the ASP dev server is running on.
Example:
if you have in your hosts file www.mytestdomain.com pointing to 127.0.0.1, and your dev server is running on port 46146, then you must enter the following into your browser for testing: http://www.mytestdomain.com:46146/
But it still works!