I read about npm and bower, differences, usage, how it works, purpose as well. All explanation says that to work in NodeJs. But when I searched for AngularJS2, the tutorial says use npm. I have some basic questions based upon the understanding that npm basically for dependency management or packages to be installed.
How my Java/Eclipse workspace knows that npm installed the particular JS library/file, what path should be given in the html/web page for including those files/libraries?
If I move the web application to production, how will the server gets those dependent libraries? Even if server gets it, it might be installed in different folder. Basically how it can be managed with a web applications in different environments for just AngularJS app?
Can anyone please help me to have better understanding?
Finally found the answer. NPM is node package manager which helps basically to download the dependencies (almost like maven, gradle in java).
npm software needs to be installed in developer's machine.
Add the required dependencies in the package.json in the root folder of AngularJS application.
Open the DOS command line and navigate to project root folder(workspace/project in eclipse), then type npm install which will download all the dependencies mentioned in the package.json to a folder called npm_modules inside project folder.
The other and important advantage is npm can be used to install browser agent as well. So npm start command will open the browser and will load the application automatically in browser. Developer does not need to be aware about NodeJs. One more benefit of using this approach is the browser will get refreshed automatically when any update in the JS file gets saved.
Related
I am using vuepress in order to make my static site so is their any risk that anyone else can see my site source as my site is not open-source and I am using NPM so I want to ask a question that will my vuepress package will be published openly? as it's really important to me and I don't want to reveal the source of my site.
About Is their any risk that anyone else can see my site source
There is no way to protect javascript intended to run in a browser from a determined viewer.
If the browser can run it, then any determined viewer can view/run it also.
About NPM:
npm is a package manager for the JavaScript programming language maintained by npm, Inc. npm is the default package manager for the JavaScript runtime environment Node.js.
The npm registry contains packages, many of which are also Node modules, or contain Node modules.
npm has two types of packages,
one is public which everyone can see while the other is,
private package which others can't see.
So if you fear that people will see the source code in your package, just make it private or just don't put your code on npm at all.
Is there a way for Hot Reloading to occur on a local npm dependency of a local Vuetify application using yarn serve (which is probably using webpack / vuetify-loader)?
BUSINESS CASE
We have some common Vuetify components that I'd like to expose with a "common-components" Vue Plugin and allow all of our Vuetify applications to pull those common components. I'm able to do so by packaging the plugin and creating the dependency and pushing to a private npm repo or a commit/push to a private git repo. The problem lies with the development cycle and development experience.
A typical development change to the Plugin within the local development environment requires:
(common-components) yarn build (to create the dist/common-components.umd.js)
(common-components) (deploy to a private npm rep or a commit/push to a git repo)
(application A) yarn upgrade common-components to pull the latest
(application A) yarn serve
There has to be a better development cycle than this, right? Or is my real problem that we need to decouple the plugin from our applications better?
THE SOLUTION I WAS HOPING FOR, BUT FAILED
yarn-link or npm-link
I was able to get this to work, but a NPM dependency still resolves to the folder's package.json which has a "main": "dist/common-components.umd.js". This requires me to do a yarn build which removes the file and rebuilds it. When the file is removed, "application A" that is currently running with yarn serve breaks and is unrecoverable. I must shut down the server and do a yarn serve again.
I'm hoping there is a solution out there that tackles this scenario!
I've done that kind of setup a while ago thanks to yalc.
It was essentially:
work on your own package, setup it (with yalc link if I remember properly)
when an update was done on the package, we had it to automatically yalc publish --push --changed like with a linter
you can use a pre-push git hook to babelify your package
on the host main app, we had a nodemon running to check if yalc published any changes, and if it was the case, simply reload the app
on main app still, we used a git hook on pull to have it fetching the latest changes on the yalc.lock store (with yalc update)
I did it a while ago so I don't remember it super well but it was working pretty well as far as I remember, just need to run 2 servers (one on the package to publish and one on your main app to fetch the changes) on top of your other services. Still works better than it's yarn or npm links.
I'm working on 2 projects, one library project is the npm depencency of the others.
The library project is automatically published to local npm registry (nexus) by CI (Gitlab), so developers that are only working on 2nd project don't need to download library project (at least this is the welcomed solution).
However, after deleting node_modules/mylibrary and calling npm install, I've found out, that I've got... old version of the package. The library was correcly built and our nexus allows redeploy, and it works perfectly in Gitlab CI (the project gets always the actual version of library package) so it looks like something was cached locally somewhere else (not in project itself).
How to force npm to download the actual version of the package, purging local cache if necessary? Increasing the library version after each commit is not a viable solution (if it was, there would be never the concept of snapshots in maven).
I have developed an Angular 2 application using npm, As a fresher,I don't know some ways like below.
When I publish I used npm publish so that it publish the application in npm account in the web.
So here, is there any way to publish our app in the localhost,because I don't want to use npm account and I just need to avoid node_modules folder on publishing ?
If any other way,that can be used to publish the Angular2 Application in local other than npm, let me know.I try that.
If it is not possible to publish the application without npm web account, Kindly let me know please .
Excuse mistakes,If any.Thanks in adv :)
npm publish is to make a library package available to other for free use.
That's not what you use for making a web application available. This is called deployment.
For deployment you usually execute a build step that transpiles TS to JS, and combines them into a single file to reduce the number of requests the browser needs to make in order to get all source files of your application. It may also inline component HTML and CSS. This build step can also minify and mangle to JS code to reduce the resulting file size even more.
The resulting output can just be copied to any directory that any web server is able to serve to a browser either on your local machine or at some machine of a web hosting provider.
There are different ways to build your application depending on your setup.
See for example How to deploy Angular 2 application developed in Typescript to production?
You need browserify, that's all
browsers need references to all js files to be put in the html, they don't understand node's require() method that forms modules dependencies
what browserify does is traversing the entire dependency graph of your project, recursively bundling up all the required modules starting at the given root into a single js file
install it by node package manager
npm install -g browserify
use it to bundle all needed modules staring at main.js
browserify main.js -o bundle.js
now put a single script tag into your html
<script src="bundle.js"></script>
as far as i know, node_modules contains dependencies for typescript transpilers and few others. so it will not be possible to publish an app without using node_modules.
perhaps you can try using Plnkr or jsFiddle
where you can make imports online using cdn links for node_modules and publish your app.
it will be easy compared to other alternatives.
hope this helps.
I have an online site and Im going to overhaul it. While I cannot find any information about if I can use npm and some kind of package manager (e.g Webpack) on live site which is on shared host (which has latest Node.js, npm support etc), Im going to develope it locally and worry about "publishing" it later on.
Is there a way to somehow covert my current downloaded project to npm project or Im better off just starting a new project? This is rather confusing, I've never used npm before.
Im using WordPress, everything is run with PHP atm but Im going to overhaul it and use Node.js.
NPM can be used to collect and manage Javascript dependencies for the browser so as to create a stand alone front-end JS app. BUT, bower is probably a better choice.
NPM is designed to manage Javascript dependencies for projects that use NodeJS or use the CommonJS module format for requiring modules.
Bower is specifically a package manager (like npm or composer) but it is meant to manage browser based javascript dependencies.
Currently, javascript doesn't have a formally defined module/import system, so a number of competing require() functions are been produced. NodeJS comes with a require() function that searches the npm/ folder for modules. Browserify is a pre-processor that can scan the npm folder for a dependency and all of its dependencies and bundle them into 1 file for a browser to download (because browser's don't have a require() function because the JS standard doesn't have define one)
I might be rambling here, but you should probably look at bower, and then - at some point in the future - look at either browserify or requirejs to combine and optimize all the JS plugins for your front-end app.
Edit for clarity:
Basically there are 2 engines to run your JS application: the browser or NodeJS. NodeJS needs npm, the browser has no idea what npm is. If you want to write a clean, single page app, all JS front-end for a PHP backend, you don't need NodeJS, and therefore don't need npm. Using npm will prematurely complicate the development of a front-end browser app because it will force you to decide on a require() implementation (Browserify or Requirejs) right from the start.