So I've created a simple program using node.js and a couple of libraries using puppeteer and kijiji-scraper from npm and I want to run it on a webpage like Github pages. In the past, I've had success using a CDN to import the node library I needed to do so by following the instructions on the readme. But for these packages, there aren't any instructions for importing using CDN. Is it just not possible to do so or am I missing something?
Packages:
https://www.jsdelivr.com/package/npm/kijiji-scraper
https://www.npmjs.com/package/puppeteer
NodeJS and the web have fundamentally different moduling systems. You won't be able to import libraries written for Node in the web. If the libraries are pure JavaScript libraries (not relying on the standard library or native modules) or are browser-based libraries relying on the DOM, then you can use Browserify to compile the library's source code into a single file and include that on the web page with a <script>. Otherwise, you'll need to restructure your application around this limitation.
In your case however, it looks like Kijiji is a client-side library and Browserify will be your solution here.
You can come to this conclusion by skimming some of its source code. You'll notice that there's a require call in it. The require function doesn't exist on the DOM API and hence will throw the error you're getting.
The solution I would use in your case would be a) Grunt or Gulp or b) compiling the code and import them statically.
If you have a more complex build chain, I would suggest including the browserify stage in it. I would also not use the CDN based library, rather use the NPM library. The browserify stage will bundle the library and all required dependencies into a single file that can be used in HTML
<script src="/static/kijiji.js"></script>
<script src="/app/index.js"></script>
I'm not sure what your file structure looks like but you get the idea.
Related
I'm afraid this will be a stupid question. But I don't manage it to use my JS-Package (for example jQuery), which i have installed with Visual Studio Nuget-Package-Manage in my .net 5 Blazor Server-App.
What i did:
Installing the Package. Here I installed jquery.datatable which includes jQuery itself:
Image of my Project
But now, i don't know how to include it for example in my "_Host.cshmtl"-File:
<script type="text/javascript" charset="utf-8" src="???WHERE IS IT????"></script>
Where is my *.js-File? For example: query.dataTables.js ??
I found it on "C:\Users\xxxxx.nuget\packages\jquery.datatables\1.10.15" and
"C:\Users\xxxxxx.nuget\packages\jquery\1.7.0"
Do i realy have to copy it to my wwwroot-Folder manualy?
If so, why i should use the package-manager?
Thanks for your help!!
Traditional web applications using JavaScript normally load the file from a local folder or from a web CDN (e.g. CDNJS.com etc). This is then loaded from the page (often referenced from a layout file).
Early on it used to be the case that JS libraries could be loaded via NUGET packages but this approach is now discouraged. It had to fix the creation of the script in a set location, e.g. /Scripts and there was no flexibility. Almost all client-side libraries are now in NPM as packages or on CDNs like cdnjs.com.
The current approach for .NET web apps to load client-side assets is either use LibMan or NPM and have some sort of webpack arrangement to compile/pack/copy. You would never load the JS from a /packages folder in the way you suggested.
Blazor Approach
Blazor (since .NET 5.0) can load either embedded JS modules (from your code), or from a URL directly.
If you want to package some JS with your application you should look at Razor Component libraries. This allows static assets such as JS files to be embedded in the code, which Blazor makes available via the _content route, e.g.
_content/LibraryName/myfile.js.
Because Blazor is a SPA you don't include JavaScript using a <script> tag in your HTML, you should load it as a module and reference it there.
This documentation explains it:
https://learn.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-5.0#blazor-javascript-isolation-and-object-references
DataTables, JQuery
So should you include jquery.min.js and jquery.datatables.min.js in your library? I'd suggest a better approach is to load from a CDN - your package is smaller and there is a chance the URL is already cached and loaded, e.g.
var module = await js.InvokeAsync<IJSObjectReference>(
"import", "https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js");
This loads the module on-demand from the URL directly. You'd also need to load jquery before this.
Finally I'd make this observation: are you sure you want to go down this route?
There are several native Blazor libraries on NUGET for rendering and handling tables. You'll find it much easier to go this way rather than try to patch jquery-based libraries into a Blazor app.
I had a similar issue. Not with the same libraries, but I was wanting to do something that wasn't available in a Blazor library yet. I needed a video player that could handle a certain format that the default HTML 5 video element can't handle. There is an open source player, videoJS , that did the job, but it's a javascript library. It's available on npm and there are cdn's - however the plugins (as far as I could tell) weren't on CDN - so I had to go down the npm route.
When you install an npm package it puts it into a hidden node_modules folder. Unfortunately even if you point to that path or even copy the file in with your other js files it won't work. Npm packages are designed to be run by nodejs, rather than directly in the browser. In order for them to run in a Blazor app (in the browser) you have to do an intermediary step of transpiling it into a browser friendly format.
What I really wanted was a re-usable component, that wrapped the javascript.
It took me a while to get there but I finally figured it out. I've written a series of articles on my blog detailing it. The final one ports everything into a Razor Class library that can be consumed with no knowledge of the underlying js. The fourth article deals with importing npm libraries and using them within a web assembly app. I'll put the link below but essentially the process is:
Create a folder eg JS and initialise it for npm (npm init -y)
Install the required npm packages (npm install --save)
Create a src folder within the JS folder that that you will put your own js files in
Create an index.js file in src that imports the required javascript modules and exports what you want to consume
Install snowpack (npm install snowpack --save-dev) (or webpack but I found snowpack seems to work better)
Configure snowpack to process the contents of the src folder into wwwroot/js (without snowpack or similar the files in the npm package won't be in a browser or blazor useable format)
use javascript isolation to pick up your index.js file from wwwroot/js
See blog post here for full details (It's part 4 of a 5 part series - part five puts it all in a razor class library so you can add it to a project without ever seeing the javascript)
I know this is late but this SO question was one I kept coming across when searching on how to do what I wanted, so thought I'd put my solution here in case it helps anyone else searching for what I did.
I'm developing a library in TypeScript.
This library uses the https://github.com/Simonwep/pickr library.
I would like to make my library available so users can use it, but question is: do I need to bundle pickr library or just put a reference in the package.json?
I tried to use the library in a sample project and in dev mode all works since it loads from node_modules, but when I build the project and try to load it fails to load it.
It works only by importing the library using
<script src="https://cdn.jsdelivr.net/npm/#simonwep/pickr/dist/pickr.min.js"></script>
If library will be used in a web browser I made it so the script tag is automatically added.
But what if someone will use the library in an ionic project for instance which will run on a tablet?
In this case Pickr library needs to bundled in the final build.
Is this an automatic process? What's the correct way of using a third-party library in this case?
If you want pickr to get bundled with your code you will have to
List it under dependencies
Import it in your code (see pickr docs)
If its not imported in your code it wont be bundled.
If you want to tell the user to manually add pickr when he uses your module you can list pickr as a peerDependency in your package.json
I have started to learn react and I am very confused with the concept of packages.
and why we can't just use a simple link as cdn and there is a module which i don't understand it and what's npm and why i have to use it with react
Not trying to give the definite answer here, but trying to explain the 3 terms as simple as I can:
A module is just a file containing lines of JavaScript code.
A library uses one or many modules to provide a set of features.
A package is a downloadable, versioned library. Think of someone putting it in a box and shipping it to you, so you can import it and use it in combination with your own code.
so I came with conclusion and hope you tell me if I get it right or not .
-Module : it is justba javascript file but it's different from normal script that it has its own scope so you have to use import or export to exchange information between modules.
-Library : it is a group of modules or scripts that it is responsible for the function you want .
-package : can be one or more libraries but it is also contain files that don't deal with the functionality but it's only role to make sure the libraries and functional file work properly .
like react package it is come with react library deals with the functionality and also has babel compiler to make browser read and understand react library.
It is very much possible to use a simple link such as a CDN. Many packages also have links available, such as material UI. However, it quickly becomes unmanageable to use CDN links when your project grows, and it can affect performance and load times of your site.
Npm stands for Node package manager. It handles packaging for Node, where it would not be suitable to use a simple link.
It turns out that it is possible to also use npm for web applications, by combining it with a bundler. The bundler (such as webpack) takes all of your modules (JavaScript files and npm packages) and bundles it together so that you get a single script which you can run in the browser.
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.
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.