I am using pug for the first time and am trying to figure out how to use npm pug-bootstrap so I can use their layouts.
I npm installed jade-bootstrap and pug-bootstrap but cannot find in the documentation how to reference their cover bootstrap layout in my index.pug file.
I already have my server.js file and can render html onto my local port. I tried copying the cover.pug page into my index.pug page but that does not work.
I'm assuming I have to call it but I dont know how. How can I call my layouts from PUG-Bootstrap?
First remove jade-bootstrap or pug-bootstrap packages:
npm remove jade-bootstrap
npm remove pug-bootstrap
Jade was deprecated, now instead of jade it's called PUG
Install pug:
npm install pug --save
use --save if you want to install pug only to your project folder, if you will execute command without --save , package will be installed globally to you station.
Enter http://html2jade.org
Now you can create simple bootstrap html page and it will be converted to your noted pug file.
For example, If you need to include footer.pug to your index.pug .
In index pug put absolute path to footer.pug (includes/foot.pug)
References:
Include pugJs
There may be a better way but this is what I did to access Bootstrap CSS from my pug templates:
First, installed bootstrap via npm:
npm install bootstrap
This downloads and installs the bootstrap JavaScript and CSS locally on your server. I then copied the two folders out of dist to the public location on my server, i.e.:
{server directory}\node_modules\bootstrap\dist\js
{server directory}\node_modules\bootstrap\dist\css
into:
{server directory}\public\js
{server directory}\public\css
Then in my layout.pug template, simply added:
link(rel='stylesheet', href='/stylesheets/style.css')
link(rel='stylesheet', href='/css/bootstrap.min.css')
(I added the second line).
There may be a cleaner way, but this is what worked for me.
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?
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?
I'm trying to include a javascript file which is not available as bower.
So I copied it to src/main/webapp/content and referenced in index.html
In the DEV profile all is fine -- it works.
Now, after generating WAR file with the PROD profile, the custom.js file is not included in the WAR (tried to unpack -- file is not there).
I have discovered the gulp is merging all css and js files, did I miss a config for this?
When the app is loaded, the browser complains with 404 in the index.html -- js file not found.
How can I fix this? What is the right way to include JS (or CSS) file into JHipster app?
Thank you.
JS are not expected to be in content folder.
For CSS, copy your file to src/main/webapp/content/css.
For JS, copy your file to src/main/webapp/app possibly in a dedicated sub folder.
You don't have to inject them in index.html, gulp will do it for you. I suppose you did not see it in dev profile because you were not running gulp serve as explained in the doc
I installed angular2 in node_module, but as node_module is not static directory I can not use links of angular and its dependencies on html page.
what could be the proper way of doing this ?
Copy it somewhere in public folder, for example: js/vendor/...
This is usual way, otherwise you can break your application on npm update
Question 1:
What exactly is the purpose of installing Twitter Bootstrap through npm? I thought npm was meant for server side modules. Is it faster to serve the bootstrap files yourself than using a CDN?
Question 2:
If I were to npm install Bootstrap, how would I point to the bootstrap.js and bootstrap.css files?
If you NPM those modules you can serve them using static redirect.
First install the packages:
npm install jquery
npm install bootstrap
Then on the server.js:
var express = require('express');
var app = express();
// prepare server
app.use('/api', api); // redirect API calls
app.use('/', express.static(__dirname + '/www')); // redirect root
app.use('/js', express.static(__dirname + '/node_modules/bootstrap/dist/js')); // redirect bootstrap JS
app.use('/js', express.static(__dirname + '/node_modules/jquery/dist')); // redirect JS jQuery
app.use('/css', express.static(__dirname + '/node_modules/bootstrap/dist/css')); // redirect CSS bootstrap
Then, finally, at the .html:
<link rel="stylesheet" href="/css/bootstrap.min.css">
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
I would not serve pages directly from the folder where your server.js file is (which is usually the same as node_modules) as proposed by timetowonder, that way people can access your server.js file.
Of course you can simply download and copy & paste on your folder, but with NPM you can simply update when needed... easier, I think.
The point of using CDN is that it is faster, first of all, because it is a distributed network, but secondly, because the static files are being cached by the browsers and chances are high that, for example, the CDN's jquery library that your site uses had already been downloaded by the user's browser, and therefore the file had been cached, and therefore no unnecessary download is taking place. That being said, it is still a good idea to provide a fallback.
Now, the point of bootstrap's npm package
is that it provides bootstrap's javascript file as a module. As has been mentioned above, this makes it possible to require it using browserify, which is the most likely use case and, as I understand it, the main reason for bootstrap being published on npm.
How to use it
Imagine the following project structure:
project
|-- node_modules
|-- public
| |-- css
| |-- img
| |-- js
| |-- index.html
|-- package.json
In your index.html you can reference both css and js files like this:
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
Which is the simplest way, and correct for the .css files. But it is much better to include the bootstrap.js file like this somewhere in your public/js/*.js files:
var bootstrap = require('bootstrap');
And you include this code only in those javascript files where you actually need bootstrap.js. Browserify takes care of including this file for you.
Now, the drawback is that you now have your front-end files as node_modules dependencies, and the node_modules folder is usually not checked in with git. I think this is the most controversial part, with many opinions and solutions.
UPDATE March 2017
Almost two years have passed since I wrote this answer and an update is in place.
Now the generally accepted way is to use a bundler like webpack (or another bundler of choice) to bundle all your assets in a build step.
Firstly, it allows you to use commonjs syntax just like browserify, so to include bootstrap js code in your project you do the same:
const bootstrap = require('bootstrap');
As for the css files, webpack has so called "loaders". They allow you write this in your js code:
require('bootstrap/dist/css/bootstrap.css');
and the css files will be "magically" included in your build.
They will be dynamically added as <style /> tags when your app runs, but you can configure webpack to export them as a separate css file. You can read more about that in webpack's documentation.
In conclusion.
You should "bundle" your app code with a bundler
You shouldn't commit neither node_modules nor the dynamically built files to git. You can add a build script to npm which should be used to deploy files on server. Anyway, this can be done in different ways depending on your preferred build process.
Answer 1:
Downloading bootstrap through npm (or bower) permits you to gain some latency time. Instead of getting a remote resource, you get a local one, it's quicker, except if you use a cdn (check below answer)
"npm" was originally to get Node Module, but with the essort of the Javascript language (and the advent of browserify), it has a bit grown up. In fact, you can even download AngularJS on npm, that is not a server side framework. Browserify permits you to use AMD/RequireJS/CommonJS on client side so node modules can be used on client side.
Answer 2:
If you npm install bootstrap (if you dont use a particular grunt or gulp file to move to a dist folder), your bootstrap will be located in "./node_modules/bootstrap/bootstrap.min.css" if I m not wrong.
Use npm/bower to install bootstrap if you want to recompile it/change less files/test. With grunt it would be easier to do this, as shown on http://getbootstrap.com/getting-started/#grunt.
If you only want to add precompiled libraries feel free to manually include files to project.
No, you have to do this by yourself or use separate grunt tool. For example 'grunt-contrib-concat' How to concatenate and minify multiple CSS and JavaScript files with Grunt.js (0.3.x)