How to develop client side library and npm library ? - javascript

I would like to develop a JS test library for client & node.
I need to develop for two different repo's?
Lets take for example QUnit:
for client side I will use:
https://code.jquery.com/qunit/qunit-2.3.0.js
But for node develop, I will use :
npm install qunitjs
Those are 2 different code repo's, aren't?
For the example, lets puts aside the testrunner, etc..
Thanks!

Originally the "npm" used to stand for the "Node Package Manager".
Currently, the npm Registry is a public collection of packages of open-source code for Node.js, front-end web apps, mobile apps, robots, routers, and countless other needs of the JavaScript community.
And npm is the command line client that allows developers to install and publish those packages.
See: https://www.npmjs.com/about
So you can use npm to package front-end code just like you can use npm to package Node code. Sometimes it makes sense to publish two packages - one for frontend and one for backend - but sometimes you can have just one.
For packaging frontend code there are more options like Bower: https://bower.io/
For packaging Node code the most popular choice is npm but you can install code directly from GitHub or other git repos.
As an example you can see my module tco that is on npm:
https://www.npmjs.com/package/tco
But also on GitHub:
https://github.com/rsp/node-tco
So you could install it with npm either from the npm Registry or from GitHub:
npm install tco # <-- from npm registry
npm install rsp/node-tco # <-- from github
Additionaly you can use it on the frontend from the CDN available for all code on GitHub:
<script src="https://cdn.rawgit.com/rsp/node-tco/v0.0.12/tco.min.js"></script>
If you want your code available on that CDN as well, see RawGit:
https://rawgit.com/

Related

Where to install DataTables in slim4 by Daniel Opitz

I purchased the eBooks by Daniel Opitz. I am on page 226 of the books because I want to implement data tables in my project. In the books it reads.
DataTables Setup
DataTables.net is a very flexible table plug-in for jQuery.
You have to setup jQuery for Webpack first.
To install the DataTables Core library, run:
npm install datatables.net
npm install datatables.net-dt
To install the DataTables Bootstrap 5 styles, run:
npm install datatables.net-bs5
npm install datatables.net-responsive-bs5
npm install datatables.net-select-bs5
Add a new webpack entry in webpack.config.js:
In my naivete, I can't figure out on my own where I should be running the npm install. I was hoping this would be the fastest route to get help.
I have enjoyed learning the skeleton that he published. Most things have been straight forward and not to hard to figure out. This one has me stumped.
I did some more searching looking for the package.json location.
https://odan.github.io/slim4-skeleton/frontend.html
https://odan.github.io/slim4-skeleton/directory-structure.html
I looked over the directory structure and still not obvious to me where the npm should be executed.
Most package managers work by using a configuration file found in the root directory for the tooling you're trying to use. Generally, the assumption is these go in the root of the project. For instance:
/composer.json # PHP's Composer
/package.json # Javascript's NPM
/requirements.txt # Python's PIP
These are typically created by the package manager:
composer init
npm init
pip freeze > requirements.txt
Here are a some articles that can help explain this process:
https://getcomposer.org/doc/01-basic-usage.md
https://docs.npmjs.com/creating-a-package-json-file
https://learnpython.com/blog/python-requirements-file/
I'll also note many package managers will use a lock file, which records what was the last resolved and installed packages. The files above, in other words, depict what should be, while the lock file depicts what was (last) installed.
Your lock file should be handled with care and committed to the your project's repo. When you remove it, you are telling that package manager to recalculate the installed packages list and you may have subtly different versions (leading to potential bugs).
/composer.lock
/package-lock.json

How to make NPM package manager refer to my version of a library?

I want to make a bug fix in an NPM library.
How to make my software using package.json to refer to my version of the library (probably a directory on my disk with the library) rather than to the "standard" version of the library from npmjs.org, so that I would be able to debug my version of the library?
You just need to run npm install like you normally would. The only difference is that instead of doing npm install <package-name>, you're going to do npm install /path/to/local/package
Here's an article explaining in more detail

Why nodejs package on github has diffrence with the same package downloaded by npm commit?

I download nodejs package by commit: npm install -g package_name
But I find some package downloaded has diffrent files with ther same package on Github.Why?
A developer creates a package when he thinks the code is stable, and continues developing on future updates.
So github code is Work in Progress code for the next update, npm package is the latest stable version of the package.
In above case, if you want to see the npm package code in github look for the tag with the package version.
Also files in npm package can be compiled code while github contains the source code. Using .gitignore a developer can exclude compiled files from github repo and using .npmignore a developer can exclude source files from npm package (not often the case, but can be done)
So the reason for difference in code can be one of these.

What is the step-by-step procedure for installing any npm module with Aurelia CLI?

I wanted to install jquery and found instructions here:
http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/contact-manager-tutorial/4
I then wanted to install "moment.js" and found instructions here ( I am not using typescript) :
How to import Moment-Timezone with Aurelia/Typescript
To install both of these with the Aurelia CLI the procedure is to install the respective npm module and then to manually modify aurelia.json in some way so the app recognizes it.
In the case of moments the instructions then say to place an import at the top of app.js , but this is not the case for JQuery.
First off , is there any way the changes to aurelia.json can be automated ( like a regular node.js package.json) so I don't need to manually do it and second, how do I know what modifications I am expected to make to aurelia.json ( or app.js or any other file) for the module I want to install?
With a basic node.js app its pretty simple , just npm install. With Aurelia its much more confusing.
Edit: There is also JSPM which I've read is used for front end libraries like the ones I mentioned above. However, the links with instructions for installation that I posted are not using JSPM.
Edit
I found some of the answers here:
http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/the-aurelia-cli/6
The CLI is still under development. I think the automatic adding of a package might some day be included in the CLI itself, for example with an install command.
The extra registration is required to register the package correctly for usage with RequireJS (http://requirejs.org/). And if the plugin exists of more than just 1 file, this registration is a bit more complex then just adding the name of the plugin.
There is an experimental CLI task here https://github.com/martonsagi/aurelia-cli-pacman that will do the automation for you.
Which can be installed by running:
npm install aurelia-cli-pacman -D
The above will install the package manager and register/ include itself in the tasks in your current project (be sure to run it with install, because npm won't run the post install script if you run it the i shorthand). Next, you can run the following command to install an extension:
npm i aurelia-interactjs -S
au pacman i aurelia-interactjs
The only downside for many might be that currently there aren't that many registry entries, but I think the author of the package would be very happy if you help him out by creating a pull to extend the registry. Would take you some time to figure out what would be the correct install/ import settings, but you will help out someone else and make them happy when they hit the same problem you experience :-).
JSPM has a same sort of issue around this, only is more matured/ the registry is bigger and/ or authors added specific information for JSPM installations to their package.json. For example: To install the above plugin with JSPM it will use the following highlighted section https://github.com/eriklieben/aurelia-interactjs/blob/master/package.json#L72,L86. The same is currently not possible with aurelia-cli, because the installation is done by NPM instead of through JSPM that redirects it to NPM.
If the author of the plugin didn't specify the JSPM section in the package.json, you would most likely and up with the same sort of issues. JSPM has a similar registry (https://github.com/jspm/registry/tree/master/package-overrides/npm) as aurelia-cli-pacman.

Can meteor run without dependencies on external services?

I am trying to build an application for a local private network (with no access to the web) using meteor. From my research, I can't seem to find a way to take meteor 100% 'offline' meaning, no dependencies to web services to build / run.
I've looked at the following links - How can Meteor apps work offline? and here - https://groups.google.com/forum/#!topic/meteor-talk/tGto0cCsvXA
yet neither threads give a clear cut answer on if it's possible and how to go about formulating an approach.
I am hoping someone could provide guidance on how I would go about removing the meteor framework dependencies for online services. If this won't be possible, other suggestions for frameworks that play well for local private network apps would be most appreciated.
If I get you right, you wish to build a webapp that is to be deployed on a local network.
If that is indeed the case, then the answer is yes.
An example setup would be:
a server computer with linux (ex: Ubuntu server)
node installed on it (0.10.29 is necesarry for a 0.8.3 meteor app - see: https://askubuntu.com/questions/49390/how-do-i-install-the-latest-version-of-node-js)
mongodb installed and running as a service
then on your dev machine run
meteor bundle --directory /your/independent/app
Copy the app folder to the target machine
Though you will find more information in the bundled README (see below) I use the following bash script to start my app
rm -rf programs/server/node_modules/fibers
npm install ~/.meteor/tools/latest/lib/node_modules/fibers/
# npm install fibers#1.0.1
export MONGO_URL='mongodb://localhost/survey'
export PORT=3000
export ROOT_URL='http://127.0.0.1'
~/bin/node main.js
And that's about it. With these steps you can deploy an app created by meteor on any machine. The only dependencies being node (specific versions) and mongodb.
README (generated by meteor bundle)
This is a Meteor application bundle. It has only one dependency:
Node.js 0.10.29 or newer, plus the 'fibers' and 'bcrypt' modules.
To run the application:
$ rm -r programs/server/node_modules/fibers
$ rm -r programs/server/node_modules/bcrypt
$ npm install fibers#1.0.1
$ npm install bcrypt#0.7.7
$ export MONGO_URL='mongodb://user:password#host:port/databasename'
$ export ROOT_URL='http://example.com'
$ export MAIL_URL='smtp://user:password#mailhost:port/'
$ node main.js
Use the PORT environment variable to set the port where the
application will listen. The default is 80, but that will require
root on most systems.
Find out more about Meteor at meteor.com.

Categories