Installing Bootstrap with NPM


Installing Bootstrap with NPM



I know how to use npm to install and maintain build tools, but I realize I'm not sure how to leverage it to install frameworks (css or js I'd normally just slap the script/css links in my index.html).



But, let's say I want to use npm. I'd run an npm install bootstrap and npm install jquery, but then I'm not sure what the next step is.


npm install bootstrap


npm install jquery



I could then just say <link rel="stylesheet" type="text/css" href="nodemodules/boostrap/dist/css/bootstrap.css"> but that seems clunky and dumb.


<link rel="stylesheet" type="text/css" href="nodemodules/boostrap/dist/css/bootstrap.css">



I see a lot of people importing stuff like this with require('bootstrap'); but honestly I'm not even sure where to put that.


require('bootstrap');



Could somebody help me fill in these blanks?





You could use a grunt task to copy the js/css out of the node_modules folder. I think that's typically how it's done.
– user1751825
Jun 27 at 0:02





add it to your angular/cli config "styles": [ "../node_modules/boostrap/dist/css/bootstrap.css" ]
– Sh. Pavel
Jun 27 at 0:03






@user1751825 that makes sense to me. Maybe this is sort of an installation you'd use when you have a fully-fledged task runner setup?
– Scott Ledbetter
Jun 27 at 0:11






You can import like this inside your css file. You can also import inside your js file but I would recommend to do this inside css file for seperation concern.
– Ngô Hùng Phúc
Jun 27 at 6:53




1 Answer
1



A common way to handle this is via grunt tasks, which copy the relevant files out of node_modules, into a more appropriate folder.



This is an excerpt from a copy task which I used for a recent project...


copy: {
types: {
files: [
{
expand: true,
cwd: 'node_modules/@types',
src: ['**/*.ts'],
dest: 'scripts/typings'
}
]
},
jquery: {
files: [
{
expand: true,
cwd: 'node_modules/jquery/dist',
src: ['*.js'],
dest: 'Content/libraries/jquery'
}
]
},
handlebars: {
files: [
{
expand: true,
cwd: 'node_modules/handlebars/dist',
src: ['*.js'],
dest: 'Content/libraries/handlebars'
}
]
},
bootstrap: {
files: [
{
expand: true,
cwd: 'node_modules/bootstrap',
src: ['dist/js/*.js', 'dist/fonts/*.*', 'dist/css/*.css'],
dest: 'Content/libraries/bootstrap'
}
]
}
}



There may be more succinct ways to write this, but it works for me.



This allows me to update my website packages by doing the following...


$ npm install
$ grunt copy



The folders /Content/libraries, and /scripts/typings are committed to my application git repo, node_modules isn't. This helps prevent issues if a module become unavailable at some stage in the future. My git repo contains everything required for the site to function.



If for some reason one of these modules was removed from npm, it would just mean I couldn't do upgrades, but my site will still work with the files that my git repo includes.



In my case, I don't actually need node_modules at all in my runtime environment, as I'm not using nodejs. I'm just using npm to manage my application's client-side module dependencies.






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Comments

Post a Comment

Popular posts from this blog

paramiko-expect timeout is happening after executing the command

paramiko-expect timeout is happening after executing the command Can someone help me why timeout is happening after executing the command .I am trying to SSH to a machine and execute a command.I want to store the result of the executed command . I have referred paramiko-timeout but i didn't get my expected result. import traceback try: import paramiko except ImportError: raise Exception("Please install paramiko , pip install paramiko") import pexpect from paramiko_expect import SSHClientInteraction def main(): HOSTNAME = "minion5.net" USERNAME = "root" PASSWORD = "help@432" PROMPT = "root@*:~$s+" try: client = paramiko.SSHClient() client.load_system_host_keys() client.set_missing_host_key_policy(paramiko.AutoAddPolicy()) client.connect(hostname=HOSTNAME, username=USERNAME, password=PASSWORD) with SSHClientInteraction(client, timeout=20, display=True) as interact: ...
Read more

Opening a url is failing in Swift

Opening a url is failing in Swift breakpointing inside the callback and logging success shows false. I added itms-apps to my plist: LSApplicationQueriesSchemes and put this in my app delegate: func application(_ app: UIApplication, open url: URL, options: [UIApplicationOpenURLOptionsKey : Any] = [:]) -> Bool { return true } func moreTapped() { let url = NSURL(string: "itms-apps://itunes.com/developer/quantum-productions/id979315877") if #available(iOS 10.0, *) { UIApplication.shared.open(url! as URL, options: [:], completionHandler: {(success: Bool) in }) } else { UIApplication.shared.openURL(url! as URL) } } Are you testing on a real device? – rmaddy Jun 21 at 23:57 I try on a device, get "Cannot Connect to App Store". Device is online ...
Read more

Export result set on Dbeaver to CSV

Export result set on Dbeaver to CSV Normally I use Dbeaver for windows and always export my result set like this: run my query --> select the result --> export the result set --> select export to clipboard --> done This step by step puts my result set in my clipboard and I can paste it wherever I want to work with it. The problem is that now I am using dbeaver for mac and this guide is not working. I can go on until the moment that I select my result set like in the image below: exporting data set But once I go further in the process, in the last step I get: no query Note that in "source" it was suppose to show the query that originated the result set, but instead it says just "select. As a result it does't select my result or anything (besides being "successful"). Normally my query would show up there automatically and I couldn't find any option that corrects this problem in the menus. Please help me! Thanks. Aft...
Read more