How can I run an express server while also running a web portal in production? - express

I am using a puppeteer plugin that opens a webserver when I need to manually solve a captcha. The below code works in development, but I can't figure out an approach to get it to work in production.
I am deploying this app on render.com, and as far as I know, I can only listen to one port.
const app = express();
app.listen(process.env.PORT || "3000");
// I eventually get a link like this
// http://localhost:3001/?targetId=68C3007E851659A5D54CD6E023022C91
puppeteer.use(
PortalPlugin({
// This is a typical configuration when hosting behind a secured reverse proxy
webPortalConfig: {
listenOpts: {
port: 3001,
},
baseUrl: "http://localhost:3001",
},
})
);
I've tried making the port the same on both servers but as expected I kept getting the "port already in use" error. I've also tried pointing the base url to my render.com URL, but it times out when I navigate to the url supplied by the plugin.

Related

Configuring proxy in Webdriver-IO standalone

Background: Here is my situation, I have a website I access that requires me to go through a proxy. For day-to-day use, I installed the chrome extension Proxy switchyomega to switch between proxies based on a URL wildcard. For example, when I go to URL abc.xyz.com my company requires me to use a proxy at x.x.x.x:yyyy.
Issue I am trying to write an automation script using WebdriverIO (version 7.24.0) in standalone mode using chrome that will launch the website abc.xyz.com. The problem is when I run the script it is not going through the proxy, so my access is blocked. I have tried to configure a proxy in the capabilities but that does not seem to work, and I'm wondering if I'm doing something wrong in my configuration, which is below
const { remote } = require("webdriverio");
const browser = await remote({
capabilities: {
browserName: "chrome",
proxy: {
proxyType: "manual",
httpProxy: "x.x.x.x:yyyy"
}
},
});
await browser.url("abc.xyz.com");
As mentioned in normal use when I access URL abc.xyz.com it routes through the x.x.x.x:yyyy proxy and that is what I need to happen when running my script but the above configuration does not seem to do anything.
Any help would be appreciated.

Nuxt/Axios: baseURL with same origin, but different port possible?

Short:
How can I set a different port for axios request in nuxt.config, but with same origin domain?
Long:
On my production side I have an express server that delivers my frontend and backend over the same port (e.g. http://192.168.2.22:8800). Axios will make API requests on that same origin with same port. Works very well.
On my dev side I have an express server that delivers only my APIs and I also have the nuxt server, serving the frontend. Both running on different ports (e.g. http://192.168.2.22:8800 for my backend and http://192.168.2.22:3000 for my nuxt). So that I can also execute the API calls in my development environment, I set the baseURL in my nuxt.config to http://localhost:8800.
My problem here is, I can only test my dev environment if I'm on localhost. If I want to access via another pc, the api calls are also started on localhost, which is not reachable.
Is there a way to add a dynamic port to the baseURL?
My nuxt.config right now:
axios: {
baseURL: isDev ? 'http://localhost:8800/api/v1' : '/api/v1'
},
For a better overview.
This is what I want on my production (only express is running):
Frontend: http://192.168.2.22:8800
Backend: http://192.168.2.22:8800
This is what I want on my dev side (two servers are running - express and nuxt):
Frontend: http://192.168.2.22:3000
Backend: http://192.168.2.22:8800
Environment variable are still your best bet here indeed. It will help you configure each environment to your liking and will avoid a lot of mistakes too.
Here is an interesting article on the subject too: https://nuxtjs.org/blog/moving-from-nuxtjs-dotenv-to-runtime-config

Change port of react devtools

I'm trying to setup my environment to develop with react-native and react-devtools.
Per default the react-devtool uses port 8097 to connect with the app on the emulator.
Unfortunatley, this port is blocked at my workplace. Where/How can i change this port?
I found out that there's an option to configure the devtools with:
const { connectToDevTools } = require("react-devtools-core");
connectToDevTools( { port: "customport" } );
I just don't know where to place this config.
I managed to change the app so that it tries to connect to a different port, but i can't seem to change wart port the devtool client (?) uses (see image)
Any help is appreciated

Issue with Vue.js devServer.proxy

So in an application that I'm working on currently I'm trying to proxy requests from a Vue-frontend, to an Express-server. The express server is running on localhost:5000. This is in my vue.config.js:
"devServer": {
"proxy": {
"^/api/": {
"target": "http://localhost:5000",
"ws": true,
"changeOrigin": true
}
}
},
What I can't wrap my head around is why in most cases, sending out requests to my server with just api/routename works just fine. Then in only 2 components it doesn't work. In the components where it does work, a GET request looks like this for example:
axios.get('api/base/verified')
.then...
Then in two other components, according to the same principle of just requesting to api/route-name, I'm getting errors. In development mode, the requests then all of a sudden go out to http://localhost:8080/api..., and when trying to deploy, they go to 5000, but I get this error message:
xhr.js:184 GET http://localhost:5000/api/content/course/5f54f3c60bb7a30017c1abf2 net::ERR_CONNECTION_REFUSED
Does anyone have any idea about what the deal is, and why the proxying is acting so differently, depending on environment and component?
You should always use the url with a leading slash e.g. /api/base/verified See this question. So I guess in your case that 2 components may use in different path.
The reason it's different for different environments is that the proxy is working only in development server that's why they called devServer.
I'm not sure why you got that error it seems there must be another config that can go to port 5000 such as proxy in nginx but ERR_CONNECTION_REFUSED usually means there is no server at that endpoint.

Access Vue.js application from other device in the same network (also using proxy)

so my problem is basically the same as here, but the question isn't answered yet.
The problem ist, that I can't view my vue application in the webbrowser when visiting <pc_ip>:8080. However when starting my vue.js app with npm run serve it tells me, that this is how I could access the page besides doing localhost:8080. It works from my PC but with my phone which is connected to the same wifi I get the error that the url is not reachable.
Thanks in advance!
UPDATE:
So after finding some other posts I also tried writing some stuff to a vue.config.js like here, here, here or here e.g.
module.exports = {
devServer: {
port: 8080,
host: '0.0.0.0'
}
}
However the problem still persists. I also tried replacing the host in that file with my actual ip, but it does not work either.
UPDATE 2:
As mentioned in a comment, I had a similar problem some time ago, when trying to access my flask server from my phone which was in the same network. Back then I set the host variable to the pc's IP and it worked. As I tested again just now, I realized that the corporation proxy I have to use in parallel could play a role in this. When I wasn't connected via using plink.exe, I could not access my running flask server from my phone. When I connected after that, everything is working.
Could the proxy or a missing configuration be hindering me to access my vue application?
UPDATE 3: so i turned of my firewall completely and then i could access the page from another device. I wondered if some other rule was blocking the port like in this post Windows Firewall - Laravel Artisan Serve - Allow Port in Inbound Rule (not working). But I am not sure how I would find that rule if there is one blocking my port?
Please follow this link:
Work around this problem
I add the following code to my vue.config.js
module.exports = {
devServer: {
port: 80,
host: '0.0.0.0'
}
}
change the port number according to your need.
Normally when you execute the npm run serve command, it gives you two addresses to access your application. A local address and a network address. Like this :
App running at:
- Local: http: // localhost: 8080 /
- Network: http://IP_ADDRESSE:8080/
So with your phone you should use the network address and not the local one.