using localtunnel\ngrok with more than one local site - javascript

I have a web site that is spitted across to local servers, one for the front end, at localhost:3000 and one for the restapi that is on localhost:3001
I want to expose that dev environment using localtunnel or ngrok - but I don't know how to expose two sites at the same time.

With ngrok, you can do it by using a config file.
Here is my config file: ngrok.yml
tunnels:
webSite:
proto: http
addr: 4200
host_header: localhost
dataApi:
proto: http
addr: 56557
host_header: localhost
And here is the command I use to run it:
ngrok start -config ngrok.yml dataApi webSite
Hope it helps

Related

export my localhost server ( node js ) online with a web server like apache

I just made a simple chat-service with Node JS and I want to publish It " Online " ; at the time I used Ngrok and Localtunnel , but they are very limited , therefore I saw Apache web Server but I have not found tutorial on how to use it.
Thanks and hope you can help me.
Ngrok and Localtunnel are services which let you open a connection from inside your network to an external server which then forwards traffic back down the tunnel so clients on the Internet can make requests to your service running inside your LAN.
Apache is HTTP server software. It is nothing like Ngrok and Localtunnel.
While you can set up a reverse proxy using it, for that to use useful in this use case you would have to install it in your router … and most routers don't let you install software on them.
You could possibly run it on a computer inside your LAN and then configure port forwarding on the router … but if you are going to do that then you might as well forget about Apache HTTPD and just forward traffic directly to the service you've written using Node.js.
There are security risks and bandwidth considerations to take into account when running services from your LAN. It's almost always a better idea to just invest in a proper hosting service like Amazon AWS, DigitalOcean Droplets, or Heroku.
By "online" I suppose you mean to host it globally. For that my friend you will be in need of a server (preferably a cloude server) and a static IP address. Both of these are provided by a lot of providers like aws, digitalocean etc as a platform as a service, which we can leverage. So pls do the following:
Register for a cloud service (aws, digitalocean, gcp etc.).
Create a server instance of an operating system of your choice (my pref would be a linux instance).
Attach a public static ip to the server.
Log into the server. (SSH is the most secure way and most providers provide this to log into your server).
Install dependencies (in your case NodeJS etc).
Make sure that the port in which the app is hosted is open publicly. Most providers provide a dashboard in which you can configure port settings.
Use Apache or Nginx for configuring a reverse proxy (this is just for keeping your environment secure)

vue.config.js (devServer) not used in npm run serve

I'm trying to set up a reverse proxy on the development server for my VUE js webapp to get around the CORS issue that I was getting when I was trying to use my flask HTTP APIs with the vue js webapp.
I did this by creating a vue.config.js file in the root of the project directory:
module.exports = {
devServer: {
proxy: 'http://localhost:5001/'
}
}
when I run npm run serve, and try to use a REST API defined on port 5001 - I don't see the request going to port 5001, it uses the same port as the web app.
And there are no useful logs being written to stdout either to help me debug this.
Has anyone come across this issue before ?
I had a similar issue and found that the port was already in use by another application and hence it was not going to the correct port. Once i shutdown the other app, it started working as expected.

How to update React localhost (127.0.0.1:3000) to another domain (local.example.com)

I am setting up a Localhost domain so it can communicate with this third-party API and Auth servers.
For example, change 127.0.0.1 to local.example.com
local.example.com is the domain whitelisted with this third-party enterprise. I need to set this up so i can run API routes to it.
I was able to change 127.0.0.1 locally in C:\Windows\System32\drivers\etc\hosts file and now Node.js is running on it.
I added the webpack config devServer - host to local.example.com but the port is still there. I need to understand how to change this for react because right now it's porting to local.example.com:3000.
A little late to the party but it still might be useful.
Go to C:\Windows\System32\drivers\etc\hosts and add this line:
127.0.0.1 local.example.com
In the React project, add a .env file with:
HOST=local.example.com
PORT=3006
I think you're almost there :-) The devServer option has a port property. Set that to 8080 or 80. Restart your server. Then, open the browser and try leaving it off the URL
After digging around, I found some solutions. Essential, my goal was to set http://localhost:3000 to http://local.example.com.
1. Add local.example.com to your hosts file (windows)
2. Set up your react port to 80
This would remove the 3000 on local.example.com:3000 to local.example.com
On HTTPS request, set the port to 443
This would result to https://local.example.com

can't Preview the application in aws cloud9 when uses express application generator

I am using AWS cloud 9. when I use express application generator, I can't preview my application. Is it because of any port problem?
For application preview and sharing instructions, see https://docs.aws.amazon.com/cloud9/latest/user-guide/app-preview.html
To summarize the preceding information...
To preview your running application, be sure to:
Run using HTTP over port 8080, 8081, or 8082 with the IP of 127.0.0.1, localhost, or 0.0.0.0. (You don't have to use these ports or IPs. However, you won't be able to preview--skip ahead to the "to share..." part.)
With the corresponding application code file open and active in the AWS Cloud9 IDE, choose one of the following on the menu bar: Preview, Preview Running Application --OR-- Tools, Preview, Preview Running Application.
To share your running application with others, be sure to:
Set up the AWS Cloud9 development environment's associated Amazon EC2 security group to allow incoming HTTP requests over port 8080, 8081, or 8082. (Or whatever port the app is running on.)
Set up the AWS Cloud9 development environment's associated network ACL in Amazon VPC to also allow incoming HTTP requests over port 8080, 8081, or 8082. (Or whatever port the app is running on.)
Have others browse to your Amazon EC2 instance's public IP address. Be sure to start the URL with the correct protocol, add the port number if it is not the default for that protocol, and any other required URL components for your app (for example, /index.html, etc.).

Connection Refused While Accessing API

I have a nginx server where I have an api deployed at localhost:5000
On the same server I have a Vuejs app which is deployed at localhost:3000 and then through nginx reverse proxy served from www.mysite.com.
the frontend uses axios to make calls to the api. But everytime it happens, I get a connection refused error to localhost:5000.
Why is this happening and how can I resolve it.
Note: If I serve localhost:5000 api also via a domain like api.mysite.com using nginx reverse proxy and call api from this domain then it works fine. But I don't want to do that and instead want to use localhost:5000 to call the api.
Please check the port is listed by using the following command if you use Linux
sudo netstat -tnlp | grep :5000
If there is process running, then fine. Try changing the localhost to 127.0.0.1:5000

Categories

Resources