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.
Related
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.
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.
I wrote an editor in HTML/JS that I want to use for multiple Electron based applications and a website.
For testing purposes I have package all dependencies, some are npm modules, some are font files, some are images, into a single file using browserify. For development I find this quite attractive as npm take care of keeping the packages up-to-date and browserify build even things like images and CSS into a single JS file. And included this bundle using a script tag in a html file.
Now I would love to get this onto npm to use as a dependency for other projects. But frankly I am at a loos as to how to do this.
Some blogs suggest to use:
module.exports = mymodule
But I want people and myself to be able to either get a single file and insert it using a script tag to get a global function to start my editor as well as require it using npm for Electron based apps.
startEditor = require('mymodule')
<script src="path/to/mymodule"></script>
Should both be valid ways to use the editor.
You can see the current state of the project on GitHub
Question 1 :
I am installing my project dependency libraries using npm and it gets stored in the npm_modules folder. Is it necessary to keep the copy of library like angular.js,angular-route.js in lib folder or vendor folder? I could see few people are using lib folder or vendor folders to store the library in the permanent manner. I am confused by seeing this.
Question 2:
Do I need to copy/paste the node_modules folder to production or just run the npm install command on the project folder's command prompt to install all the dependencies in production. How does a dependency library get promoted to production?
Thank you kindly for your advice.
It all depends on how you need to deploy your site to production, really. Ultimately, you will probably want to bundle all your JS files into one or a few files, which are minified and sent with gzip compression.
How you bundle them is up to you. There are quite a few options:
Browserify
Webpack
Grunt / gulp build process
And many more besides
As to whether you need to keep a copy of these bundled javascript files under version control, well I think that boils down to 1 key question: can you run a build process (such as one of the tools using NodeJS) on the production server, or on a build server that creates a zip file or installer? If so, then you don't need to include them, just get the build server or production server to check out the latest copy from version control, npm install and then run the build process.
But if the best you could do is have the production server check files out from source control, then you would want to include the final versions of the files to use in the repository.
Keeping generated files, such as your bundled javascript files, in your source control repo should be avoided where possible. Because otherwise, every commit has to contain the changes to the source files, and the corresponding change to the generated files as well. And the latter is just noise, and has to be ignored by every developer looking at a diff/patch for a commit.
Node has a simple module loading system which uses require() method call to load modules from different locations in the root folder.
E.g.
var qr = require('qr-image');
I am trying to do something similar in grunt but i am unsuccessful with that.
I had added this module to package.json file in the following fashion and then ran npm install at root directory of the project.
"devDependencies": {
.
.
.
"qr-image": "^2.0.0"
},
Now whenever I use require I get the following error on console and my code breaks.
ReferenceError: require is not defined
Please suggest as how to use the npm module in Grunt based project, Thanks.
The require function isn't available in web browsers. Instead it's part of nodejs, which is a server-side language (e.g., something you might run directly from your computer terminal, not in a browser) and used to load dependencies in that language.
In a web browser, I usually just include my dependencies as additional scripts on the page, e.g.,:
<script src="path/to/my/dependency.js"></script>
<script src="path/to/my/code.js"></script>
Some other options are RequireJS or what's listed in this question or as more of a general purpose dependency manager for front-end code: Bower.
Looking closer at your question, it's likely that the "qr-image" npm dependency won't work in client-side code for you (since it was built to run via node in server-side code).
A quick search for QR code client-side code brought up this SO post, which points to the QRCode.js project for client-side QR code generation—I haven't used it, but it looks like a step in the right direction for what you're working on.