How do I run this aframe boilerplate code locally with https instead of http? - node.js

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).

Related

Unable to reach localhost:3000/

I'm working on a react application and for testing some services I wrote a node server in my notebook. It seems that from the app and from the browser I cannot point to https://localhost:3000 due to ERR_SSL_PROTOCOL_ERROR.
I just tried doing some actions like reset all SSL certificates, trying different browser but the only result I found it's that I can reach my server from the browser but not via react.
Can someone help me?
Try http://localhost:3000
Just validated with one of my projects to make sure
The dev server doesn't support https
The localhost:3000 should be hit by: "http://localhost:3000"
If that is not working then the port number can be changed.
In REACT, the port number can be changed with:
"start": "set PORT=3006 && react-scripts start"
How are you running the app? Maybe with
set HTTPS=false&&npm start

How does a react app can be set up on server

I'm trying to understand what needs to be done to put my react app online.
Until now, I launched it on my mac using npm start, and accessing localhost:3000 or http://127.0.0.1:3000.
So I currently have bought a small server, installed everything (last version of node and npm, git and other necessary things), cloned my repo, and installed all dependencies.
When I do npm start on the server, it says it's available on port 3000. But when I go in my server's ip with the following :3000, it times out.
I don't really understand what need to be done to do this, I found some things about configuring apache on the server, others about using pm2 so have a node script running even after leaving the terminal, but that would be my next step I guess.. And other about configuring things with express (but do I need node+ express here ? As it's a simple front end react page ?).
if you are using webpack devserver, use it for development only
The tools in this guide are only meant for development, please avoid using them in production!
back to your question, there is a difference between binding to 127.0.0.1 or binding to 0.0.0.0
try changing the devserver to listen to 0.0.0.0
webpack.config.js
module.exports = {
//...
devServer: {
host: '0.0.0.0'
}
};
Usage via the CLI
webpack-dev-server --host 0.0.0.0
also note, that you will need to allow ingress rules (incoming connections). that is, allow a request from the internet to reach your server
There are a lot of configurations you will have to do when you deploy your application on a server. Building the app, Nginx, pm2 and even ssl certification. This video is 20min and has all you need. https://www.youtube.com/watch?v=oykl1Ih9pMg&t=1s

My Express Node.JS App times out

I have installed Node.js on my web server plus the dependencies for Express. When I run the command npm start and go to my web site's address using the port 3000 (which I believe the app is set to by default?), it just keeps loading and never loads. Any tipps please on how to fix this?
Try this $ PORT=8080 node app.js. Here app.js is your server config file. I suspect some background servers are running in that port 3000.

Debugging Kibana backend Node.js code

How to debug Kibana backend source code?
I presume, node-inspector could be used. And some extra configuration needed for package.json file to run debugger at npm start. But, I can't figure out the correct configuration syntax.
NODE_OPTIONS=--debug bin/kibana --dev
If you want to break before starting:
NODE_OPTIONS="--debug --debug-brk" bin/kibana --dev
Alternatively, you can set the same variable when calling npm start:
NODE_OPTIONS=--debug npm start
You will see:
Debugger listening on port 5858
You can then use the node inspector by running node-inspector and opening http://127.0.0.1:8080/debug?port=5858.
If you are debugging a remote server, you can either run node-inspector on the server and forward port 8080 through SSH, or you can run node-inspector locally and forward port 5858 through SSH.
EDIT: As it was now mentioned in the comments, it might be necessary to edit the source and add debugger; at the beginning, otherwise breakpoints might not work correctly even when using --debug-brk. Not sure why, though.
add $NODE_OPTIONS --no-warnings --inspect
and start kibana server and access the link shown in the logs like this link "chrome-devtools://devtools/remote/serve_file/#521e5b7e2b7cc66b4006a8a54cb9c4e57494a5ef/inspector.html?experiments=true&v8only=true&ws=localhost:5858/node" then you will find your backend code in the source tab and you can debug it like debuging frontend code.

Ionic Desktop Testing

Is there any advantage in testing the ionic app on a web browser using the the ionic serve command vs just running a local apache server and browsing the www folder (e.g. http://localhost/www/#/app/home). I checked the serve.js file in the npm module and apparently all it does is listening for a tcp connection on a default port using nodejs modules.
There are a few advantages, but you are certainly able to use a local apache server as well.
ionic serve benefits
It runs with the ability to have live reload, meaning if you save a file in your editor the app will auto-refresh in your browser. You can disable by with the -r flag on the command.
It can open a browser when you start up, which can be nice or annoying. You can disable with the -b flag on the command.
It sets up a local server for you, regardless if your files are in the apache www directory. It lets you store the files anywhere in your system.
Apache benefits
You can setup .htaccess rules to rewrite urls to properly support html5mode in Angular. I don't do this on mobile apps since the urls are not available in apps.
Runs on port 80. You don't have to worry about ports or remembering what port to use.
Its up to you really, but I use ionic serve. You can also use cordova serve which does the same as ionic serve without live reload and browser open, and runs on localhost:8000.

Resources