I set up a Jade file watcher in the following way in WebStorm. However it does not produces any HTML files.
How is it possible to convert Jade file to HTML file with WebStorm 9.0.3?
You have specified a wrong path to Jade in a Program field.
Do you have Jade installed globally? Please run 'npm install jade -g', then test jade in your system terminal by running 'jade <your jade file>.jade'. Then specify a path to installed jade script as a 'Program' in your file watcher
Related
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.
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.
I am following the MEAN stack series on PluralSight. I have reached a stage where I need to add a File Watcher in WebStorm 8 to Jade files.
The author in the video has the following path for his watcher program:
c:/nodist/bin/jade.cmd:
I cannot do the same as him because I do not have that directory! I have downloaded and extracted nodist but all I see is a bunch of files (node.exe being among them, even though I had node.js installed before).
Plus, in the /bin/ folder in the extracted nodist zip there is no jade.cmd!
How can I get the jade.cmd into the bin folder for nodist?
Install Jade using npm, like
npm install jade -g
jade.cmd will be created in your home directory, like
C:\Users\your.name\AppData\Roaming\npm\jade.cmd
and then specify this full path in the Jade file watcher
I'm trying to precompile an handlebars template with node.
I installed node but when i compile the template what i get is only opening the handlebars file in my editor!
This is che prompt cmd i use after navigating in the folder where the template is:
$ handlebars lista.handlebars -f lista.js
What is the correct way to do it?
Solution: I had the handlebars.js file inside the same directory of my templates so the prompt cmd opened that file instead of following the compile instruction!
I am trying to convert the app.js in my NodeJS project in webstorm, to application.ts. I pasted the app.js code into a new file "application.ts" and replaced "app.js" with "application.ts" in the package.json file. The .ts file is not getting converted to .js even though the FileWatcher for typescript is on and works on every other file in the project. But when I "run" the project in Webstorm, I the project actually starts and runs "app.js" which I have obviously not deleted. Not sure, what other settings need to be changed to get this right. I plan on renaming application.ts to app.ts to suit the convention, once its successfully converted.
--Update--
Here's what my typescript filewatcher settings look like:
Your file watcher is configured so that it merges all .ts files into a single main.js - see the arguments:
--out main.js
What is your application.ts - main application file? Would you like to generate a single .js for each .ts, or merge them? In the first case, you need to change the watcher arguments as follows:
--module commonjs --sourcemap $FileName$
then it will produce a singe js for each ts with name matching original ts file, with the format compatible with Node.js
To run the generated application.js instead of the original app.js from withihn WebStorm, you have to change the Node.js run configuration accordingly
By the way, if all you need is renaming 'app' to 'application', just refactor/rename original app.ts to application.ts - the generated files (.js and .map) will be updated accordingly
Some links you may find useful:
http://igorzelmanovich.blogspot.ru/2013/01/converting-existing-javascript-code-to.html
Is there a tool to convert JavaScript files to TypeScript
http://stackful-dev.com/typescript-nodejs-vim-and-linux-oh-my