I am trying to run a vue-cli project using https.
As per the instructions here How to run Vue.js dev serve with https?
I've added the https setting to the vue.config.js as per below:
module.exports = {
devServer: {
https: true
}
}
When I run the app it correctly runs as https://localhost:8080 however Chrome throws an ERR_CERT_AUTHORITY_INVALID error.
It appears I need to setup an SSL certificate in Windows and set some configuration in vue.config.js. Does anyone know how to do this? Note, this question applies specifically to Windows.
This happened to me when I was building multiple applications that were sometimes sharing the same port. I fixed it by switching to a different port:
module.exports = {
devServer: {
port: 8081
}
}
Related
I have a devserver proxy setup in VueJS that allows me to talk to my website for APIS and get around CORS problems when working in my local devbuild.
However, with this setup, if the requested file exists locally, the local devserver proxy doesn't get the file from my website (which I want it to do for PHP files), it instead tries to load the local PHP file via the Vue devserver.
my vue.config.js file looks like this:
module.exports = {
"transpileDependencies": [
"vuetify"
],
devServer: {
proxy: 'https://www.example.com',
}
}
Is it possible to set up exclusions for specific files, or specific file types (ie PHP files)?
last week I posted the following question which I haven't been able to solve yet.
So my original problem is the following: I have a vue application which is running on my PC and can be accessed there via :8080 or localhost:8080. However I can't access this page from my phone which is in the same wifi. I also added an inbound rule for the port already (I am using windows 10 btw).
I also have a flask server which hade a similar problem which could be solved by setting the host to 0.0.0.0 and adding the firewall rule.
I searched for hour and hours and most answers that are related suggested using options in the command like e.g "npm run serve --host=0.0.0.0 --disable-host-check --useLocalIp --content-base ." or to put something similar into my package.json or add an vue.config.js. There are several answers, some people use 0.0.0.0 for the host value, some their hardcoded IP, some use some options, some not. I tried so many combinations.
As the vue-cli stuff seems to build onto webpack servers I tried different options from there. I also found one comment mentioning vue which can be found here.
When I try to use that I however get the error
ValidationError: webpack dev server Invalid Options
options should NOT have additional properities
options should NOT have additional properities
options should NOT have additional properities
options should NOT have additional properities
My vue.config looks like the following right now
module.exports = {
devServer: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// Various Dev Server settings
host: '0.0.0.0', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
},
}
Something I tried out in the config before was e.g.
module.exports = {
devServer: {
host: '0.0.0.0',
port: 8080,
public: '0.0.0.0:8080',
hot: true,
disableHostCheck: true,
contentBase: '.',
},
};
I am glad about any tip on how to finally access this page via my phone or any other device.
I have been using BrowserSync and Gulp to proxy MAMP sites with a simple Gulp task that looks something like this:
gulp.task('browser-sync', function() {
browserSync({
proxy: "site-name.localhost"
});
});
Ever since I installed Anvil for Mac which requires Pow, the http://localhost:3000 url that BrowserSync used to resolve, instead it now hangs and doesn't resolve.
It happens in Chrome, Safari and Firefox. I've tried commenting out this line in my hosts file as suggested in Chrome can't open localhost:3000 with Gulp / BrowserSync
#::1 localhost
And I've tried putting all sorts of URLs in the proxy: line including localhost:3000 and changing the port number - neither of which get me back to where I was before the Pow install.
just in case someone's looking for an answer. uninstalling Pow + Anvil seems to fix it.
curl get.pow.cx/uninstall.sh | sh
I am trying to do a relatively simple set up with:
An Apache server with a virtual host for the HTML.
Webpack and the Webpack Dev Server for asset reloading and generation.
To accomplish this, the Webpack Dev Server proxies the other server to pass through requests that it doesn't know how to handle.
Using a basic python server (which works):
Start the python webserver on http://localhost:5000.
Run npm start.
Webpack Dev Server starts and proxies the python server using http://localhost:9090.
Visit http://localhost:9090 and see HTML result of python server plus Webpack assets.
Using Apache server:
Start the Apache server.
Run npm start.
Webpack dev server starts and proxies the Apache server using http://localhost:9090.
Visit localhost:9090 the browser automatically redirects to http://localhost and displays "It works!".
If I separately visit http://vhost.name in the browser I see the correct HTML. My environment is the default Apache Server version: Apache/2.4.16 (Unix) on Mac OSX El Capitan.
package.json
"scripts": {
"test": "node server.js",
"start": "npm run start-dev-server",
"start-dev-server": "webpack-dev-server 'webpack-dev-server/client?/' --host 0.0.0.0 --port 9090 --progress --colors",
"build": "webpack"
},
webpack.config.js
/*global require module __dirname*/
var webpack = require('webpack');
module.exports = {
entry: {
app: [
'webpack-dev-server/client?http://localhost:9090',
'webpack/hot/only-dev-server',
'./src/app.js'
]
},
output: {
path: __dirname + '/dist',
filename: '[name]_bundle.js',
publicPath: 'http://localhost:9090/dist'
},
devServer: {
historyApiFallback: true,
proxy: {
// Python server: works as expected at localhost:9090
// '*': 'http://localhost:5000'
// Apache virtual host: redirects to localhost instead of
// serving localhost:9090
'*': 'http://vhost.name'
}
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
};
httpd-vhosts.conf
<VirtualHost vhost.name:80>
DocumentRoot "/Path/To/vhost.name"
ServerName vhost.name
<Directory "/Path/To/vhost.name">
Options FollowSymLinks Indexes MultiViews
AllowOverride All
# OSX 10.10 / Apache 2.4
Require all granted
</Directory>
</VirtualHost>
hosts
127.0.0.1 localhost
127.0.0.1 vhost.name
Wordpress uses canonical URLs to help normalize URLs for content from different sources:
[Y]ou can’t control who links to you, and third parties can make errors when typing or copy-pasting your URLs. This canonical URL degeneration has a way of propogating. That is, Site A links to your site using a non-canonical URL. Then Site B see’s Site A’s link, and copy-pastes it into their blog. If you allow a non-canonical URL to stay in the address bar, people will use it. That usage is detrimental to your search engine ranking, and damages the web of links that makes up the Web. By redirecting to the canonical URL, we can help stop these errors from propagating, and at least generate 301 redirects for the errors that people may make when linking to your blog.
This rewriting is what strips the Webpack-dev-server port number when attempting to proxy. The solution is to add in your theme/functions.php:
remove_filter('template_redirect', 'redirect_canonical');
We obviously don't want this running on the live site, so add a variable to the wp_config.php to set depending on environment:
wp-config.php
// Toggle to disable canonical URLs to allow port numbers.
// Required for Webpack-dev-server proxying.
define('DISABLE_CANONICAL', 'Y', true);
yourtheme/functions.php
// Hack for Webpack dev server
if (DISABLE_CANONICAL == 'Y') {
remove_filter('template_redirect', 'redirect_canonical');
}
I have experienced issues with the browser "caching" the previous URL redirect, so when you make a change it may not appear immediately. Try opening the URL in incognito mode, using a different browser, or restarting the Webpack and Apache servers.
I'm running Nodejs and Apache alongside each other.
node-http-proxy is listening on port 80 and then forwarding requests to either Apache(:9000) or to Express(:8000).
My virtual hosts on Apache look like:
<VirtualHost 127.0.0.1>
DocumentRoot "/localhost/myVhost"
ServerName myVhost
</VirtualHost>
My question is, what is the "correct" way to have vhost like functionality on the Express/Nodejs side? I would prefer to not have to place each Nodejs app on its own port as is suggested here:
https://github.com/nodejitsu/node-http-proxy
(Section titled "Proxy requests using a 'Hostname Only' ProxyTable")
I noticed Connect (which as I understand it, gets bundled in Express) has some vhosts functionality. Should I be using that? If so, what would be the correct way to run it alongside node-http-proxy?
http://www.senchalabs.org/connect/middleware-vhost.html
I also noticed this other module called "Cluster", it seems to be related but I'm not sure how:
http://learnboost.github.com/cluster/
While not wanting to overwhelm, I also came across one called, "Haibu" it seems to be related but I'm not sure if it would just be an all out replacement for using vhosts:
https://github.com/nodejitsu/haibu
Note: I'm a front-end guy, so I'm not very familiar with a lot of server terminology
I never figured out Haibu or Cluster. But I did find a good solution that addressed my issue. To my surprise, it was actually quite simple. However, I don't know much about servers, so while this works, it may not be optimal.
I set up virtual hosts like normal on Apache
(http://httpd.apache.org/docs/2.0/vhosts/examples.html)
I installed the following on Node
Express (http://expressjs.com/)
node-http-proxy (https://github.com/nodejitsu/node-http-proxy)
Then, as a matter of personal style, I placed all my virtual hosts in a common directory (/localhost)
I then switched Apache to listen on a port other than port 80. I just happened to choose port 9000 because I had seen that used somewhere. (In httpd.conf, changed "Listen 80" to "Listen 9000"). I also had to make sure that all my virtual hosts, as defined in extra/httpd-vhosts.conf were set to an IP based nameVirtualHost (127.0.0.1) instead of using a port (*:80).
On the Node side, I created my app/server (aka node virtual host) that listened on port 8000 (somewhat arbitrarily choice of port number) See this link on creating a server with express: http://expressjs.com/guide.html
In my /localhost directory I then created a file called "nodeHttpProxy.js"
Using node-http-proxy, in nodeHttpProxy.js I then created a proxy server that listens on port 80. Using express, which wraps connect (http://www.senchalabs.org/connect/) I created my virtual hosts.
The nodeHttpProxy.js file looks like this:
// Module dependancies
var httpProxy = require('/usr/local/lib/node_modules/http-proxy/lib/node-http-proxy')
, express = require('/usr/local/lib/node_modules/express/lib/express');
// Http proxy-server
httpProxy.createServer(function (req, res, proxy) {
// Array of node host names
var nodeVhosts = [
'vhost1'
, 'vhost2'
]
, host = req.header('host')
, port = nodeVhosts.indexOf(host) > -1
? 8000
: 9000;
// Now proxy the request
proxy.proxyRequest(req, res, {
host: host
, port: port
});
})
.listen(80);
// Vhosts server
express.createServer()
.use(express.vhost('vhost1', require('./vhost1/app')))
.use(express.vhost('vhost2', require('./vhost2/app')))
.app.listen(8000);
As you can see, I will have to do two things each time I create a new Node virtual host:
add the virtual host name to my "nodeVhosts" array
define a new express virtual host using the .set method
Of course, I will also have to create the actual host path/files in my /localhost directory.
Once all this is done I just need to run nodeHttpProxy.js:
node nodeHttpProxy.js
You might get some weird "EACCESS" error, in which case, just run as sudo.
It will listen on port 80, and if the host matches one of the names in the nodeVhosts array it will forward the request to that host on port 8000, otherwise it will forward the the request onto that host on port 9000.
I've been giving this some thought lately as I'm tackling the same problems on my personal test environment. You are not going to be able to get around having each node application running on it's own port, but you can abstract away the pain of that process. Here is what I am using now, but I hope to build an npm package around this to simplify things in the future.
Each of my node.js applications has a map file that contains the port that the application is listening on as well as a map that indicates the expected path which the application is being served on. The contents of the file look like this:
{"path": "domain.com/path", "port": 3001}
When I start my application, it will read the port from the map.json file and listen on the specified port.
var map = fs.readFileSync('map.json', 'ascii');
app.listen(map.port);
Then in my proxy setup, I iterate over each of my node.js application directories, and check for a map.json file which indicates port 80 traffic should be proxied to this application.
I use almost the exact same method to setup the proxy for our apache hosted applications as well. We use a folder based convention on the PHP websites that we are serving and it uses the following configuration:
VirtualDocumentRoot /var/www/%-2.0.%-1/%-3+/
VirtualScriptAlias /var/www/%-2.0.%-1/%-3+/cgi-bin/
This essentially allows us to map domains to folders using the following structure.
http://sub.domain.com/ = /var/www/domain.com/sub/
There is no additional configuration needed to add or remove sites. This is very close to what I am currently using to proxy both apache and node sites. I am able to add new node and new apache sites without modifying this proxy application.
proxy.js
var fs = require('fs');
var httpProxy = require('http-proxy');
var proxyTable = [];
// Map apache proxies
fs.readdirSync('/var/www/').forEach(function(domain) {
fs.readdirSync('/var/www/' + domain).forEach(function(path) {
var fqd = domain + '/' + path;
var port = fs.readFileSync('port', 'ascii');
proxyTable[fqd] = fqd + ':' + 8080;
});
});
// Map node proxies
fs.readdirSync('/var/www-node/').forEach(function(domain) {
var map = fs.readFileSync('map.json', 'ascii');
proxyTable.[map.path] = '127.0.0.1:' + map.port;
});
var options = {
router: proxyTable
};
var proxyServer = httpProxy.createServer(options);
proxyServer.listen(80);
In the future, I will probably decouple the path from the port that the application is listening on, but this configuration allows me to build the proxy map automatically with very little work. Hopefully this helps.
I took some inspiration from #uglymunky and wrote a chef script to do this on Ubuntu.
With this script you can install express and apache with vhost support on a single server using 1 line after you pull down my chef project from github
https://github.com/toranb/ubuntu-web-server
If you have git installed and you pull it down you can kick it off like so ...
sudo ./install.sh configuration.json
This does require Ubuntu 12.04 or greater as I took advantage of an upstart script to start node when you reboot the machine
When the script is finished you will have a working ubuntu web server with express to run any node apps you configured, along side apache to run any wsgi apps you configured
I'm working on an extremely minimal and to the point library that can be totally segregated from your projects. Basically the idea would be run this independently on your servers and don't ever worry about having to bundle this in your projects how you would with connect.
Take a look at the config.json file to see how simple it actually is to setup.
I was looking for this and I did find a few things but they didn't support everything I needed which specifically is HTTPS, WS and WSS!
Right now the library I wrote only works for HTTP. But in the next few days I hope to have it finished and working for HTTPS, WS and WSS as well.