1

Reference to Purpose of installing bootstrap through npm?

I'm using the examples here: After downloading npm, I added the following lines to my index.html

  <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
  <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

Unfortunately, stylings of my elements did not changed.

I'm getting the following when i do cordova run browser.

    200 /index.html (gzip)
    404 /node_modules/bootstrap/js/bootstrap.min.js
    404 /node_modules/bootstrap/bootstrap.min.css
    200 /css/index.css (gzip)
    200 /cordova.js (gzip)
    200 /img/logo.png
    200 /js/index.js (gzip)
    200 /cordova_plugins.js (gzip)
    200 /plugins/cordova-plugin-device/www/device.js (gzip)
    200 /plugins/cordova-plugin-device/src/browser/DeviceProxy.js (gzip)
    200 /plugins/cordova-plugin-splashscreen/www/splashscreen.js (gzip)
    200 /plugins/cordova-plugin-splashscreen/src/browser/SplashScreenProxy.js (gzip)
    200 /plugins/cordova-plugin-statusbar/www/statusbar.js (gzip)
    200 /plugins/ionic-plugin-keyboard/www/browser/keyboard.js
    200 /plugins/cordova-plugin-statusbar/src/browser/StatusBarProxy.js (gzip)
    200 /config.xml
    404 /node_modules/bootstrap/bootstrap.min.css
    304 /css/index.css
Community
  • 1
  • 1
Lawrence
  • 717
  • 1
  • 12
  • 25
  • You cannot serve stuff that's above the document root folder. Your entire server's hard drive would have to be open to the public for that to work. Check out the 2nd answer in the thread you linked to (you need to set up static routes). –  Sep 30 '16 at 11:32
  • 1
    @ChrisG so i compile the css and js files using grunt dist command line and move the folder over to my www folder? is that right? – Lawrence Sep 30 '16 at 12:04
  • No, I'm referring to this: http://stackoverflow.com/a/35580597/5734311 You set up static routes. Meaning you simply link `/js/bootstrap.min.js` in your HTML but tell express to also look for the files in your node_modules folder. –  Sep 30 '16 at 12:11
  • I see. will server.js be in the root folder or also in the public folder? – Lawrence Sep 30 '16 at 12:18
  • cordova uses express; I found out how to get it to work. Check my answer. –  Sep 30 '16 at 13:03

1 Answers1

1

Open project_folder/platforms/browser/cordova/run in your favorite editor. Look for

var server = cordovaServe(); // line 47 for me

Right below that, insert this:

var n_m = __dirname + '/../../../node_modules';
server.app.use('/js',  cordovaServe.static(n_m + '/bootstrap/dist/js'));
server.app.use('/css', cordovaServe.static(n_m + '/bootstrap/dist/css'));

Now include the files like this:

<link rel="stylesheet" href="/css/bootstrap.min.css">
<script src="/js/bootstrap.min.js"></script>

cordova / express will now look in the node_modules folder so the only thing you ever have to do is use npm update. Note that this only works for cordova run browser

  • 1
    So i just have to duplicate this solution to the other platforms to have it work on them as well? – Lawrence Sep 30 '16 at 13:28
  • Correct, so you probably do need to copy the files over to your www folder after all. –  Sep 30 '16 at 15:12