I'm trying to use Ember in a Node + Express based project. I put client code under public/javascript and serve it using the index.jade file that we have by default in every express project. I need to use handlebars template for my client views but I can't figure out how to do this. Where should I put my template files and how the node server will compile and serve them ? Thanks!
I like to use this library for the Handlebars templating with node.js + express.
https://github.com/donpark/hbs
Here are the steps to start using Handlebars in your node + express setup
Install the hbs npm module with
npm install hbs --save
Import the module and change the view engine to use hbs.
var hbs = require('hbs')
app.set('view engine', 'hbs');
(Optional) To use partials, you ll need to register partials.
hbs.registerPartials(__dirname + '/views/partials');
The files should be in the views folder with an extension of .hbs. You can change this if need be.
app.set('views', path.join(__dirname, '<your_folder_name>'));
Check here more for partial naming conventions https://github.com/donpark/hbs
Related
after configuring webpack in express and then an new folder fomed but when
i run bundle.js it successfully give a meassage- server is running on port 3000
bout when i hit api http://localhost:3000/api/test it gives loads whole bundle .js in console
and give error as
Error: Cannot find module 'pug'
at t (D:\wfh\Frontend-3.0-20220119T061742Z-001\Frontend-3.0\compressed\bundle.js:2:840468)
at new p (D:\wfh\Frontend-3.0-20220119T061742Z-001\Frontend-3.0\compressed\bundle.js:2:839766)
or can anyone tell me how not to have index.html output i want index.pug output
This is what I did on my sample project, try it out and see if it works for you too.
Basically, in your server.js (or whichever is the name of your entry server JS file), add the following:
app.set('views', path.join(DIST_DIR));
app.set('view engine', 'pug');
app.engine('pug', require('pug').__express); // <-- add this line
...
then try and build your project again.
I got the reference from the link below although it's for EJS.
https://stackoverflow.com/a/53897810/11826301
I try serve bower_components directory who's a location is in root path to include jQuery and Bootstrap frameworks. Node has default serve a public directory. Below is my snippet code, but is not working. I have correctly installed bootstrap framework and jQuery. I used a bower. What I do wrong?
app.use('/', feathers.static(app.get('public')))
.use('jquery', feathers.static(__dirname + '../../bower_components'))
.use('bootstrap', feathers.static(__dirname + '../../bower_components'));
If you want to do it this way you have to link to the actual folder within bower_components:
const path = require('path');
const bowerComponents = path.join(__dirname, '..', '..', 'bower_components');
app.use('/', feathers.static(app.get('public')))
.use('/jquery', feathers.static(path.join(bowerComponents, 'jquery'))
.use('/bootstrap', feathers.static(path.join(bowerComponents, 'bootstrap')));
I am having problems in setting partial view paths in nodeJs + expressJs. Below is my directory structure.
Directory Structure
packages
--Module1
----Views
------sample.ejs
--sharedModule
----Views
------partials
--------Module1.ejs
--------partialHTML.ejs //able to use in index.ejs
------index.ejs //Used : <% include partials/partialHTML%>
ExpressJS:
var express = require('express');
var app = express();
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'packages/sharedModule/views'));
I am able to use 'partialHTML.ejs' in index.ejs file using <% include partials/partialHTML%>..
How can i use Module1.ejs files under Module1/view/sample.ejs file ?
You've set packages/sharedModule/views as your views directory, sample.ejs is no where under that dir, it's under another path. That's why it's not found.
In Linux you could create a soft link to point the shared views Module1/views/sharedviews ==> ../../sharedModule/views, then set your Module1 as the root path for views -
app.set('views', path.join(__dirname, 'packages/Module1/views'));
So when you look for any view, it's guaranteed to be found, since now your views dir has both Module1 and sharedModule views.
I have this node.js project, it uses jade template. But I need to use simple html pages. Guideline needed for safe transformation.
I need to use complete .html pages like index.html, login.html. Without any template engine to show at routes like localhost:3000 and localhost:3000/login.html. Which should work with full functionality.
You can change it in config/express.js:
app.set('view engine', 'jade')
For example, if you want to use Handlebars, then remove "jade": "latest", in packages.json and add "handlebars": "latest". Then run npm install and edit config/express.js:
app.set('view engine', 'handlebars')
Express server static html files by default.
Place your html files in /public folder:
...
/public
index.html
login.html
...
and go localhost:3000/ or localhost:3000/login.html
but this is static files and then the application logic should be on the front-end. For example using angular or backbone.
app.get('/any_location', function(req, res){
res.sendFile('Location_to_htmlFile');
})
i started using railway (a node.js mvc framework) and i want to use sass/less/stylus as a css render engin.
i couldn't find how to configure that in railway.
railway uses express.js so i guess i can install it via that.
i already installed stylus (and all the rest) via npm install stylus.
i also uses stylesheet_link_tag to link to my css files.
any advice will be appreciated.
use https://github.com/emberfeather/less.js-middleware.
its give u what u need
after some research and thanks to my friend #sivan here, i found the answer.
the steps to integrate css rendering engin are (i'll demonstrate with stylus, but the rest are similar):
install stylus
npm install stylus
npmfile.js
require('stylus');
environment.js
var stylus = require('stylus');
app.configure(function(){
var cwd = process.cwd(); //your root directory
app.use(stylus.middleware({
src: __dirname + '/public', //your *.styl files here
compress: true
}));
app.use(express.static(cwd + '/public', {maxAge: 86400000}));
...
}
then create a file ending with .styl extension. for example: public/stylsheets/style1.styl
#div2
color blue //your css here
and simply link to this generated .css file from your html page
<%- stylesheet_link_tag('style1') %>
more about stylus middleware here.
hope it will save time to whoever will get into the same issue.