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.
Related
I am currently looking at deploying a personal project to Netlify. This project uses an npm package called NES.css which is found here: https://nostalgic-css.github.io/NES.css/.
I have a gulp file that has a build process that minifies, bundles, transpiles all the scss, js, images, etc. This is done by running npm build.
Netlify is setup to run this build command on deploy. Everything works as far as deploying goes, however, there are two images that the NES.css's stylesheet references that are no longer found because Netlify deletes the node modules before deploying your code. Any suggestions?
Since nes.css just gives you a css to play with, you can easily fetch the css elements into your HTML via CDN by including following in the
Bonus: With the above method, you don't need to worry about updating your nes.css npm module every time the original nes GitHub project gets an update.
I am new to the development based on java-script frameworks. I want to understand gulp, npm. Somewhere, I read that these are open source client side development tool but I could not get more insight on this. Please help!
It is a task runner, written in JavaScript to be run in a nodeJs environment. You need a package manager like npm to install it. Npm comes with nodejs.
An Introduction to Gulp.js
It is an application doing things like the following, instead of you. You need only to code once the instructions and run it.
Compressing new and modified images; compiling Sass to CSS code; code linting and validation; concatenating and minifying CSS and JavaScript files; deploying files to development, staging and production servers.
I wanted start with the new Angular 2 but I can't grasp how npm is used in the official (and several other) tutorials. For me the node_modules directory is mainly used for development but in index.html the needed script files are mostly included from this location:
<script src="node_modules/systemjs/dist/system.src.js"></script>
When hosting the app on your own machine, there seems to be no problem because everything would be present due to npm install. But if I want to host my app somewhere else (e.g. as a Github Page) I generally don't have node_modules as it would be excluded in .gitignore.
One way would be to load the dependencies via some CDN but is there a better solution?
as you know node_modules are mainly used for development purpose, you dont need them in your repo while hosting your code.
You can follow two approaches here.
Deploy as it is. Just that - no minification, concatenation, name mangling etc.copy all your node_modules,Transpile all your ts project, copy all your resulting js/css/... to the hosting server and you can host your app.
second approach will be the recommended one.Deploy using special bundling tools. Like webpack or systemjs builder.basically these builder will make a bundle of your application, and you can just deploy that bundle on the server.
For more reference, I have provided links of sample apps:
Webpack Starter
SystemJS builder
Hoe this helps.
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.
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.