How to use nodejs file with html file? - javascript

I have a frontend in HTML and JAVASCRIPT. I need to get value from nodejs file and display it in HTML label. So I create new node js file node.js as:
const Web3 = require('web3');
const web3 = new Web3('https://kovan.infura.io');
web3.eth.getBalance('0x9E632F36D8193a23ee76e7C14698aCF4b92869A2').then(console.log);
I include this file in script tag as:
<script src="node.js"></script>
First I want to look output in the console but it is giving an error
Uncaught ReferenceError: require is not defined
So, I try this code directly in HTML file within the script tag without including node file but still gives the same error.
Can somebody help me with this? I am new to use all this together.

Somehow, I managed to find a solution. I used browserify, which makes easy for me to run the nodejs code from my web app.
Browsers don't have the require method defined, but Node.js does. With Browserify you can write code that uses require in the same way that you would use it in Node.
browserify will recursively analyze all the require() calls in your app in order to build a bundle you can serve up to the browser in a single tag.
I referred this link: http://browserify.org/

Related

How to use node Buffer module in a client side browser - detailed explanation required please

First things first. I know that there are other questions that are similar to this e.g. use NodeJs Buffer class from client side or
How can I use node.js buffer library in client side javascript
However, I don't understand how to make use of the reference to use browserify though it is given approval.
Here is my Node code:
import { Buffer } from 'buffer/';
I know this is the ES6 equivalent of require.
I would like a javaScript file implementation of this module so that I can simply use the standard html file reference:
<script src=./js/buffer.js></script>
And then use it as in for example
return new Buffer(temp).toString('utf-8');
This simply falls over with the
Uncaught ReferenceError: Buffer is not defined
no matter how I create the buffer.js file.
So using the browserify idea I've tried using the standalone script (from the https://www.npmjs.com/package/buffer as https://bundle.run/buffer#6.0.3 )
I've created a test.js file and put
var Buffer = require('buffer/').Buffer
in it and then run browserify on it as
browserify test.js -o buffer.js
and many other variations.
I'm not getting anywhere. I know I must be doing something silly that reflects my ignorance. Maybe you can help educate me please.
These instructions worked for me. Cheers!
Here are the instructions you can look at the web section.
https://github.com/feross/buffer
Here is what the instructions state about using it in the browser without browserify. So from what you tried
browserify test.js -o buffer.js
I would just use the version directly that does not require browserify
To use this module directly (without browserify), install it:
npm install buffer
To depend on this module explicitly (without browserify), require it like this:
var Buffer = require('buffer/').Buffer // note: the trailing slash is important!

How do I use require.js?

I have a folder that contains another folder and a file "server.js", the file is the node file and the folder contains HTML and client.js. server.js has a variable that holds the port for the website, and I want to access that variable to use it in the client.js, but it keeps erroring, I tried using import statement in the client.js but it gives "Uncaught SyntaxError: Cannot use import statement outside a module". I tried using require("server.js") but learned that client-side js doesn't support require() function. I searched and found that there's a library called RequireJS, while there are some tutorials to use it, they all use the same example and it always gives the same error no matter how much I changed the code, so please help me with a detailed tutorial on how to use RequireJS.

Node.js Error: require is not defined in clientside js file

I have a Javascript file in which I have data that needs to be saved into a Mongoose schema and subsequently inserted into a MongoDB table. The schema is defined in a file in a separate directory so I tried to essentially import it by including the following line at the top of the file:
//import schema for sketches
var SketchSchema = require('../schemas/sketch_objs');
I then got the error "Uncaught ReferenceError: require is not defined"
which I found out here was due to the fact that require() doesn't exist on the client-side. As suggested in the answer for that post, I installed Browserify in order to be able to require the schema javascript file.
I couldn't really ascertain the specific usage of Browserify's functionality to achieve this but it seemed from the github readme that something like the following has to be done:
$ browserify main.js > bundle.js
where the required files in main.js will be included inside of bundles.js. I tried to doing this for the file that needed to include the schema and successfully generated the new file; however, for some reason when I run the project, I still get the error about require not being defined. Is it supposed to be that the new file generated by Browserify is supposed to be used instead of the old file? If this isn't the case, what is the correct way to require another js file inside a file on the client side?
So
you need browserify to require the JS file CommonJs way.
I do not think mongoDB is compatible with browserify, FYI, https://jira.mongodb.org/browse/NODE-698

Loading Node.js Module using Browserify

I am using Browserify (http://browserify.org/) to load a module in JavaScript. I keep getting the following error:
I have no idea why this is happening. I have a "package.json" file in a directory called "wordnet-develop", which is located in the same location as the JavaScript file.
Originally I thought that there might be a path problem. However, I did the same exact thing but with a test.js file, and it worked. So, I think that there may be something wrong with using package.json.
The beginning of the package.json file:
The beginning of my JavaScript file:
The directory containing the javascript file:
The directory (seen above as "wordnet-develop")containing the package.json file:
UPDATE
I replaced var WordNet = require('./wordnet-develop/node-wordnet'); with var WordNet = require('./wordnet-develop/lib/wordnet'); as suggested by klugjo.
It may have worked, but now I am getting a new error message:
This happened again but with 'async' module missing. I checked lib/wordnet, and it included requirements for bluebird and async, so that's probably the error source.
However, I now have no idea what to do. I'm new to node.js and modules, so I'm unfamiliar with solutions. Am I supposed to parse all of the code and find all the required modules online? Shouldn't they have been included in the module? Is the problem that I'm trying to use a node.js module in vanilla JavaScript?
I don't think what you are trying to do is supported: you have to link directly to the entry javascript file of the node-wordnet library.
Replace
var WordNet = require('./wordnet-develop/node-wordnet');
With
var WordNet = require('./wordnet-develop/lib/wordnet');

Requiring external JavaScript file

After reading all the relevant answers in SO and posts in the Appcelerator forums I still can't get this to work:
I have an application developed in Appcelerator, and I want to load an external JavaScript file in some of my controllers.
My App structure is as follows:
+ app
- assets
- controllers
- models
+ lib
- IndicatorWindow.js
...
Inside a controller I have the following code:
var uie = require('lib/IndicatorWindow');
But when I run this on an Android phone I get:
Uncaught Error: Requested module not found: lib/IndicatorWindow
I have also tried placing the lib folder outside of app, and using other paths such as /lib/IndicatorWindow and app/lib/IndicatorWindow.
I even tried using Ti.include() instead, with the same result. But I would rather use require() since I prefer using CommonJS modules.
Make a lib folder inside assets folder and paste the js file there and you would be able to require file just like you do in classic :)
Thanks
just use var uie = require('IndicatorWindow');
Also make sure it uses exports inside the JS

Categories