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.
Related
I'm making a web page index.html say.
I used to download jQuery.min.js and put it in the same folder and add to index.html the tag `".
Then I got a bit more sophisticated and replaced the src with the URL of a CDN.
Now I've been told that I have to use npm and webpack. I see that npm creates a folder node_modules. So do I just src="node_modules/jquery/jquery.min.js"?
Refer here
You simply place it under scripts: array in your webpack configuration file.
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've started reading up on Node and Express with the intention of porting a few projects of mine over to it. The projects I'm porting are currently built with Python and Flask, and styled with Bootstrap.
I'm having difficulties getting a basic Express site up and running with Bootstrap as the styling. I used express-generator to get the basic skeleton set up, and then used npm to install bootstrap:
npm install bootstrap
I added bootstrap as a requirement, and as a middleware:
var bootstrap = require('bootstrap');
app.use('bootstrap');
Now I'm just not sure how to "import" that into my layout template. If someone could show me an example, or point me to a resource, that'd be great.
Nodejs is used on the backend there is no need to npm install bootstrap. Node will serve your html or jade/pug/ejs etc.
You can use a CDN and link the files in the html or pug. You can also choose to include the CSS and JS files required for bootstrap in the /public directory.
Using the Express generator is a great start, you can specify your templating engine (i.e. jade/pug, ejs etc.) or just use html. Jade/Pug will compile into HTML and be served to the front end (client side). You can include the CDN link within your jade/pug file, similar to how you would include it in regular HTML. You might want to read some documentation for pug/jade since it has a more minimalistic syntax than html, Pug Docs.
To use pug/jade enter the following command (provided you have express generator npm installed already):
express --pug --css
To use html only enter the following command (provided you have express generator npm installed already):
express --no-view --css
The commands above will create the template, all you have to do is include the CDN link within the /view/layout.pug file and you can use bootstrap. Basic routing has been defined, just npm install, and npm start.
You do not need bootstrap as a node module since bootstrap is a front end thing. You'd be better off doing a bower.
Goto your terminal
sudo npm install bower -g
Then, once you have that make a .bowerrc file
nano .bowerrc
set the default directory as public in that file
{
"directory":"./public"
}
Then, finally, do this-
bower install bootstrap --save
That will fetch bootstrap for your styles. If you want to pass data from the server to the htmls, try one of the templating engines like ejs or jade and then later add the cols in there to be rendered as html to the client.
When I use bower to install Jquery in my node project,the tree
structure of files that get created is as depicted in below image[/bower_components/jquery].
I use .js files in "dist" folder to include in my ejs views.
But I do not know the purpose of "src" folder , when and where it should be used.
src contains the library's source code. You only need it if you want to compile jQuery yourself.
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