No setChannelMetadata() function in pubnub-angular2 - pubnub

I am using PubNub in my Angular 10 project with Angular universal.
I am using pubnub-angular2, which does not have the objects.setmetadatachannel() method, so I use PubNub for it. As PubNub is a JavaScript SDK, it is working fine in a normal project, but giving an error while building in SSR mode. npm run build:ssr is fine but npm run serve:ssr is giving errors.
Can someone help me with this?

it has nothing like setchannelmetadata() so what worked for me is
using pubnub instead of pubnub-angular2
the two library i installed are:
pubnub
2.#types/pubnub
i talked with pubnub support. they are not maintaining pubnub-angular2 anymore. so best not to use it.

Related

Can't resolve module 'ipfs-http-client' in react-app

I have ran into trouble with ipfs-http-client in my React app.
I'm using node 16.14.0
The error message is:
When I Ctrl + Click on 'ipfs-http-client', it still drive me to the modules file.
Solutions that I've tried, but not work:
Restart app
Reinstall module
I've tried use 33.x version, it works fine but I want to use the latest version of ipfs-http-client (57.0.3)
Please help me. Thanks a lot!
The simple Solution
When you use ipfs-http-client in the frontend you will soon also have problems using jest. The easiest way is to simply not use ipfs-http-client at all and instead use a gateway like infura and fetch() the data directly. You can use my code for that:
https://gist.github.com/aignermax/c495c98003da974d17b9c4c481ac23be
The more tricky one
The problem seems to be related to webpack 5 that does not support any Node.js functions "polyfills" anymore. The idea is to keep the frontend separate from the backend and all ipfs-http-client functions are meant to be used in backend only.
You can however still add the polyfills manually following this tutorial: Remember that "Jest" will still not work after that, so if you do unit testing you should consider using ipfs on your server instead or use "The simple Solution" above.
https://github.com/facebook/create-react-app/issues/11756#issuecomment-1001162736
I then got some webpack PolyErrors which I solved using this NPM Package:
https://www.npmjs.com/package/node-polyfill-webpack-plugin
I also Got Errors about failed to load Source-Map from source-map-loader, which will occur using WebPack5 which is included in the new React-Scripts. You fix that by using this:
Failed to parse source map
and NOW IT WORKS.

Convert existing Angular project to Universal, encounter 'referenceerror: navigator is not defined'

I recently faced the task of converting a fairly mature angular project to SSR because I had overestimated the search power of SEO in angular projects. I'm not familiar with node, my angular project is on an apache server and uses php(slim) as the backend api, however, when I started trying to use "most of the tutorials", i.e., the first step, introducing nguniversal/express-engine into the project, it went well, npm did not report any errors.
Then I tried to run npm run build:ssr and it also worked fine. The problem is that when I run npm run serve:ssr, it ends up throwing a "ReferenceError: navigator is not defined" error...
Earlier, I built a completely clean angular project for testing, from build:ssr to run serve:ssr. Even I specified node xxxx/xxxx/main.js directly, no problem, which is obvious, because the angular project for testing is absolutely clean.
However, this does not work on my current "existing angular project". Yes, I fully understand that SSR doesn't allow for navigator or most so-called DOM manipulation, and although I'm not familiar with angular universal yet, I've previewed it and I know that's not possible, but here's the biggest problem :
In this existing angular project, there is no any navigator operations, not even a single line of code
In fact, main.js is also generated automatically, I can't stop it at all, I don't understand why there is "navigator" written in main.js?
I've checked many so-called solutions, including writing something in server.ts, but nothing helps, how can I continue? This is really quite desperate!
Big thank any help!

This dependency was not found: * worker_threads

I previously tested and used worker_threads in my project.
Now when attempting to npm run serve or npm run build I'm getting the following error:
This dependency was not found:
worker_threads
I am running node --version v14.17.2 so I know that worker_threads are supported.
I have even created a clean project with Vue CLI and when adding the following code, I still see the same error.
const {
Worker, isMainThread, parentPort, workerData
} = require('worker_threads');
I've searched extensively, but all of the problems and solutions relate to earlier versions of the node that did not support it.
I'm at a loss as to how to solve this. Suggestions are greatly appreciated.
Edit: I've updated all possible modules in the project in case there might be some sort of conflict, but the problem still persists.
My mistake.
The code I wrote to use worker_threads was originally tested in a pure node.js (sever side) environment. The code ended up being required in a Vue component, which of course is browser based, so of course, worker_threads are not available as they are server side.
A solution would be to make a server API call to the code, or to use something such as threads.js which provides a unified API for worker_threads (sever side) and web workers which are browser based (client side).

Is Node.js just used for dev-tooling on the front-end?

For my understanding, node.js is a javascript-engine which is running javascript-code without using a browser(window-global). You can use javascript on a server. But I saw now a lot of tutorials(react, angular, vue etc.). In every tutorial, I have to install something with npm. I can follow there are several dev-tools which I can use on my local machine to minimize my javscript-files or compile sass to css. But in the end, when I put my files on a webserver, I just have normal javascript-files, css-files etc. No node.js code in it, right?
My question is: React, angular, vue.js etc. are written in just normal javascript without node.js right? The reason why I use npm ist just to install every dependencies with one command, right?
A question more: Is there an any recommended order to learn all these frontend-development stuff? There are so much words I have to google it: angular.js, react, vue.js, vanilla.js, typescript, backbone.js, bower, grunt, webpack, yarn etc... I dont know where I start, so I look into few tutorials, but everytime I go through these tutorials, there is a new word(technology) I have to research.
I think you're getting your terminology a little muddled.
Node.js is a JavaScript runtime, built on Google Chrome’s V8 JavaScript engine. However, that is not to say that Node programs are executed in a browser. They aren’t. Rather, the creator of Node (Ryan Dahl) took the V8 engine and enhanced it with various features (such as a file system API and an HTTP library) to create a program we can use to execute JavaScript on our computers.
Node comes bundled with a package manager called npm which you can use to install packages (such as React and Angular) from the npm registry. These packages are indeed written in normal JavaScript (or a language that compiles to JavaScript, such as TypeScript).
The reason why I use npm is just to install every dependencies with one command, right?
Kinda. You can certainly use npm to install dependencies. However, it does a lot more that that. For example you can use npm scripts to carry out various build tasks, or you can create a package yourself and use npm to publish it to the registry.
A question more: Is there an any recommended order to learn all these frontend-development stuff?
As with everything, it depends. What are you trying to build? It's relatively pointless to learn about Node, npm, React and Angular if you are attempting to build a simple static website. If I were you, I'd define a clear goal and set about learning the technologies you'll need to reach that goal. Saying that, if you are doing anything with front-end development, learning about npm will be a good use of your time.
Here's an article by way of further reading that explains things a little more: https://www.sitepoint.com/an-introduction-to-node-js/

Installing NPM Dependencies on Firebase Hosting [duplicate]

This question already has an answer here:
Socket.io Official Chat application not work on firebase
(1 answer)
Closed 6 years ago.
I have a simple web app made using Socket.io, Express and Node.js.
Have successfully managed to push it to Heroku via Git, and it works fine. Yay!
However, I am trying to make it work on Firebase. I seem to be having some trouble installing the NPM dependencies. I didn't use Webpack or Browserify, and for Heroku, the various NPM dependencies are installed on their server, and I can leave my node_modules folder on my local computer. The docs don't seem to talk about NPM dependencies. Am I trying to do the impossible at this time? or am I missing a few critical steps?**
I believe Firebase hosting should support the various JS dependencies because if we were just doing static websites might as well use FTP and Wordpress or something. And there's much mention of web apps on their site too..
I have tried using the Firebase CLI, and reading the docs, but it doesn't say anything about specifying my various NPM Dependencies, or even ask for my package.json contents. I am wondering if it even takes notice of the package.json file so that it will install them the way Heroku does.
Am not trying to use any Firebase features at the moment, just their hosting for now, and later on will install their login and auth, which is my final intention.
Cheers guys and thanks for your help! :D
To quote one of the Firebase developers, from this forum thread:
Firebase Hosting is for static files only. As such, you cannot run Node.js scripts on it. You should look into using something like Webtask or just run your own Node.js server on something like Google Compute Engine or Heroku.
We plan to provide a solution for you to run things like you are suggesting in the future. No timeline for it at the moment.

Resources