I have a simple website built with HTML, CSS, and some in-line JS. I want to be able to use this NPM package Simple MDE Markdown Editor, but I don't know how. I tried running npm install simplemde --save in my project directory. That created a node_modules folder with the NPM package inside it, but how do I import that into my project? If I just try to use the package without importing it in any way, I get an error:
Uncaught ReferenceError: SimpleMDE is not defined.
Using node_modules requires tools like Webpack.
If your project is fully vanilla, you can try to add the cdn (I guess you need the links below), should work as npm module.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
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 have a javascript (which uses files from it's own project) file that I need to use in a different project without copy the code.
How can I do it?
Thanks
Well... You could install Bower, upload your file to your own repository or gist on GitHub and then use bower to include them as a dependancy for your project.
Setting up (assuming you have Node.js already installed)
npm install -g bower
cd /path/to/project-A
bower init
bower install <link to your gist/repo> --save
cd /path/to/project-B
bower init
bower install <link to your gist/repo> --save
And then in the future, if you upload changes to your repo/gist (and the link has not changed...)
cd /path/to/project
bower update
EDIT: That or you have a remotely hosted version of this file that you directly link to, I guess...? Kinda sucks though, could wreck a live project from a dodgy edit that way
I'm completely new to frontend web dev with a very basic question. Once I npm install something, how do I actually use it? For example, I just did npm install bootstrap, and I would now like to be able to use the CSS and Javascript that it downloaded. I'm sure I shouldn't have to dig through the directories to find some entry point... so how do I now use bootstrap in my webpage?
Most modules on NPM are used in Node.js, for the server (backend). Node.js has a built-in function require('your-module') to make use of the module. This function is not present on the frontend in the browser. However, there are tools like browserify or webpack and probably others to make the NPM modules and the require function work in the frontend.
If you're just starting out I suggest you take a look at Bower first. With Bower (installed with NPM though) you can pull in all your frontend libraries like jQuery, Bootstrap, etc. to your project folder and you can point your script tags in your HTML to the bower_components/ directory, e.g. <script src="/bower_components/jquery/jquery.min.js"></script>. You can save a list of all libraries used with a version number in a json file called bower.json in the root of your project folder.
Based on this file you can pull in or update all the libraries listed with the use of the command line.
As a really general rule, npm is used for assets your node app will use on the server, while bower (and others) are the equivalent for dependencies that you want to use on the client.
That said, the use is basically the same.
npm (and bower) install the files into your project directory in a standard location. All you really have to do is make sure that location is accessible via a web request (typically, node_modules is not; which is why bower came about), and then embed link and script tags as appropriate in your html:
<script src='/node_modules/bootstrap/js/bootstrap.min.js'></script>