Using CDN vs Installing library by NPM - javascript

I recently started using NPM, but I don't understand how the files in node_modules are added to my index.html.
Case 1: CDN
For example, if I want to use jQuery via CDN, it is so simple! I add the CDN link to a <script> tag on my index.html file and $ is immediately available.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$('body').css('background','red');
});
</script>
</body>
</html>
Case 2: NPM
Now I'm trying to use node modules and npm rather than CDNs. I have done the following:
Created package.json by using npm init --yes
Installed the jQuery package with npm install jquery --save
Now, my project folder looks like this:
I have removed the script tag with the link to the jQuery CDN from index.html, but I don't understand how to add jQuery from node_modules?
I am doing this on a browser.

CDN
Use CDN if you are developing a website that will be accessible by public internet users.
CDN Benefits:
Will be cached on most browsers because it's used by a lot of other websites
Reduce the bandwidth
check for more benefits here
NPM
npm is a great tool to manage dependencies in your app using a module bundler.
Example:
assume using a webpack module bundler and jQuery is installed
import $ from 'jQuery'
...
var content = $('#id').html();
but the browser does not understand the import statement so you have to transpile the code with Webpack commands, the bundler will check all the used dependencies and bind them in a single file without any dependencies problems.
Useful links: Getting started with webpack

in addition to above, npm install packages to local also:
let your local IDE provide code intellisense and type-checking;
provide source code for (Webpack) bundling, which combines all the JavaScript files to be a (minified) single file, so no dependencies.

I might have misunderstood your question... But can't you just add this line to your index.html file?
<script src="node_modules/jquery/dist/jquery.min.js"></script>

I think you want to host jQuery yourself and use it within a web app running in the browser.
If so, you need to host this file - make it downloadable via the same web server you are using to host index.html.
If you are using Express, you might do something like this on the server side:
app.use('jquery', express.static(__dirname + '/node_modules/jquery/dist/'));
And then reference the file in index.html:
<script src="/jquery/jquery.js"></script>
See Express' manual for serving static files.
If you're not using Express, you need to consult your web server's stack manual. No way to guess unfortunately - I gave an Express.js example because this is probably the single most popular package like that for node.js.

It won't be "filed" unless you link the js file in your template (replacing the CDN one). A bundler output or your compiled and public js file needs to be linked instead of the CDN link URI.

Related

Export npm JS package as independent script

I'm using npm package manager for my project.
Dependency in my package.json file:
"dependencies": {
"litepicker": "^2.0.11"
},
litepicker (javascript library)
File structure:
- assets
-- js
--- main.js
- index.php
How do I move litepicker js file into assets/js/ folder using npm script?
1. You can use laravel-mix
if you don't use laravel framework
you still can use laravel-mix
Sitepoint - Use Laravel Mix for non Laravel Project
It's bit complex since u need to deal with other stuff. And there is another option too
2. Use CDN from unpkg or JSDelivr
unpkg is a fast, global content delivery network for everything on npm. Use it to quickly and easily load any file from any package using a URL like
Example unpkg - https://newbedev.com/php-sweet-alert-in-js-laravel-8-code-example
Codepen Litepicker using JSDelivr
<script src="https://cdn.jsdelivr.net/npm/litepicker/dist/litepicker.js"></script>

How to include script located in node_modules folder using codeigniter 4?

I need to install this plugin on my application, so I followed the instruction and executed:
npm install --save #ckeditor/ckeditor5-upload
Usually, to load a plugin I create a file inside the load directory which contains the plugin name, in particular:
Views
load
ckeditor.php
which contains this:
<!-- Push section js -->
<?= $this->section('js') ?>
<script src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/ckeditor.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/translations/it.js"></script>
<?= $this->endSection() ?>
so to include in a specific section of my app, I simply do:
<?= $this->include('App\Views\Backend\load\ckeditor') ?>
and this will inject the plugin into my app, but how can I do this with local dependencies installed via npm?
It looks like you want to use NPM modules client-side, which you actually can do. Check out Browserify: https://browserify.org/
It allows you to bundle up all the dependencies of NPM modules into JS code that you can deliver to the client, allowing you to use those NPM modules as 'native' functions in your client-side Javascript.
NPM (node package manager) packages are used for applications that run on node.js. Since your app is using PHP on backend, it's not suited to import backend JS packages.
In general, you can't use a backend JS package on a frontend because it usually contains code that is not available in the browser JS (such as accessing local files).
You'll need to find some other package that does a similar thing but for combination of PHP and browser JS.
Note: Configuring your HTTP server (usually Apache or Nginx) to publish the node_modules and link the (public URL of) NPM package from the frontend is a bad practice. Plus this particular package won't work anyway because it's using features that are not available in the browser JS.
In order to use CKEditor in your PHP application, The simplest way is to use CKEditor online builder tool and download complied version of the CKEditor code, and place it in your PHP application.
Visit: CKEditor online build
Follow the below steps:
Visit the above link of the CKEditor Online Build Tool.
Select Choose editor type as your desired editor.
Select the desired plugin that you want in your editor.
In the next section drag/drop and customize your editor layout.
At last select language and download the zip file.
Extract it and place it in your application's public folder eg.
public/ckeditor5.
Now navigate to the downloaded folder and open the index.html under
sample folder (public/ckeditor5/sample/index.html)
Copy last both scripts and place them in your working file where you
want to use CKEditor. Don't forget to modify the relative path of
your ../build/ckeditor.js file.

NPM Jquery Client vs Server Side

I am fairly new to node and npm so this is a theoretical question.
I want so start using Jquery on my websites, so I did npm install jquery and this created a node_modules directory inside my webpage directory along with my html, js and css files.
In order to make it work I had to add the following in my head tag in html <script src="node_modules/jquery/dist/jquery.js"></script>
Question 1) Why npm installed node_modules directly into my directory? I would assume it would install it in my global directory usr/local/lib/node_modules
Question 2) If I would host the website somewhere else this would not work correct? I assume this method only works on client side.
Question 3) How would I have to setup my html or js in order to import jquery?
Apologies if this is a stupid question, but I'm trying to understand the mechanics of what I program.
Why npm installed node_modules directly into my directory? I would assume it would install it in my global directory usr/local/lib/node_modules
npm is designed to manage dependencies for a project. While you can make it install modules globally, this is really only intended for whole applications that are distributed via NPM.
If I would host the website somewhere else this would not work correct? I assume this method only works on client side.
The src attribute needs to be a URL that resolves to the script file. If you don't upload the script to the right place then it won't resolve.
How would I have to setup my html or js in order to import jquery?
With a <script> element.
Note that npm is not very good at managing dependencies for a client-side JavaScript project by itself. It only becomes useful when combined with a module system and a bundler such as browserify.

How to publish a client-side script using npm?

My nodejs package contains code for execution both on the backend, and a single .js file for execution on browsers. To make use of the browser script, it has to be put into a script element in an HTML file, obviously. My question is if there's a standard practice/convention with respect to how that browser .js file should be exposed to npm (or webpack or whatever) in a way that is independent of webpack, gulp, grunt, or other packaging tools. For example, by placing it into a scripts/ dir somewhere, or by including a simplistic nodejs/expressjs 3-line middleware that, when accessed via http://example.com/scripts/myscript.js, will send my script's content to browsers.
I've found this article, but that merely explains the trivial details of how to use a script element in an HTML page, rather than how to make npm install a script in standardized asset folder for pickup by static serving routes, asset management tools, or similar.
If you are publishing your package on NPM, an alternative that could work in your situation could be by using https://unpkg.com/ CDN. All packages that are published on NPM are available via this CDN.
Then in your frontend code you could simply reference that single js file you need.
<script src="https://unpkg.com/yourpackage/path/to/your/file.js"></script>
CDN is your best bet if you are not packing the web content in the same package. If your web contents are in the same package you could use
"scripts": {
"prepublish": "cp <source_path_of_file.js> <destination_dir>"
}
in package.json to pack it as a part of your npm package.

include script not found using npm version of angulajs

I install angular via npm and in my public/index.html I do
<script src="/node_modules/angular/angular.js"></script>
And it's 404 in chrome console, any clue how can I include the script properly?
Your node_modules folder is very likely not publicly accessible.
You have different options to solve this, including
bundling your angular library with your code into a single script file, e.g. using webpack,
placing the angular.js file in the public folder next to your index.html and embedding it from there and
loading the angular library from a CDN, e.g.:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
Which option is the most suitable depends heavily on your use case.
I recommend to use a CDN to load AngularJS in your project:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
Recommend Reading: Why use a Content Delivery Network (CDN)?

Categories

Resources