How to properly include twitter bootstrap in electron app?

Question

This is my first electron app, which is based on quick-start app. I want to add twitter bootstrap's css. So I installed it like this:

npm install bootstrap

And included in the index.html like this:

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

When I run: npm start from terminal it works fine. However when I try to build it using electron-packager like this:

npm run build

I get a native mac app "myApp.app", but when I open it, I don't see the styles.

The only files in the application aside from node_modules and package.json are: main.js and index.html and both are in the root dir.

Is there a step here that I am missing?

Edit

I realized that the application is looking for the css file in Resouces/app directory. Is it the responsibility of the build tool to include the css file, or should I include it manually? If I have to take care of this, did I even needed to install bootstrap from npm?

Answer 1

Check your package.json file: is bootstrap listed as a dependency? Probably not since it doesn't look like you are using the --save param:

npm install bootstrap --save

I'm no Electron hero: I happen to be working on a project using fs-jetpack at the moment. I deleted the fs-jetpack entry from from my project.json and did an OSX build using electron-packager. On launch I got a script error about missing "fs-jetpack'. From that I conclude that the packager uses the 'package.json` to know what to include. Maybe I'm wrong? I have "--prune=true" as one of the packager params. Maybe without that it includes everything?

Also, I am surprised that this line works for you:

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

but perhaps you are using a different folder structure where the index.html file is not in the app directory?