How to host popper.js locally - javascript

I just upgraded to Bootstrap four and realized Popper.js was a dependency. I like to host libraries locally, as I sometimes need to work offline, but when I try to use it offline, I get an error unexpected token export. It works, however, when I use the Cloudflare CDN version, but how can I host popper.js locally?
(I don't want to use a package manager for this.)

The README.md of the project will help sort this out:
Dist targets
Popper.js is currently shipped with 3 targets in mind: UMD, ESM and ESNext.
UMD - Universal Module Definition: AMD, RequireJS and globals;
ESM - ES Modules: For webpack/Rollup or browser supporting the spec;
ESNext: Available in dist/, can be used with webpack and babel-preset-env;
Make sure to use the right one for your needs. If you want to import it with a <script> tag, use UMD.
Hence, if you want to use Popper.js with a <script /> tag, you want to use the umd version of it. Located in dist/umd.

you can use bootstrap.bundle.min.js which already contain Popper.js

I also tried downloading popper and I tried to recreate your problem, and you are correct.
If you check the Quick Start section of getbootstrap.com page, you can find the following line in their example:
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
Note the umd part in their link. You can download that file and add it locally and it will work.
PS - You may also have to change your jQuery import.

Download the official bootstrap files by clicking the first link on this page:
https://getbootstrap.com/docs/4.5/getting-started/download/
You can then use the bootstrap.bundle.min.css file in css which contains popper.js as well as the bootstrap code you might need
you can use it by using this code in your <head> tag:
<link rel="stylesheet" type="text/css" href="path-to/bootstrap-4.5.0/css/bootstrap.bundle.min.css">
I included 4.5.0 because that is the current version of bootstrap out there today

If you download Popper.js though
npm install popper.js
I found there are difference between npm package and its original source which is here https://popper.js.org/.
I just download popper.js from its original source and put it new js file. It worked for me.

Just download the source code and refer to it
Get the source code from the github page, then refer to it in your html
<script type="text/javascript" src="/path/to/downloaded/popper.js-1.12.5/dist/poppper.js" />

go to : https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js
the right click and "save as..."
you can do the same with :
https://cdnjs.cloudflare.com/ajax/libs/popper.js/[popper-version]/umd/popper.js
and then in your code you add this line at the bottom between Jquery's and Bootstrap's .js link (script) :

Related

Install offline Bootstrap in Angular

I don't have any way to have internet on my pc and I want to install Bootstrap in my Angular project by downloading it and calling it in my index.html so i can use it offline. Can't use npm i or anything related to internet besides downloading the Bootstrap zip
I just put its folder in "src" and called it with:
<link rel="stylesheet" href="src\bootstrap\css\bootstrap.min.css">
<script src="src\bootstrap\js\bootstrap.min.js"></script>
This isn't working, should I download also popper.js and Jquery? Or should I change something in Angular.json?
Try using assets folder for static files.So move your files to assets and change links like
<link rel="stylesheet" href="assets\bootstrap\css\bootstrap.min.css">
<script src="assets\bootstrap\js\bootstrap.min.js"></script>
Also you will need to add jquery as well
Put the files in the assets folders. It's better to import those files in angular.json instead of index.html. You will also have to include JQuery and popper as in official bootstrap documentation:
Many of our components require the use of JavaScript to function.
Specifically, they require jQuery, Popper.js, and our own JavaScript
plugins.
"styles": [
"src/assets/bootstrap/css/bootstrap.min.css""
],
"scripts": [
"src/assets/jquery/remainingpath...",
"src/assets/popper/remainingpath...",
"src/assets/bootstrap/js/bootstrap/bootstrap.min.js"
]

Laravel Mix import JS return errors

Laravel 5.4, NPM 5.8.0
After compile the assets I'm getting this error on every js library that is loaded on before bootstrap.js...
What type of thing I'm missing? I have no modified any core of laravel, Just add the JS libs and compile with npm run dev.
Just missed that app.js load bootstrap and jquery by default, So first, removed the duplicate require that load jQuery
//require('./jobhunt/jquery.min');
Next, Modernizr is loaded on my base layout (welcome.blade.php) on the head.
<script type="text/javascript" src="{{ asset('/js/jobhunt/modernizr.js') }}"></script>
Last, I've detected that my template has deprecated or older versions of jQuery.scrollbar, waypoints, and jQuery counterUp, So I upgraded and now this is the result:
So, I think that is because the theme has old libs and I think that is important leave the bootstrap on top of any require lib. Now my console is clean of errors.

how to use webpack to load CDN or external vendor javascript lib in js file, not in html file

I am using react starter kit for client side programming. It uses react and webpack. No index.html or any html to edit, all js files. My question is if I want to load a vendor js lib from cloud, how to do I do that?
It would be easy to do that in a html file. <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>
However, in js file, it only uses npm installed packages. How can I import the above lib with no html file? I tried import and require, they only work for local files.
update 10/21/15
So far I tried two directions, neither is ideal.
#minheq yes there is a html file sort of for react start kit. It is html.js under src/components/Html. I can put cloud lib and all its dependencies there like this:
<div id="app" dangerouslySetInnerHTML={{__html: this.props.body}} />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>
<script src="/app.js"></script>
<script dangerouslySetInnerHTML={this.trackingCode()} />
</body>
Good news is it works, I don't need do anything else in js file, no import or require. However, now I have two jquery libs loaded in different ways. One in here, the other through npm and webpack. I wonder it will give me trouble later. The react-routing I use give me 'undefined variable' error if I type a none home path in browser window due to the server side loading I guess. So this solution is not very good.
Use webpack externals feature. This is documented as: link. "You can use the externals options for applications too, when you want to import an existing API into the bundle. I.e. you want to use jquery from CDN (separate tag) and still want to require("jquery") in your bundle. Just specify it as external: { externals: { jquery: "jQuery" } }."
However, the documentation I found a few places are all fussy about how to do this exactly. So far I have no idea how to use it to replace <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script> in html.
externals is not intended to let you do this. It means "don't compile this resource into the final bundle because I will include it myself"
What you need is a script loader implementation such as script.js. I also wrote a simple app to compare different script loader implementations: link.
var $script = require("scriptjs");
$script("//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js", function() {
$('body').html('It works!')
});
You can create a script tag in your JS as
$("body").append($("<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>"))
There is one html file that is definitely being used to serve to users with your js bundle attached. Probably you could attach the script tag into that html file
Use webpack's externals:
externals allows you to specify dependencies for your library that are
not resolved by webpack, but become dependencies of the output. This
means they are imported from the environment during runtime.
I have looked around for a solution and most of all proposals were based on externals, which is not valid in my case.
In this other post, I have posted my solution: https://stackoverflow.com/a/62603539/8650621
In other words, I finished using a separate JS file which is responsible for downloading the desired file into a local directory. Then WebPack scans this directory and bundles the downloaded files together with the application.

Missing something trying to get bootstrap included into meteor as a local git submodule

I'm trying to install a local copy of bootstrap into a meteor project to make it easier to customise it.
I was using the bootsrap-3 smart package and it was working pretty well, so removed that, created the directory tree and files described in Use Twitter Bootstrap 3 RC1 with Meteor and executed meteor add bootstrap which displayed the text from the summary string, but, no bootstrap is included in the project.
I added bootstrap with
git submodule add git://github.com/twitter/bootstrap.git public/bootstrap
and adjusted the paths appropriately in the packages/bootstrap/package.js file (even tried absolute paths to try and get it to work).
package.js looks like
Package.describe({
summary: "Load locale bootstrap scripts"
});
Package.on_use(function(api) {
api.add_files('../../public/bootstrap/dist/js/bootstrap.min.js', 'client');
});
I'm missing something, but struggling to find it.
Peter
You could stick to the standard way of creating packages by just putting Bootstrap 3's css, fonts, and js directories at the top-level of your package directory, and link to them like this in package.js:
api.add_files('css/bootstrap.css', 'client');
api.add_files('js/bootstrap.min.js', 'client');
...
If you care about the icons, add the fonts the same way. Then, create an override css file which loads last, overriding the paths to the icons in the Bootstrap css. An example of this override file is in Meteor's official Bootstrap 2 package, here. Also see the package.js file from the same, here (though I think you could skip using NPM to concatenate the path names).
One easy way to add bootstrap is just to place the files in your client directory, probably at client/lib. That is the simplest way if you are going to maintain and customise the files yourself. You will probably want both the .css and .js from bootstrap.
For a package, I would look at bootstrap3-less. It can be added with meteorite and gives you the less files which you can customise. If that doesn't suit you then you can at least see how the package.js there looks and how the package is organised.

Loading jQuery on Jasmine on Rails 3.1 plugin before source files

I'm working Jasmine on a Rails plugin that would be included in a Rails app that loads jQuery from a CDN. However, I'm running into issues running Jasmine tests in my plugin. I need to load jQuery before my source javascript files in app/assets/javascripts, but if I include jQuery in my jasmine.yml it doesn't get loaded before the source files:
jasmine.yml contents:
src_dir: "app/assets/javascripts"
src_files:
- "my_rails_plugin_source_includer.js"
spec_dir: spec/javascripts
asset_paths:
- "vendor/assets/javascripts"
my_rails_plugin_source_includer.js requires my source javascripts:
//= require my_jquery_dependent_script.js
//= require my_other_jquery_dependent_script.js
I'm using
bundle exec jasmine-headless-webkit --color --keep ./spec/javascripts/specs.js
to run my tests. I get an error message like
ReferenceError: Can't find variable: jQuery
ReferenceError: Can't find variable: jQuery
Test ordering seed: --seed 1629
My tests pass if I explicitly require a jQuery javascript file (e.g., jquery-1.9.1-min.js) in my_rails_plugin_source_includer.js. However, I don't want to do that, as I want the actual Rails app, rather than this plugin. Any suggestions on how to require jQuery before my source files? Requiring it in my specs or my helpers doesn't work, as Jasmine seems to always load the source files first (which of course makes sense).
I was able to solve this issue by doing the following:
Downloading jquery-1.9.1.min.js from the official jQuery source and storing it in my spec/javascripts/support/helpers folder.
Creating a source.js file in my spec/javascripts/support/fixtures folder (can be an arbitrary folder) that has the following contents:
//= require ../helpers/jquery-1.9.1.min
//= require ../../../../app/assets/javascripts/application
where app/assets/javascripts/application.js is the manifest for my plugin's JavaScripts.
Editing my jasmine.yml file to use the following sources:
src_dir: "spec/javascripts/support/fixtures"
src_files:
- "source.js"
As a result, the jQuery-dependent source JavaScripts have jQuery preloaded only for Jasmine testing.
Thanks for your answer, Fares, it gave me the insight into what's happening with the jasmine config file.
There's a predictable order to how files are included in your jasmine page's <head> tag.
First, my setup deatils:
rails 4.0.1
jasmine 1.3.2
jquery-rails 3.0.4 (which provides jquery-1.10.2)
Here's my spec/javascripts/support/jasmine.yml. I have no helpers, I don't need css files to test my particular app, and I removed all the comments.
src_files:
- spec/javascripts/lib/jquery-1.10.2.js
- app/assets/javascripts/tools/dependency-parser.js
spec_dir: spec/javascripts
spec_files:
- '**/*[sS]pec.js'
The <head> of my jasmine page contains the following, in order:
jasmine core <link rel="shortcut icon" type="image/png" href="/__JASMINE_ROOT__/images/jasmine_favicon.png">
<link rel="stylesheet" href="/__jasmine__/jasmine.css" type="text/css" media="screen">
<script src="/__jasmine__/jasmine.js" type="text/javascript"></script>
<script src="/__jasmine__/jasmine-html.js" type="text/javascript"></script>
<script src="/__jasmine__/json2.js" type="text/javascript"></script>
src_files <script src="/spec/javascripts/lib/jquery-1.10.2.js" type="text/javascript"></script>
<script src="/app/assets/javascripts/tools/dependency-parser.js" type="text/javascript"></script>
helper_files <!-- I didn't have anything here -->
spec_files <script src="/__spec__/dependency-parser_spec.js" type="text/javascript"></script>
jasmine boot <script src="/__boot__/boot.js" type="text/javascript"></script>
My app uses the asset pipeline, and the jquery-rails gem, along with the typical includes in app/assets/application.js:
//=require jquery
//=require jquery-ujs
//=require tree .
Because I am using the jquery-rails gem, that means I don't actually have the jQuery JavaScript files anywhere to load directly - they should come from the asset pipeline if they come from anywhere. It also seemed that I couldn't include the app/assets/javascripts/application.js file for some reason. This turned out to be okay; I just want to test my custom JavaScript, which depends upon jQuery.
So, I simply downloaded the version of jQuery that my app is using (1.10.2), and put it in:
spec/javascripts/lib/ <= I created this folder
After that everything worked perfectly, because I could predictably load my .js files in the order in which I needed them. It's not perfect. I now manually have keep my jQuery version the same in my specs as whatever version of jquery-rails I use, but that's a rather minor thing for now...though it begs the question, "Why the hell do people package javascript file into a gem?" No other web framework does this kind of wacky stuff.
I also tried using the jasmine 2.0.0.rc5 gem (the current version as of this writing), because it was supposed to take care of asset pipeline issues like this, but it didn't work for me.
I also tried jumping to something more complex like using the jasmine-jquery or jasminerice gems, but found both of their implementations to be more complicated versions of what I did above. Once I understood how the config file was generating the contents of the <head> tag in my particular case, it was a relatively easy fix.
I may move to jasmine 2.0.0 when it's released, if I feel it's necessary (it supposedly has better Rails 4 support), but I'm pretty sure this solution is going to work out just fine.

Categories

Resources