Develop Reference

How to configure the proxy url inside Webpack.config.js after deploying the app?

On my local machine, my React front-end runs on localhost:3000 and my Node/Express back-end
runs on localhost:8080.
Inside webpack.config.js (for my front-end), I use proxy so my front-end can fetch() data from the back-end via the url /api
module.exports = {
//...
devServer: {
proxy: {
'/api': 'http://localhost:8080'
}
}
};
After I deployed my app to Pivotal cloud, the proxy configuration no longer works because it's set to localhost.
How should I configure it so that it's not hard-coded to localhost?

How to update React localhost (127.0.0.1:3000) to another domain (local.example.com)
Might be too late on answer... First configure your hosts file to add local.example.com as your local envir(windows) see link
devServer has a host property
devServer: {
host: 'local.example.com,
port: 80
}
setting the port on 80 will allow you to visit http://local.example.com

using localtunnel\ngrok with more than one local site

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

Run vuejs development server with SSL (to serve over HTTPS)

Important Detail & Workaround: I've come across this: "Deprecating Powerful Features on Insecure Origins"
This explains that HTTPS is enforced on external hosts. I have my development environment on my laptop and, on the weekend I SSH into that box, which is why I ran into this problem yesterday. I run the vuejs dev server remotely on the laptop, making it listen to 0.0.0.0 and open the page on my desktop. This causes the problem.
I've tried using SSH port forwarding to localhost. This worked and is an acceptable workaround for me.
The original question still remains valid. I will leave it open for now.
I'm working with a JS API which requires SSL (WebRTC). So to do development, I need to run the dev server over HTTPS. How can I do that with vuejs?
I've quickstarted the project using webpack. I found some links explaining how to run webpack-dev-server over SSL but I don't know how to do that with a vuejs application. I'm incredibly green considering everything that's JavaScript & NPM. The webpack links all mention a config file, but there is no such file in my project. The closest I see is the "main.js" but there is absolutely no configuration in there.
In essence, what I have is the result of the following steps:
mkdir demo
cd demo
npm install --save-dev vue-cli
./node_modules/.bin/vue init vuetifyjs/webpack-advanced demo
# Use the defaults here (except for "Vue build" I used "Runtime-only")
cd demo
npm install
npm run dev # <-- This is the command I would like to use SSL in

I don't know if you still have this problem or if any other person still encounters it but I found a solution.
Follow the instruction above to generate an openssl key and cert in your working folder.
In /node_modules/webpack-dev-server/bin/webpack-dev-server.js change this line from:
key: {
type: 'string',
describe: 'Path to a SSL key.',
group: SSL_GROUP
},
cert: {
type: 'string',
describe: 'Path to a SSL certificate.',
group: SSL_GROUP
},
to:
key: {
type: 'string',
describe: fs.readFileSync('key.pem'),
group: SSL_GROUP
},
cert: {
type: 'string',
describe: fs.readFileSync('cert.pem'),
group: SSL_GROUP
},
then set
argv.https = true;
That is all I had to do to have my code served from https.
Note that the command line will still read http://localhost:8080, but when you use https in the browser, your app will be displayed after warning from the browser

Requirement openssl installed :
First we have to generate SSL certificat based on a key made by openssl and without pass phrase cos this will generate an error.
nodejs https>node server.js
_tls_common.js:87
c.context.setKey(options.key);
^ Error: error:0907B068:PEM routines:PEM_READ_BIO_PRIVATEKEY:bad password read ...
Go inside your project start to create key & certificat :
openssl req -nodes -new -x509 -keyout key.pem -out cert.pem -days 365
-nodes : Don't encrypt the private keys at all.
Install the packages needed for your project : (--save to add to package.json)
npm install express --save
npm install https --save
npm install fs --save
now create the server file :
touch server.js
nano server.js
Copy/Paste : to server.js
var fs = require('fs');
var https = require('https');
var app = require('express')();
var options = {
key : fs.readFileSync('key.pem'),
cert : fs.readFileSync('cert.pem')
};
app.get('/', function (req, res) {
res.send('Hello World!');
});
https.createServer(options, app).listen(3000, function () {
console.log('Started!');
});
In this cas we don't use 443 port because is already used by services, so i use the port 3000 unused by any app...

How to integrate Node.js running on different port with Vue.js running on a different port altogether?

I have a local Node.js server running on port 3000. I have another dev server for front end using webpack, running on 8080. Node is connected to MySQL server. I want to send data from my Node to front end. My project structure looks like this:-
SampleProject
-> BackEnd
-> FrontEnd
Should I use CORS node module? If not how should I send the data?

The easiest way would be to use webpack-dev-server proxy option to proxy requests from webpack-dev-server (8080) to Node (3000).
Example config:
{
devServer: {
proxy: {
'/api': {
target: 'http://127.0.0.1:3000'
}
}
}
}

Grunt Node and Express Local Dev HTTPS Certificates

I'm trying to make a start at Service Workers and read you require to have an ssl cert.
I've Got an AngularJS 1.x application and a Node Express back end, and I run both independently so I I use grunt serve to run the front end on port 8443 and I use node app.js to run express which is on 7443.
note: I'm doing this on macOS
I used the guide on how to set up https on a project that uses Grunt: here
openssl genrsa -out livereload.key 1024
openssl req -new -key livereload.key -out livereload.csr
openssl x509 -req -in livereload.csr -signkey livereload.key -out livereload.crt
Gruntfile.js
options: {
protocol: 'https', // or 'http2'
port: 8443,
hostname: '0.0.0.0',
key: grunt.file.read('livereload.key'),
cert: grunt.file.read('livereload.crt')
},
node app.js
var privateKey = fs.readFileSync('../livereload.key', 'utf8');
var certificate = fs.readFileSync('../livereload.crt', 'utf8');
var credentials = {key: privateKey, cert: certificate};
httpsServer.listen(7443, config.ip, function () {
console.log('Express server listening on %d, in %s mode', 7443, app.get('env'));
});
Both start with no errors, the front end does complain the connection is not private. When my front end tried to hit an endpoint on the express server I receive the following;
OPTIONS https://localhost:7443/api/census/general net::ERR_INSECURE_RESPONSE
Could someone please assist on this problem of mine.

You have created a self-signed certificate, which is fine for development and testing but is considered unsafe for general use. Unlike SSL certificates purchased from reputable third-parties, self-signed certificates are untrusted by default.
You will need to tell your OS to explicitly trust the certificate. I'm unfamiliar with Mac OS but this question was previously answered on SuperUser.