I've been developing with the vue-cli and the Webpack template. Everything works flawlessly but I'm having some issues using a custom host. Right now Webpack listens to localhost:8080 (or similar) and I want to be able to use a custom domain such as http://project.dev. Has anybody figured this out?
This might be where the problem resides:
https://github.com/chimurai/http-proxy-middleware
I also added this to the proxyTable:
proxyTable: { 'localhost:8080' : 'http://host.dev' } and it gives me a console response [HPM] Proxy Created / -> http://host.dev
Any advice, direction or suggestion would be great!
Update
I successfully added a proxy to my Webppack project this way:
var mProxy = proxyMiddleware('/', {
target: 'http://something.dev',
changeOrigin: true,
logLevel: 'debug'
})
app.use(mProxy)
This seems to work, but still not on port 80.
Console Log:
[HPM] Proxy created: / -> http://something.dev
I can assume the proxy is working! But my assets are not loaded when I access the url.
Is important to note I'm used to working with Mamp -- and its using port 80. So the only way I can run this proxy is to shut down Mamp and set the port to 80. It seems to work, but when I reload page with the proxy URL -- there is a little delay, trying to resolve, and then console outputs this:
[HPM] GET / -> http://mmm-vue-ktest.dev
[HPM] PROXY ERROR: ECONNRESET. something.dev -> http://something.dev/
And this displays in the browser:
Error occured while trying to proxy to: mmm-vue-ktest.dev/
The proxy table is for forwarding requests to another server, like a development API server.
If you want the webpack dev server to run on this address, you have to add it to your OS's hosts file. Vue or we pack can't do this, it's the job of your OS.
Google will have simple guides for every OS.
Related
I am building a web app that uses (mobile devices's) camera, but this is working only on https and localhost.
The web app is served locally using WAMP 3.2.9.
I've managed to use the secure protocol (https) within my wamp configuration, but I'm having problems when I want to share my app to my local network so I can view the app on my phone and test the camera functionality.
In the older versions of Laravel (which used webpack) this was very easy using browsersync, but now, using Vite I don't know exactly how to do this.
My local domain is myapp.test and can be accessed using both http and https.
I tried to use npm run vite --host, which shows the local and network address as well (ex. 192.168..), but when I visit that address on my phone, I can see only the Vite default page This is the Vite development server that provides Hot Module Replacement for your Laravel application., but not the app itself.
In my vite.config.js file I added that ip from vite network:
server: {
https: true,
host: '192.168._._'
},
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js',
],
refresh: [
...refreshPaths,
'app/Http/Livewire/**',
],
}),
mkcert()
],
Note that I also used the mkcert vite plugin to allow me to use https.
Now I'm confused about the vite service that runs on port 5173 by default and the app that should run on port 443 to be on https.
I've also tried using `php artisan serve --host 192.168.. which works on my local network, but it doesn't work with https, so I had to focus on WAMP only.
So how can I have my app shared among my local network with https?
I'll explain about how Vite works compared to Webpack to hopefully help you understand a little better.
Both Webpack and Vite create a bundle of files when using the build commands to compile for production. Using the dev command, that it seems like you're using, they work a little differently. While Webpack watches for file changes to recompile the bundle and BrowserSync then reloads your assets for you, Vite starts a local server to serve the compiled files. This means that you don't proxy your original domain like with BrowserSync. Vite also creates a file in your public folder called "hot", which tells Laravel which url it should use when using the #vite() directive or the Vite::asset() method. Because of that you can use your original domain myapp.test even for the hot reloading of the dev command. I don't think Laravel actually supports --host and if it doesn't I haven't been able to find it or figure it out.
I did find https://github.com/Applelo/vite-plugin-browser-sync to hopefully solve your testing on other devices but I couldn't get it to work with https, otherwise I'm afraid you might have to look into something like ngrok and use the npm run build command instead of dev until better support is built into Laravel.
Update:
To configure the BrowserSync plugin you have to manually configure the proxy:
VitePluginBrowserSync({
bs: {
proxy: 'http://myapp.test/' // The usual access URL
}
})
Since it doesn't seem like Laravel supports --host I have been able to find a workaround: because Laravel reads the asset host URL from the hot file in the public directory, you can replace the contents with the external Vite URL like http://192.168.1.37:5174 after running npm run dev --host. This will make Laravel use that URL when referencing any assets.
I am trying to use QuotaGuard Static IPs to host a Next.js application. The Next API routes are running Prisma which, in turn is making direct db requests to a protected Microsoft SQL Server.
The client has whitelisted my IP for local development and the app works fine. But on Heroku you can't get a static IP without the QuotaGard.
I don't believe I have set up the QuotaGuard correctly or the server.js file. The rest of the app is working fine. Here are those files:
Expected Behavior:
The server proxies its url to one provided by the QuotaGuard
The MS Sql Server can whitelist the IP
Next.js server.js uses the 'http-proxy-middleware' to proxy requests
Actual Behavior:
The app homepage just shows 'this is a proxy server'
The QuotaGuard dashboard does not show any requests
The prisma client cannot connect (connection refused)
// server.js
// BASICALLY A COMBO OF THESE TWO OPTIONS:
// - https://quotaguard.freshdesk.com/support/solutions/articles/5000013744-getting-started-with-node-js-standard-http-library-quotaguard
// - https://medium.com/bb-tutorials-and-thoughts/next-js-how-to-proxy-to-backend-server-987174737331
const express = require('express')
const { parse } = require('url')
const next = require('next')
const { createProxyMiddleware } = require('http-proxy-middleware')
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
// proxy middleware options
const options = {
target: process.env.QUOTAGUARDSTATIC_URL, // target host
changeOrigin: true, // needed for virtual hosted sites
ws: true, // proxy websockets
}
app.prepare()
.then(() => {
const server = express()
if (!dev) {
server.use('*', createProxyMiddleware({ ...options }))
}
server.all('*', (req, res) => {
const parsedUrl = parse(req.url, true)
return handle(req, res, parsedUrl)
})
server.listen(process.env.PORT, (err) => {
if (err) throw err
console.log(`> Ready on http://localhost:${process.env.PORT}`)
})
})
.catch((err) => {
console.log('Error:::::', err)
})
You can see the live app at https://planes-planner-staging.herokuapp.com/
In this case, based on what you shared, you are close, but you need to go with the SOCKS proxy using the QuotaGuard QGTunnel software.
Steps to set that up are :
Download QGTunnel into the root of your project
curl https://s3.amazonaws.com/quotaguard/qgtunnel-latest.tar.gz | tar xz
Log in to the QuotaGuard dashboard and setup the tunnel
Since you are using Heroku, you can use the Heroku CLI to log into the dashboard with the following command:
heroku addons:open quotaguardstatic
Or if you prefer, you can login from the Heroku dashboard by clicking on QuotaGuard Static on the resources tab of your application.
Once you are logged into the dashboard, in the top right menu, go to Setup (Gear Icon), click on QGTunnel Configuration, then Create Tunnel.
Remote Destination: tcp://hostname.for.your.server.com:1433
Local Port: 1433
Transparent: true
Encrypted: false
This setup assumes that the remote mssql server is located at hostname.for.your.server.com and is listening on port 1433. This is usually the default port.
The Local Port is the port number that QGTunnel will listen on.
In this example we set it to 5432, but if you have another process using 1433, you may have to change it (ie: 1434).
Transparent mode allows QGTunnel to override the DNS for hostname.for.your.server.com to 127.0.0.1, which redirects traffic to the QGTunnel software. This means you can connect to either hostname.for.your.server.com or 127.0.0.1 to connect through the tunnel.
Encrypted mode can be used to encrypt data end-to-end, but if your protocol is already encrypted then you don't need to spend time setting it up.
Change your code to connect through the tunnel
With transparent mode and matching Local and Remote ports you should not need to change your code. You can also connect to 127.0.0.1:1433.
Without transparent mode, you will want to connect to 127.0.0.1:1433.
Change your startup code
Change the code that starts up your application. In Heroku, this is done with a Procfile. Basically you just need to prepend your startup code with "bin/qgtunnel".
So for a Procfile that was previously:
web: your-application your arguments
you would now want:
web: bin/qgtunnel your-application your arguments
If you do not have a Procfile, then Heroku is using a default setup in place of the Procfile based on the framework or language you are using. You can usually find this information on the Overview tab of the application in Heroku's dashboard. It is usually under the heading "Dyno information".
Commit and push your code
Be sure that the file bin/qgtunnel is added to your repository.
If you are using transparent mode, be sure that vendor/nss_wrapper/libnss_wrapper.so is also added to your repository.
If you are not using transparent mode, you will want to set the environment variable QGTUNNEL_DNSMODE to DISABLED to avoid seeing an error message in your logs.
If you have problems...
Enable the environment variable QGTUNNEL_DEBUG=true and then restart your application while watching the logs.
VERY IMPORTANT
After you get everything working
Download your QGTunnel configuration from the dashboard as a .qgtunnel file and put that in the root of your project. This prevents your project from relying on the QG website during startup.
Alternatively you can put the contents of the downloaded configuration file in a QGTUNNEL_CONFIG environment variable.
I have a simple MVC web application where javascript code sends ajax requests to the controller and the controller sends back responses.
I built the app 2 years ago and everything used to work fine. Now I tried to run the app again locally and met with the following problem:
whenever an Ajax request is sent from the frontend to the controller (running on localhost), the localhost refuses to connect and I get an ERR_CONNECTION_REFUSED message in (chrome's) javascript-console. (In Safari's javascript-console I get the following error message: "Failed to load resource: Could not connect to the server.")
I'm running the app using NetBeans 11.2. My NetBeans IDE uses GlassFish as server:
I removed the Glassfish server from NetBeans IDE, deleted its folder in my home directory and then added the Glassfish server again in my NetBeans IDE (which also entailed downloading the the newest version of the Glassfish server).
Still, the server refuses to accept any requests from the frontend.
I also tried using Payara Server (version 5.193). That didn't make a difference either.
The frontend itself looks fine at first glance by the way. That is, going to http://localhost:8080/myapp loads the frontend of the app. However, any dynamic features of the app don't work because the server refuses to accept any Ajax requests coming from the frontend (and initiated through mouse clicks).
How can I fix this?
I think I found the reason for the problem:
In my javascript-file I have the following line of code:
var url = "http://localhost:8080/myapp/Controller";
The variable "url" is passed to all the AJAX requests sent to localhost.
But here is the crazy thing: the AJAX requests are not sent to "http://localhost:8080/myapp/Controller" but to "http://localhost:8081/myapp/Controller" !!!!!
What the hell is going on here?!
Did you use port 8081 before and then changed the variable "url" to the new port 8080? In this case, maybe the variable is still set to the old value in the cache. Restart your computer and see whether this fixes the problem.
If the value of the attribute http-listener is localhost, it will refuse the connection external connection.
You can verify using its value using the command
asadmin> get server-config.network-config.network-listeners.network-listener.http-listener-1.*
Information similar to the following should returned:
server.http-service.http-listener.http-listener-1.acceptor-threads = 1
server.http-service.http-listener.http-listener-1.address = 0.0.0.0
server.http-service.http-listener.http-listener-1.blocking-enabled = false
server.http-service.http-listener.http-listener-1.default-virtual-server = server
server.http-service.http-listener.http-listener-1.enabled = true
server.http-service.http-listener.http-listener-1.external-port =
server.http-service.http-listener.http-listener-1.family = inet
server.http-service.http-listener.http-listener-1.id = http-listener-1
server.http-service.http-listener.http-listener-1.port = 8080
server.http-service.http-listener.http-listener-1.redirect-port =
server.http-service.http-listener.http-listener-1.security-enabled = false
server.http-service.http-listener.http-listener-1.server-name =
server.http-service.http-listener.http-listener-1.xpowered-by = true
Modify an attribute by using the set subcommand.
This example sets the address attribute of http-listener-1 to 0.0.0.0:
asadmin> set server.http-service.http-listener.http-listener-1.address = 0.0.0.0
Reference:
https://docs.oracle.com/cd/E19798-01/821-1751/ablaq/index.html
I am attempting to create a simple application with laravel and wrapping it in phpdesktop to use locally without the need of a webserver(aside from the built-in php server).
Everything works great except this one thing.
If I launch the app.exe, i get 404's when vue/axios requests data from an endpoint, eg: /api/resource.
However, If I open the app in a browser while running the php server (localhost:8000) the resource is found and loaded correctly.
Is there a way around this? Or is this simply how phpdesktop is supposed to work?
Here are a few relavant settings from 'settings.json'
"web_server": {
"listen_on": ["127.0.0.1", 0],
"www_directory": "www/public",
"index_files": ["index.html", "index.php"],
"cgi_interpreter": "php/php-cgi.exe",
"cgi_extensions": ["php"],
"cgi_temp_dir": "",
"404_handler": "/index.php",
"hide_files": []
},
i want to know if someone is using browser sync with vagrant, it is posible?
how do you configure it? I tried to read if there is something on the web, but nothing clear to me. Are there other service to use livereload to all devices at the same time ?
If your vagrant box is running, you should be able to access your website through the domain you chose. For this example, let's assume your site is loaded via mysite.local
In your gulpfile.js you'll need to set up a proxy, like so:
// gulpfile.js
gulp.task('browser-sync', function() {
browserSync.init(["path/to/your/css/*.css", "path/to/your/js/*.js"],
// The magic line. Point the proxy to your local domain
{ proxy: "mysite.local" }
);
});
Restart gulp if it's already running and you should see an IP address in your command line:
Take note of the port number (in this case, :3000)
Now go to http://mysite.local:3000 -- Notice the port! You must add the port that is shown in your command line. BrowserSync will connect!
Note: If it does not work, a cache could be your problem. Try adding a random query string to the end of your URL to get around a caching issue. Example: http://mysite.local:3000/?t=1