breachofmind / grenade

A templating library for node/express, influenced by Laravel's Blade
1 stars 0 forks source link

Express problem #1

Closed ghost closed 7 years ago

ghost commented 7 years ago

Hi There

I'm going to use this template engine with express I did the following :

var grenade = require('grenade');
var express = require('express');

var app = express();

grenade.express(app, {
    rootPath: './views',
    extension: 'frag'
});

app.get("/", function(req, res) {
    grenade.load('index', function(err, template) {
        console.log("worked");
    });
});

app.listen(3000, function() {
    console.log("Server has started on port 3000");
});

but I get error , I created a folder named views and index.frag with a simple h1 tag in it would you please help me with this

ghost commented 7 years ago

I could finally get it work but , something seems weird , is this the right way to use this???

var grenade = require('grenade');
var express = require('express');

var app = express();

grenade.express(app, {
    rootPath: './views',
    extension: 'frag'
});

// All the available options.
var options = {

    // The root view path. Views are loaded relative to this directory.
    rootPath: __dirname + "/views/",

    // The path of your Component javascript classes.
    componentPath: __dirname + "/components/",

    // The file extension.
    extension: 'frag',

    // Pretty print the output? Useful for debugging.
    prettyPrint: false,

    //Uses js-beautify module.
    prettyPrintOptions: {},

    // Your variables are prepended with this. ie, ${data.varName}
    localsName: "data",

    // Enable template caching? True for production mode.
    enableCache: false,

    // Use promises for rendering?
    // This could make rendering slower, but allows more flexibility.
    promises: true,

    // This is a regex. Change to whatever.
    delimiters: grenade.utils.DELIM_HANDLEBARS
        //delimiters: grenade.utils.DELIM_JAVASCRIPT
};

app.get("/", function(req, res) {
    // This will load and compile the file "./views/content.htm";
    grenade.load('index', options, function(err, template) {

        var data = { title: "Hello World" };

        // You can do the promise way, or not.
        if (options.promises) {
            return template(data).then(result => {
                //console.log(result);
                res.send(result);
            })
        }
        console.log(template(data));
    });
});

app.listen(3000, function() {
    console.log("Server has started on port 3000");
});
breachofmind commented 7 years ago

Hi, thanks for your interest in this project. Sorry about the docs, they were written pretty quickly!

Provided your view looks something like this:

<h1>${data.title}</h1>

You have to be sure to set the view engine in your express app, and then you can use your res.render() method.

const express = require('express');
const grenade = require('grenade');
const path = require('path');

var app = express();

grenade.express(app, {
  rootPath: path.resolve(__dirname, 'views'),
  extension: 'frag'
})
app.set('view engine', 'frag');

app.get('/', (req, res) => {
  const data = { title: 'Hello' }
  res.render('index', data);
});

app.listen(3000, () => {
  console.log('Listening on 3000');
});
ghost commented 7 years ago

Well, Thank you so much for answering me, in fact, not only I am interested in your project I can say I love it, in fact I hate ejs :)) I could get it to work , I found out that when we use @extends I need to add "/" before the name of the master file @extends(master) the above line caused error that the grenadeTest/viewmaster.frag doesn't exist and I added a "/" before the name of the file and the problem solved : @extends(/master)

keep working on it, if you need help for documentation you can count on me, everybody who switch from Laravel to nodejs will gonna love this

breachofmind commented 7 years ago

Thanks, glad to hear it! Coming from laravel, I was also wholly unsatisfied with EJS or pug. To solve that issue with the dir separator, I suppose you could try adding it to your rootpath:

{
  rootPath: path.resolve(__dirname, 'views') + '/'
}

Hopefully that works. Let me know if you have any other issues implementing.