I've implemented the Ace Editor using the recommended CDN I've seen in their official documentation and it works great.
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.5/ace.js" type="text/javascript" charset="utf-8"></script>
However, being an external resource, it requires internet, which the user may not always benefit of, as in my case, the application could run on the internal server of an embedded device.
Simply copying the code from the cdn link into a JavaScript plugin starts the editor without any features.
Is there any way to manage this library using bower or npm ?
You need to include mode, theme, and worker files in addition to ace.js, copy the whole https://github.com/ajaxorg/ace-builds/tree/master/src, or use npm install ace-builds
Related
I understand that there are basically two ways of deploying a vue app. One is to include the library directly with:
<script src="https://unpkg.com/vue"></script>
and the other method is to use vue cli, then build with npm
I saw many tutorials, but I could not get a quite understanding of what exactly is different, or what are the advantages of each side?
Vue can be used through -
CLI - es NPM / yarn to install Vue. Sets up default config pretty nicely
NPM - (or yarn) install Vue directly and configure yourself [recommended for large projects]
CDN - refer directly through in your HTML /script
If you want to just include Vue in your script that has a larger objective, or accomplish something 'comparatively' simple, just use CDN. This is a good way to use the power of Vue without worrying about the intermediate build steps specific to Vue. Your completed product will continue to refer to Vue from CDN.
Also, each CDN lookup will mean an additional server request - this is likely to serve content faster than your own server, but an additional lookup nevertheless. Having tens of CDNs is not ideal.
For larger projects, NPM is ideal. You would want the power of Single File Components with (files with a .vue extension) that play well with editors, and provide a more structured way to develop the application (incl. things like scoped CSS).
Also, the build step through local Vue is a must if you use functions not supported by browsers today, or want to support older browsers.
https://v2.vuejs.org/v2/guide/installation.html
I make this question because of a problem I'm having making "bootstrap-select" to work with Bootstrap 4, but its a rather general conceptual question. Let's go:
What's the difference between installing a package and just referencing its css/js in html? Let's take bootstrap-select as an example:
I can put the references I paste below inside index.html and bootstrap-select will work (or at least it should) but I can also install package with "npm install bootstrap-select" so what's really the difference between both approaches? It is one of them just enough for make the package to work? Are both steps required? What's a best practice?
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.js" />
Another example, documentation says bootstrap-select requires Popper so it's enough to add this next script reference to index.html or instead I should install popper through npm install popper? Or I should do both?
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" />
According to me, the best practice is to install and get into node_module. my reason for that would be
You need to be connected to the internet while loading the application (Package won't load when you're running in intraNet.
You might never know when would the package CND is updated and you might face some issues after updates.
Feel free to correct me :)
It's recommended by angular that you use angular.cli.json(angular version 4) and angualr.json in (angular 5) Rather than declaring the js files in index.html, this keeps your code clean. And installing through npm is easy and reduces the effort for the js version updates as well.
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 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.