By default the dev server in a standard preact setup runs either on http://0.0.0.0:8080 or your current IPv4 address:
You can view the application in browser.
Local: http://0.0.0.0:8080
On Your Network: http://192.168.2.105:8080
Both are not very useful. The 0.0.0.0 is something that cannot serve anything (at least on macOS, where I get ERR_EMPTY_RESPONSE in all my browsers (Chrome, Brave, FF, Safari) and the current IP address is dynamic. Additionally, I'd like to use https.
How can I change the address under which the dev server serves the app content?
The solution is not preact.config.js, as I thought, but preact-cli, which accepts a number of parameters to configure the webserver:
$ preact watch
--src Specify source directory (default src)
--cwd A directory to use instead of $PWD (default .)
--esm Builds ES-2015 bundles for your code (default false)
--clear Clear the console (default true)
--sw Generate and attach a Service Worker (default false)
--babelConfig Path to custom Babel config (default .babelrc)
--json Generate build stats for bundle analysis
--https Run server with HTTPS protocol
--key Path to PEM key for custom SSL certificate
--cert Path to custom SSL certificate
--cacert Path to optional CA certificate override
--prerender Pre-render static content on first run
--prerenderUrls Path to pre-rendered routes config (default prerender-urls.json)
--template Path to custom HTML template (default 'src/template.html')
--refresh Enables experimental preact-refresh functionality
-c, --config Path to custom CLI config (default preact.config.js)
-H, --host Set server hostname (default 0.0.0.0)
-p, --port Set server port (default 8080)
-h, --help Displays this message
With that I could create the proper commands for preact in package.json:
"scripts": {
"build": "preact build",
"dev": "preact watch -H localhost -p 3000 --clear false",
},
Related
I'm running Nginx in one container over ports 80 and 443, the later with SSL certs generated with mkcert. This works wonderfully.
In another container I'm running Node that in turn runs Gulp which in turn runs Browsersync.
My Gulp file runs in the Node container, which opens port 3000 to my local machine and proxies localhost so that:
https://localhost runs from the Nginx container.
https://localhost:3000 runs from the Node container with Browsersync
This works except for the fact that the node container isn't able to securely display the website via proxy.
Reading more about what might be happening with Node the certifications, I find this at mkcert
Using the root with Node.js
Node does not use the system root store, so it won't accept mkcert
certificates automatically. Instead, you will have to set the
NODE_EXTRA_CA_CERTS environment variable.
export NODE_EXTRA_CA_CERTS="$(mkcert -CAROOT)/rootCA.pem"
So I understand I need rootCA.pen on my Node container and that should be the end of it.
In the Dockerfile for building the node container
FROM node:12.19.1-alpine3.9
RUN npm install -g gulp-cli#2.1.0
ADD ./nginx/certs /etc/ssl
RUN export NODE_EXTRA_CA_CERTS=/etc/ssl/rootCA.pem
I grab all my certifications including the rootCA.pem file and dump them somewhere in the node container, in this case in /etc/ssl
I then set the env var of NODE_EXTRA_CA_CERTS.
Just to be safe, after going into the Node container, a checking that rootCA.pem is there, I kill the node process and run export again!
Running the gulp file:
function server(done) {
browser.init({
proxy: "https://nginx",
open: false,
https: true
});
done();
}
Browsersync loads and I'm shown…
[Browsersync] Proxying: https://nginx
[Browsersync] Access URLs:
--------------------------------------
Local: https://localhost:3000
External: https://192.168.16.7:3000
--------------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
--------------------------------------
And I can open https://localhost:3000 in the browser and browsersync works. But not without a security warning.
What am I missing?
For anyone having trouble with SSL while using BrowserSync, you might want to point explicitly to your custom cert and key.
browserSync( {
proxy: "https://localhost/mysite/",
https: {
key: "W:/xampp/htdocs/mkcert/localhost/localhost.key",
cert: "W:/xampp/htdocs/mkcert/localhost/localhost.crt"
}
});
NB: I am using xampp and it's installed on W:/ drive.
You can learn more here.
HTH
I have a react app served with HTTPS (I need it for a service worker running in the background)
that is having CORS issues with my backend running locally with Firebase Functions.
Firebase Functions is just wrapping an express application with CORS module enabled.
I performed a few tests with OPTIONS calls to this backend and I'm getting the proper headers.
They problem is that my Frontend (HTTPS) cannot reach out to my backend (HTTP).
Is there any way to run firebase functions locally with HTTPS instead of HTTP?
running firebase serve --help only shows
Options:
-p, --port <port> the port on which to listen (default: 5000) (default: 5000)
-o, --host <host> the host on which to listen (default: localhost) (default: "localhost")
--only <targets> only serve specified targets (valid targets are: hosting, functions, database, firestore)
--except <targets> serve all except specified targets (valid targets are: hosting, functions)
-h, --help output usage information
The local emulator does not support HTTPS at this time. T here is a thread on GitHub about this, with advice to use ngrok for a similar use case. https://github.com/firebase/firebase-tools/issues
You can do it with native react-scripts:
REACT_APP_ENV=development yarn start
package.json:
"scripts": {
"start": "HTTPS=true sh -ac '. .env.${REACT_APP_ENV}; react-scripts start'",
...
See create-react-app docs.
I'm a newbie so sorry if this is a stupid question.
I was trying to setup this a-frame boilerplate code.
https://github.com/aframevr/aframe-boilerplate
This is the instructions given.
To serve the site from a simple Node development server:
npm start Then launch the site from your favourite browser:
http://localhost:3000/
This works as expected, but the webcam is restricted because the site is http and not https. I want to know how to serve this as https instead?
Furthermore I am confused on what actually happens when you do npm start.
The start script is budo --live --verbose --port 3000 --open.
But the project doesn't have any js files that could be the server. Only the html file in the front end. What actually happens with npm start?
npm start runs:
"start": "budo --live --verbose --port 3000 --open",
running budo starts the server
--live enables LiveReload on HTML/CSS/JS file changes
--verbose enables debug messages
--port defines the port
--open launches the browser once connected
by default it uses index.html which is in the main directory
If you want to create a https server instead of http you need to add one more option:
--ssl, -S create an HTTPS server instead of HTTP
If you see some unknown commands run, always try to find the documentation and search the keywords (like HTTPS).
Is there any way to host the same Angular app on two different hosts (different IP or different port) using Node.js?
The .angular-cli.json file allows you to specify Angular-CLI configuration options; including the default hostname and port.
serve: Properties to be passed to the serve command
• port (number): The port the application will be served on. Default is 4200.
• host (string): The host the application will be served on. Default is localhost.
You can define the used port in the .angular-cli.json file by defining the property like this:
{
"defaults": {
"serve": {
"port": 2500
}
}
}
See the Angular CLI documentation for more info and a complete listing of configuration options:
https://github.com/angular/angular-cli/wiki/angular-cli
Command line solution
If you're looking for a command line solution that does not require and configuration editing, simply run the ng serve or ng serve --prod commands with the optional host and port commands.
ng serve --host 0.0.0.0 --port 4201
Using these optional command line parameters, you can simply run the command twice, each with different a host and port.
Side note:
That being said, unless you are going to be serving your Angular application using the Angular CLI, you'll likely need to configure these options using the methods associated with your hosting platform.
I'm just starting to build an Ionic 2 app, but I can't get it working on my mobile device.
Python (works)
To demonstrate that the phone can see the host, I tried a Python server:
$ python -m SimpleHTTPServer 8000
Serving HTTP on 0.0.0.0 port 8000 ...
If I go to http://192.168.8.101:8000 on my phone, it connects fine and displays the directory listing.
Node (fails)
However, when I start Ionic:
$ ionic serve -p 8000
[...]
[INFO] Development server running
Local: http://localhost:8000
External: http://192.168.8.101:8000
I can load it in my host's web browser, but I can't see it from my phone nor another computer (it times out). I also tried a basic node server:
$ npm install http-server -g
$ http-server -p 8000
Starting up http-server, serving ./
Available on:
http://127.0.0.1:8000
http://192.168.8.101:8000
With the same result as Ionic: accessible from the host, but not from the phone.
Is there something blocking the request? Or is there some Node configuration I'm missing? I'm new to both Mac OS and Node, so I don't know where to look.
Embarrasingly, this turned out to be a firewall issue. In System Preferences > Security & Privacy > Firewall > Firewall Options, Node was explicitly set to deny incoming connections:
Changing it to Allow has fixed it. Phew!
Just execute ionic address and you'll get an IP address in your command line. Try with that ipaddress:port number from your mobile which will enable you to access your site from your phone.
Just incase if the ionic address command doesn't return anything, you need to execute the below command to point it to your ip,
ionic serve --address YOUR_IP_ADDRESS
Hope this helps!