Require a client library installed via npm in NodeJs - node.js

I've a problem with a nodejs app which should serve js assets to the client.
I've installed some modules using npm (primus or socket.io for example), and i want to send these js files to the browser.
Using jade and having a public folder in the root of my project is simple:
script(src='/js/lib/jquery-2.1.0.min.js')
script(src='/js/lib/bootstrap.min.js')
This example loads with success to the browser the scripts below.
But how can do the same with libraries inside the node_modules folder?

You should not need to send npm/.js files intended to be run by node to the browser, the browser will not know what to do w/ it.
For socket.io if you just do:
var io = require('socket.io').listen(app);
on the node/server side, where "app" is your express server, socket.io will automatically take care of serving up the appropriate browser .js files at the /socket.io/socket.io.js url. The reason for this is that it will server up a slightly different socket.io.js file for every client.
not sure about primus.

Related

Express JS not serving few static files, throws 500 internal server error

When express server is started with SPA application index file and few other static files are loaded and some files throw 500 error
NodeJS server is running, and serving the static files from the correct folder. (This can be confirmed as it loads index.html and some other assets)
As seen from the network tab scripts.2d2e0c1a64a29c086e01.js, jspdf.min.js, favicon are loaded from the same static folder, but other js files are not loaded.
When error files are opened with full link (localhost:3000/main-es2015.b21fb6bfbdb8538cc020.js) these files are also loaded aswell.
The static folder contains the build files from angular 8.
Same issue when tried with nginx reverse proxy config.
Any help is much appreciated. Thank you
I found that the new URL wasn't allowed in the Content Security Policy list, once adding it everything works as expected. Thank you.
I had a similar error -- HTTP 500 when requesting an image from Express -- and corrected it by granting more permission to the static files. When the error was happening, the image file had permissions -rw-rw----. I used sudo chmod 666 public/static/*.jpg to change this to -rw-rw-rw-, and the problem was solved.

How to serve static files with nginx after using npm run build with webpack

after generating a development build with npm run build i get the message saying
"Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work."
What is the best way to do this with nginx? Currently to test it i am using an npm module called serve.
Also, if i got to my homepage at mydomain.com and search for a user, everything works like it is supposed to, redirecting me to mydomain.com/users/brad but if i then do a url search formydomain.com/users/brad i get a not found error, any help is appreciated!
In my case, when I have to serve static content with nginx, it often looks like :
location /static {
alias $myroot/staticfiles;
}
Also, if you haven't already, read the NginX guide to Serving Static Content.
If your are familiar with the Docker technology i would recommend to use a Docker Nginx Container and add your static content from the Webpack Buildflow to your container (this can be automated with a build server). Have a look at the following Docker Image from Nginx: https://hub.docker.com/_/nginx/.
Otherwise you have to install nginx on your Server where you host your Homepage. For this have a look at your Server OS and reach out to the web for a detailed nginx setup for your server. Without any configurations nginx will serve the static content on Linux-like server from /usr/share/nginx/html
If you only have FTP Access to your server you can transfer your built files via FTP/SFTP to a specific folder e.g /myHomepage and then your static content is server from yourdomain.de/myHompage.

how to use polymer starter kit doc & demo offline?

i have installed polymer starter kit 1.3.0, Using gulp serve i can access index.html located in app folder at localhost:5000.
i have two questions.
1) My question is how to access pre-developed components located at /bower-components/ on web browser?
i have tried to install and serve gulp in /bower-components/,but it still serve the /app/index/
i am not able to access components references on web browser.
2) After complete development how to host it without gulp, ex. on xampp?
You could use Python's HTTP server to serve up the bower_components directory, allowing you to access the subdirectories offline:
Open a terminal into bower_components/
Run: python -m SimpleHTTPServer 8000 to start an http server on port 8000.
Open a browser to http://localhost:8000/{dir}, where {dir} is the directory name of the component you wish to view (e.g., http://localhost:8000/paper-ripple/).
I think in the starter kit, bower_components directory is mapped to the /components url when you use gulp serve. This is the same url as your app/elements directory.
This is designed so that you app-elements can access polymer by a url of ../polymer/polymer.html (and similarly for the other elements)

How can I use (Node) Livereload on a development server in my network

Background: My PHP projects (CakePHP, Wordpress) run on an Ubuntu server in my network, I access them through a development TLD (.dev for example) setup through a local DNS server and I edit the files through a Samba share.
I would like to utilize Livereload for my development, preferably have it running on the server itself. I have basic Node/Gulp knowledge, but haven't been able to get this running.
Livereload (or a middleware server) should proxy the 'real' URLs, making sure all websites run as they would normally and Livereload should be available over the network (so not just localhost, because that runs on the development server)
Desired result:
Livereload runs on my dev server (IP: 10.0.0.1), my project is called helloworld.dev, I browse to 10.0.0.1:3000 on my machine and see helloworld.dev proxied through Livereload. I now edit a CSS file over the Samba share and the CSS is reloaded without a refresh.
I've tried using a few NPM packages, gulp-livereload, livereload, node-livereload, with their provided examples that come with the packages, but haven't been able to get the desired result. They all expect you to run in locally, don't support access to the Livereload URL over the network, cannot proxy the 'real' URLs or require static content.
Can anyone provide an example or 'proof of concept' code of my wish, so I can see where to start?
I found the answer: http://nitoyon.github.io/livereloadx/
This does EXACTLY what I need.
I can run
livereloadx -y http://helloworld.dev -l
open
http://serverip:35729
and I'm ready to roll.
The -y option creates the proxy to the 'real' URL and the -l makes it serve files from local filesystem instead of through its proxy.

How to run server-side Javascript within a shared server service?

I know there is Node.js and Rhino, amongst other platforms to run server side JS. Though, we can only afford a shared server, since a VPS is much more expensive, and normally shared servers do not provide such tools. We need to run some cron jobs which by default are run by the server, and our core functions are purely JS without interaction with the browser/client.
Is there then a simple way of running server side JS, without the need for installing server side specific SW?
1) Go to Node.js download page and get the link for the Linux Binaries (.tar.gz) (right click-> copy link address).
2) Then (thanks to user niutech) create the following php file, namely install_node.php
<?php
//Download and extract the latest node
exec('curl http://the_URL_you_copied | tar xz');
//Rename the folder for simplicity, adapt accordingly
exec('mv node-v#bla_bla-linux node');
?>
3) run the php file from the unix terminal
$php -q install_node.php
4) you may then run the node executable file on ./node/bin/node

Resources