It seems to be a lame question, but I cannot figure it out. How to import popper.js which comes together with Bootstrap 4 beta?
I use Bower, and I've installed Bootstrap 4 beta. Now in the bower_components folder, there is the popper.js directory, which contains a few sub-folders. The problem is there is no dist folder and the popper.min.js file.
Bootstrap 4 guide links to CDN: https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js.
How to import popper.js without CDN? Where to find the popper.min.js file?
EDIT: Even if I download a zip file from the popper.js website, it contains the same files as I've downloaded from Bower.
I ran into the same problem.
I downloaded the 'popper.min.js' file from the CDN on the bootstrap website.
See here: https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.4/cjs/popper.min.js
Easier than compiling the project.
Important: You must include popper after jquery but BEFORE bootstrap.
The official way to install Popper.js is trough npm, Yarn or NuGet.
Use either one of the following commands :
npm i popper.js
yarn add popper.js
PM> Install-Package popper.js
Everything is described in the library readme.
Regarding the "downloads the zip", the zip clearly states that it contains the source code of the library.
Edit:
Starting from version 1.12.0, Popper.js is available as Bower dependency.
This installation method is going to be supported only for the 1.x version of Popper.js and will be removed in 2.x.
You should migrate your dependencies management to a modern system like npm or Yarn, as Bower suggests as well.
Ways to get popper.js: Package, CDN, and Local file
The best way depends on whether you have a project with a package manager like npm.
Package manager
If you're using a package manager, use it to get popper.js like this:
npm install popper.js --save
CDN
For a prototype or playground environment (like http://codepen.io) or may just want a url to a CDN file:
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.min.js
note: Bootstrap 4 requires the versions under the umd path (more info on popper/bs4).
Local file
Just save one of the CDN files to use locally. For example, paste one of these URLs in a browser, then Save As... to get a local copy.
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.min.js
I had the same problem. Tried different approches, but this one worked for me.
Read the instruction from http://getbootstrap.com/.
Copy the CDN paths of Javascripts (Popper, jQuery and Bootstrap) in same manner (it is important) as given.
<head>
//Path to jQuery
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
////Path to Popper - it is for dropsdowns etc in bootstrap
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
//Path to bootsrap
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>
I really don't understand why Javascript world trying to do thing more complicated. Why not just download and include in html? Trying to have something like Maven in Java? But we have to manually include it in html anyway? So, what is the point? Maybe someday I will understand but not now.
This is how I can get it
download & install NodeJs
run "npm install popper.js --save"
then I get this message
popper.js#1.12.7
added 1 package in 1.215s
then where is "add package" ? very informative , right? I found it in my C:\Users\surasin\node_modules\popper.js\dist
Hope this help
IN bootstrap 4 you need to add popper js for tooltip, I also don`t understand why bootstrap 4 includes external popper.js, It means bootstrap makes more complicated instead of easy when upgrading to the latest versions.
You can import popper js before bootstrap on angular or a simple html, Angular import would be like this
npm install popper.js --save
then go to
.angular-cli.json and change the order like below.
"scripts": [
"../node_modules/jquery/dist/jquery.slim.min.js",
"../node_modules/tether/dist/js/tether.min.js",
"../node_modules/popper.js/dist/umd/popper.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
you can also use CDN direct call popper js into your any project.
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.js https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.min.js
add popper**.js** as dependency instead of popper (only): see the difference in bold.
yarn add popper.js , instead of
yarn add popper
it makes the difference.
and include the script according your needs:
as html or
the library access as a dependency in SPA applications like react or angular
first install propperJs from by yarn
yarn add popper.js
then you can import it like this
import Popper from "popper.js";
I deleted any existing popper directories, then ran
npm install --save popper.js angular-popper
It turns out that Popper.js doesn't provide compiled files on its GitHub repository. Therefore, one has to compile the project on his/her own or download compiled files from CDNs. It cannot be automatically imported.
You can download and import all of Bootstrap, and Popper, with a single command using Fetch Injection:
fetchInject([
'https://npmcdn.com/bootstrap#4.0.0-alpha.5/dist/js/bootstrap.min.js',
'https://cdn.jsdelivr.net/popper.js/1.0.0-beta.3/popper.min.js'
], fetchInject([
'https://cdn.jsdelivr.net/jquery/3.1.1/jquery.slim.min.js',
'https://npmcdn.com/tether#1.2.4/dist/js/tether.min.js'
]));
Add CSS files if you need those too. Adjust versions and external sources to meet your needs and consider using sub-resource integrity checking if you're not hosting the files on your own domain or don't trust the source.
Install popper.js with spesific version number like this:
bower install popper.js#^1.16.0
Now u can find dist folder and popper.min.js file.
I am using several open source js libraries in my project. I recently moved to use bower for all the front-end dependencies. I liked how I can just provide a github url instead of a proper package name.
I have customized few libraries. So to manage them using bower, I created a single private repository called myLibs in an organization account on Github.
I am creating branches for each customized library. For example, customized angular-bootstrap library will be in angular-bootstrap branch and customized angular-material library will be in angular-material branch.
Now I am creating tags for each release in each library. The naming convention that I am using is branch-name/x.y.z For example, I have angular-bootstrap/1.0.0 and angular-material/1.1.1 tags.
This was good till I had to install these libraries using bower. To install the custom libraries I called the following command (It's a dummy url, don't try it)
bower install --save-exact library-patch=https://github.com/test_org/myLibs.git#branch-name/1.0.0
The library gets installed and I can see it in bower_components too, but in my bower.json the dependency entry turns up like this -
"library-patch":"https://github.com/test_org/myLibs.git#undefined"
This is not what I wanted. I wanted to have the proper tag name to be saved. I don't want to manually make changes in the bower.json file every time I want to add a custom library.
My first thought was that the naming convention of the tags will be a problem. So I changed it to branch-name-x.y.z from branch-name/x.y.z which allowed me to have the exact version in the bower.json to install it properly, but when trying to install the libraries using the terminal, instead of using bower.json, I am getting the#undefined` tag in the end of the dependencies.
Here's the log I am getting while installing the library from terminal.
bower install --save-exact library-patch=https://github.com/test_org/myLibs.git#branch-name-1.0.0
bower not-cached https://github.com/test_org/myLibs.git#branch-name-1.0.0
bower resolve https://github.com/test_org/myLibs.git#branch-name-1.0.0
bower download https://github.com/test_org/myLibs/archive/branch-name-1.0.0.tar.gz
bower retry Download of https://github.com/test_org/myLibs/archive/branch-name-1.0.0.tar.gz failed with EHTTP, trying with git..
bower checkout library-patch#branch-name-1.0.0
bower resolved https://github.com/test_org/myLibs.git#branch-name-1.0.0
bower install library-patch#branch-name-1.0.0
library-patch#branch-name-1.0.0 bower_components/library-patch
└── angular#1.4.8
Why am I getting undefined in the release/tag name? Am I making any mistake while naming the tags? Is there any way I can install those custom libs from terminal and save the exact tag in bower.json?
The solution for the problem was to use --save instead of --save-exact. I have no explanation for the same right now, but I'll update the answer as soon as I can.
As far as I can tell, it's because the package was getting installed from github directly, instead of from bower registry.
I would like update my current jQuery version on my Meteor projet 1.x to 2.x. Do you know how i can update this module ?
I also have an error 'module jQuery not found'. I would like update my jQuery version for use Foundation framework :
Error: Error: Cannot find module 'jquery'
Thank you ! :)
EDIT
Fix : Install jQuery with
meteor npm install --save jquery meteor-node-stubs
Install JQuery with meteor npm install --save jquery meteor-node-stubs
I just started the Discover Meteor Tutorial, and when I attempt to:
mrt add bootstrap
I get the following error:
usr/local/lib/node_modules/meteorite/lib/project.js:225
throw("Package named " + pkgName + " doesn't exist in your meteor in
^
Package named bootstrap doesn't exist in your meteor installation, smart.json, or on
atmosphere
Any thoughts? Thank you.
update 3/2/14:
It looks like the book now supports the official bootstrap package which you can get via:
$ meteor add twbs:bootstrap
old answer:
It looks like they have not updated the book for the new packaging system. You have some choices when it comes to which bootstrap version to use. I'm not sure which one the book expects, but you could try the default that comes with meteor:
$ meteor add bootstrap
Note we are replacing mrt with meteor.
If you want bootstrap 3, then you could try:
$ meteor add mizzao:bootstrap-3
mrt add bootstrap-3
is worked for me. Hope this help!
I had the same problem, but luckily, found a solution quite easily. It appears that the Meteorite package manager operates on packages that have already been added to your local project with meteor add <packageName> and allows you to manage them more conveniently with the smart.json and smart.lock files. Consequently, the steps you should take are the following:
Install bootstrap with meteor add bootstrap in your project (this operation does not write to smart.json);
Issue the command mrt add bootstrap (this command will record your bootstrap package in smart.json and smart.lock for easier package management with Meteorite).
How do I install a dependency into a specific subdirectory using Bower? I'm working on an application built on AngularJS that requires localization. One of the libraries I'm using is looking for localization files in angular/angular_i18n. However, I'm developing with Angular 1.2 rc3 and the localization files are not part of the package so I have to install them separately.
How can I bower install angular-i18n into components/angular/angular-i18n/?
Help would be totally appreciated.
You can't. Bower uses a single location to store packages. However you can use tools like one of these grunt tasks to copy it over in the build-step.
you can also try to use this fork: https://github.com/hyperweb2/upt
that also implements subdirectory installation feature