I've been trying to use a npm module called solc in AngularJs but I can't seem to succeed in anyway.
I know it's meant to be used with a Node application but I was wondering if there is a way to use it client side.
I've been trying to use Require.js and require every file included inside the git-repo but there are too many dependencies so I was wondering if there is another way.
I've been looking at browserify but that doesn't seems to do exactly what I need.
Does anyone have any idea?
You can use a npm package in browser applications if the package does not have any dependency on Node's built-in APIs. That's because Node APIs are available on server side and not on browser.
If you see here and here in the github repo of solc, you will see that it requires Node's built-in modules path and https. So it will not work in any browser application.
Related
I am trying to build a plugin for Adobe XD. I'd like to use some npm packages along with some Node.js APIs inside my code. Would this be possible?
Javascript support page says you may be able use some npm packages (some might require webpack). However, Node.js apis are not supported.
Can I use npm packages or Node.js APIs?
You may be able to use some npm packages without modification, but
chances are good that you’ll need to use webpack or rollup in order to
generate a bundle.
Node.js APIs themselves are not supported.
You can use some npm packages in your Adobe XD plugin, but you need to bear in mind the following constraints:
XD's require function does not follow node-style resolution. That is, require('module') won't automatically resolve to node_modules/module/index.js. To address this, you'll want to use a bundler, such as webpack. For an example using webpack and React, see the ui-hello-react sample.
The XD JavaScript environment does not supply a lot of node APIs that many node modules may rely on. For example, npm packages that use Node's fs module will not work inside of Adobe XD plugins. Purely algorithmic npm packages should work, however, as long as they only rely on the JavaScript specification itself.
Furthermore, the HTML5 DOM API environment supplied by Adobe XD may not be sufficient if your npm package relies upon specific browser APIs. For example, the Web Audio API isn't available to Adobe XD plugins, and so any npm packages that require the use of that module wouldn't work.
For some packages, it may be sufficient to add stubs or polyfills. For example, you could stub requestAnimationFrame if a module required it, like so:
global.requestAnimationFrame = cb => cb();
Now this isn't a functional rAF, but it might be sufficient for the package you're using.
I found a library on github that I would like to use but the download instructions only mention using npm but I am not using a NodeJS project (just a basic html,css,javascript front-end with no back-end server). Am I still able to use that library or is it a lost cause? Is there another way to download it without using npm?
Is there another way to download it without using npm?
If it's on github, then you can checkout or fork the repository as you can with any other git repo.
Am I still able to use that library or is it a lost cause?
Whether or not the library will work without Node will depend on the library.
If it presents itself as a Node module, then you'll probably have to modify it (or find a compatible module loader for browser-side JS).
If it depends on NodeJS features (such as the filesystem API) then you'll be out of luck (unless, for example, you polyfill them to work across HTTP)
If you use a build tool such as browserify, or webpack, you can author scripts that require node modules and the build tool will generate a script that includes all the necessary dependencies (assuming that the necessary dependencies are compatible with client-side JavaScript environments).
Downloading dependencies would still be done via npm, but only for local development. Your server would only need the generated script.
Alternatively, if the script is on github or any other repo online you may be able to download it directly. Many modules are published using UMD, which would allow you to use the script using various inclusion methods.
I'm struggling how to integrate client-side modules like - just as an example - Apollo Client
into the qooxdoo-specific generate.py workflow so that they become available in the browser.
According to the installation notes:
To use this client in a web browser or mobile app, you'll need a build system capable of loading NPM packages on the client. Some common choices include Browserify, Webpack, and Meteor 1.3. [...]
Side note: I currently use Babel 6 to recursively transpile all my sources from a separate folder source.es6/ into the "official" source/ folder, which is then watched and processed by generate.py. Is it possible to use this somehow as a solution to my question?
OTOH, I would love to see at least some kind of integration with Webpack, Browserify or SystemJS.
I suggest you do the following. First, create a loadable package(s) from the Apollo Client and its dependencies, e.g. using Webpack. Then make sure these package(s) are loaded in your web page before you load your qooxdoo app. Then the Apollo API is available to your qooxdoo code.
If you choose to deploy the Apollo packages with <script> tags you can let generate.py do that by using the add-script config key.
I suggest you place the output of the Webpack run in your qooxdoo project's resource path and add #asset hints for those files in your main qooxdoo class. This will make sure they are copied into the build version of your app, and you can use the relative URI to these files, either in your index.html directly or in the add-script config settings.
I don't think your transpiling with Babel6 will help here. The Apollo code is already consumable and you woudn't want to disect it and make it part of your qooxdoo (es6) source tree, let alone its dependencies. I would rather treat it as a shrink-wrapped JS library as I described that is added like a resource.
I'm sorry if this doesn't count as a "Programming Question" but I found it relevant since this will make me able to do programming in the Podio API.
My question/problem is that I can't figure out the correct way to set up the Podio JavaScript SDK/API scripts. I followed "http://podio.github.io/podio-js/" but it really only explains so much.. Mostly about Node and that I need to use Node for it, but isn't there another way like simple Ajax calls?
Reason being, I don't have the possibility of running a Node server in my server background, just to make API calls, it may be effective but it sounds kind of stupid when so many other API's out there doesn't require this.
Thoughts?
podio-js is a Podio JavaScript SDK for node and the browser.
... which means you don't necessary need Node.js. To use NPM module in the browser you'll need a bundler, like Webpack:
npm install podio-js --save
npm install webpack --save-dev
Then in your app.js:
var podio = require('podio-js');
// follow the tutorial
To bundle the app:
./node_modules/.bin/webpack app.js app.bundle.js
Then include the bundle in your HTML via script tag and voilà:
<script src="app.bundle.js"></script>
What i need is a way to bundle all my javascript dependencies into one javascript file with Webpack (Just like with socket.io-client), but i can't do that with twilio.js.
I can see that the latest of twilio.js is listed here.:
https://www.twilio.com/docs/client/twilio-js as a script tag to:
//static.twilio.com/libs/twiliojs/1.2/twilio.min.js
But this is just a loader script for building the real twilio.js library here:
https://static.twilio.com/libs/twiliojs/refs/82278dd/twilio.min.js
And none of these supports Webpack.
https://github.com/twilio/twilio-node also exsistes, but this is for node.js only - not just plain client side javascript.
So my question is, is there a way to require the twilio.js library with Webpack ?
This answer is for Twilio.js client version 1.3.16 (script file, documentation).
The Twilio codebase is pretty bad. They don't publish their code to npm, and simply loading the twilio.js file from their CDN has side effects, including reading from window and looping through all script tags on the page. This means, even with the below answer, the client code can't be loaded in node, blocking server side rendering and testing, etc.
I published the package to npm as a mirror of the code, but it's not straightforward to use. Webpack can't correctly handle whatever bogus require structure they have set up. First, install:
npm install --save twilio-client-mirror
Then to use, require as normal:
import * as loadTwilio from 'twilio-client-mirror';
However, you can't actually use the loadTwilio object. You have to reference the global Twilio object, injected by the script:
const Twilio = window.Twilio;
Twilio.Device.setup(token);
...
This is a first attempt I made to try to include this flaky code inside a modern codebase. Hopefully with the coming 1.4 beta they will address these issues.
I know this is late, but I, too, just wrestled with this issue. Being new to Node, TypeScript and Webpack, I failed to understand that Webpack should be used for client-side scripts, while the Twilio-node library is a server-side library (as discussed loosely here). In other words, you shouldn't use require('twilio') in any client-side scripts...only Node scripts.
I had success with the following:
Add <script type="text/javascript" src="//static.twilio.com/libs/twiliojs/1.2/twilio.min.js"></script> to my main .html page
Use var twilio = require('twilio'); inside of a Node (server) script...not in client-side JavaScript (for example, add the Twilio calls inside of API methods, which can be created using a framework such as Express)
If you happen to be using TypeScript for Node scripting, use a transpiler such as the native TypeScript transpiler tsc (easy to do from a command line). If using JavaScript, use GulpJS (my fave) or GruntJS to help you consolidate and even run your Node server-side scripts
Use Webpack for anything else
Again, I'm new to this, so I'm open to input or corrections if I've stated anything incorrectly.