Should I include adminlte in packages.json / composer.json file? - frontend

Should I include adminlte in packages.json / composer.json file?
Is there necessary to include it in my packages.json / composer.json for my FE library?
Or I just download the zip file add to my public/ folder will be easier?
Since I am using version control, I will easily find out the file changes.
Is anyone added to their packages.json / composer.json? What is the advantage?
Anyone mind to share their workflow. I found that everytime have new update. That will be challenged to update.
I think it is same goes to other Front End Framework.

You have to include the needed functions, include the whole package if this isn't expressly needed could lead to additional security problems under certain circumstances.
I suggest you to give a look to AdminLTE structure.
https://adminlte.io/themes/AdminLTE/documentation/index.html

Forget everything. AdminLTE can be installed using multiple methods.
Try this:
Via npm
npm install admin-lte --save
Via composer
composer require "almasaeed2010/adminlte=~2.4"
Via composer
bower install admin-lte

Related

Install a node package without its tests, readme, etc

Is it possible to install a package via npm and exclude its tests and other files not necessary for using it?
Many packages include a lot of unnecessary files, I've seen some of them even include JPEG images for some testing - I don't want to download that, I just want to use their APIs.
You can't, because npm downloads all the files whether it's required or not. However it is possible to import part of the npm library in your app.
If you want you can delete unused part manually from node_modules folder. But I'll not recommend it.

How to modify an npm package built with TypeScript

I want to try and make some changes to a package published in npm? (I've suggest some changes as an issue but I think they are simple enough for me to attempt them).
https://www.npmjs.com/package/bt-presence#contributing--modifying
The author supplies some information on how to modify the package, but not really enough for someone doing it for the first time.
Where should I clone the GitHub repo to? The folder where the package is installed? I tried it in my home folder and that would not build (unmodified).
The command npm run build - where is this run from? The root folder of the package where the package.json is?
Will I need to modify the package.json?
In general what is the best way to develop something like this for npm? I've worked on packages before but they were simply Javascript.
If you want to work on the bt-presence package in isolation, you can put the cloned repository anywhere. If you want to use your modified version of bt-presence in combination with an application, my recommended approach is to register bt-presence as a dependency in the application's package.json file with the version set to a relative path to your bt-presence repository; then running npm install in the application will make a symlink from node_modules/bt-presence in the application to your bt-presence repository.
npm run build should indeed be run from the root folder that contains the package.json of bt-presence.
If you just want to change the code of bt-presence, you won't need to modify its package.json. You would only modify the package.json if you need to change any of the settings in there, e.g, if you need to add additional dependencies to your version of bt-presence.
None of the above is really specific to TypeScript. (Some JavaScript packages have build processes too if they need to transform or package the JavaScript files in some way.)

Build strategies for utilizing npm packages

This must be a commonly solved problem, but I cannot find a whole lot on Google/SO so far.
When we run npm install and fetch say 50+ packages including devDependencies as well as runtime dependencies, npm creates node_modules (if needed) and adds each of those packages inside that folder. This means we end up with thousands of extraneous files included under node_modules. Each of those packages contains their own package.json, README.md, minified files, source files, etc. Our application really only cares about jquery.js (for DEV) and jquery.min.js (for PROD), so it seems to be a waste to include all of these other files into our build and therefore our web server.
Is there a standard when it comes to handle these npm packages in a way so that we simply expose ONLY the necessary files to the user? I imagine many people have this kind of issue but I don't see any built in npm constructs that allow us to do this easily.
See below.. the yellow highlighted files are the only files we really care about in Production, but we get all these extra files as well including the source code.
The most common solution consist of bundling your application on a different machine and then expose the built artefacts on production server.
There are a lot of great JS bundlers out there. The ones I have personally used are Browserify, Webpack, and Rollup. All amazing tools.
The main idea consists of writing your application in a Node environment and then bundle it to make it readable to the browser.
For simpler projects I find Browserify a very good compromise between power and ease of configuration. But it's a matter of taste, at the end. :)
Base on what I read about npm install documentation I do not think there is a option to manipulate the installation in the way you want. The packages will install the way the package author decides to package it, sometimes minified sometimes not.
Having said that, you should look for third party solutions like modclean which does exactly what you want post package installation. Run this command in the root of your project directory
npm install modclean -g
modclean
As long as your test coverage is good, ModClean would be perfect for your need.
Edit the package.json file and remove all the unnecessary dependencies then do
npm install --save
By doing this, it will create a local node_modules folder and only download the necessary packages into it (not the global node_modules folder)
Keep in mind, by default, node checks for local node_modules folder. If it couldn't find it, it will use the global folder.
Also, you don't expose all the packages in the node_modules folder. In fact, they will not be used unless you require(); them in the node.js file
EDIT:
For jQuery to work in Node, a window with a document is required. Since no such window exists natively in Node, one can be mocked by tools such as jsdom. This can be useful for testing purposes. https://www.npmjs.com/package/jquery
require("jsdom").env("", function(err, window) {
if (err) {
console.error(err);
return;
}
var $ = require("jquery")(window);
});
So jquery module do things a bit differently behind the scene for node.js comparing to the regular front-end jquery.
It requires jsdom so you will have to download that as well from here https://github.com/tmpvar/jsdom

Substitute a package in NPM/Node

Is it possible to force an external npm dependency to use a different node.js package that offers the same API but a different implementation?
If you're willing to do that and that module is open source you could fork that on github, change their package.json to include the module you want and use github url for your own package.json like this:
"modulename": "git+https://git#github.com/user/repo.git"
You should be able to download the source of whatever module you would prefer and put that folder within your node_modules folder. From that point you simply require it within your Node.js app like any other NPM module.
I recommend downloading the code for the API you want, creating an src/assets folder, placing it in there, changing the package name in package.json to something not used in npm, then using 'require('newPackageName')' within your code.
If you decide to use some of package.json's capabilities to point towards a specific version (like using "1.4.7" as opposed to "^1.4.7") or if you point to a github address, be careful when you run npm update. It will replace your URL with the latest version in npmjs.org with that specific name. I don't know if it still does this in newer versions of npm, but in the version that works with Node.js 0.12, this is the default behavior.
I can tell you that node shrinkwrap will work, but it will prevent any other packages from being updated as well. No, you cannot just have one shrinkwrapped dependency, it has to be all of them, or npm update won't work.

How to use npm packages in production?

Before start using node package manager, i was just downloading packages into one folder and giving references from html files. Now i have started to use node package manager and i want to done thing right.
I have downloaded jquery via npm install jquery --save command. Jquery is downloaded with minified, unminified, source, readme etc files, so i got more than 30 files downloaded.
How should i use those files in production? I mean all i need is one minified jquery file in production. Should i delete rest before deploying? I feel like npm can make my life easier but i am missing the point.
How should i approach to this?
When you use npm, the dependency is gonna be used only on server-side. I recommend you search for bower, it has the same purpose npm has, but for the client-side.
And about minified and full versions it's ok do maintain both versions, as long as you configure that, on production, to load the minified versions of your libraries.
I would recommend against deleting the entire package even if you need 1 file as there probably won't be any harm having a couple extra files. npm will allow you automatically update packages in the future... something you may not be able to do if you manually include a single file.

Resources