As projects grow, it’s incredibly common to find yourself working with multiple technologies at the same time. If you are working on a stack that uses PHP’s Smarty Template Engine, you might find yourself wanting to reuse those exact same templates on the JavaScript side—specifically within a Node.js environment.

Instead of rewriting your templates from scratch, you can use jSmart. jSmart is a complete port of Smarty to JavaScript, allowing it to function seamlessly both in the browser and in CommonJS environments like Node.js.

Here is a quick, step-by-step guide to getting jSmart up and running in Node.js.

Step 1: Install jSmart

First, pull the jSmart from NPM Registry into your project:

npm install jsmart --save

npm install jsmart --save

Step 2: Create a Sample Template

Next, let’s create a simple template file containing the data variables we want to render. Create a file named demo.tpl and add the following content:

Hello {$name}

Hello {$name}

Step 3: Set Up Your JavaScript File

Create a file named demo.js in the same directory. We will start by importing the necessary fs (File System) module and requiring jsmart:

var fs = require('fs');
require('jsmart');

var fs = require('fs');
require('jsmart');

Step 4: Read and Compile the Template

Now, we need to read the contents of our template file and pass it to jSmart. This will compile the template and prepare it for rendering:

var fs = require('fs');
require('jsmart');

// Read the template file
var tpl = fs.readFileSync('./demo.tpl', {encoding: 'utf-8'});

// Compile the template with jSmart
var compiledTpl = new jSmart(tpl);

var fs = require('fs');
require('jsmart');

// Read the template file
var tpl = fs.readFileSync('./demo.tpl', {encoding: 'utf-8'});

// Compile the template with jSmart
var compiledTpl = new jSmart(tpl);

Note: I am using fs.readFileSync here strictly for demonstration purposes to keep the code simple. For real-world production apps, reading files asynchronously is highly recommended to leverage Node.js’ non-blocking strengths.

Step 5: Inject Data and Fetch Output

With the template compiled, we are ready to inject our data object and capture the final rendered output using the .fetch() method:

var fs = require('fs');
require('jsmart');

var tpl = fs.readFileSync('./demo.tpl', {encoding: 'utf-8'});
var compiledTpl = new jSmart(tpl);

// Pass data to the template and get the output
var output = compiledTpl.fetch({name: 'World'});
console.log(output);

var fs = require('fs');
require('jsmart');

var tpl = fs.readFileSync('./demo.tpl', {encoding: 'utf-8'});
var compiledTpl = new jSmart(tpl);

// Pass data to the template and get the output
var output = compiledTpl.fetch({name: 'World'});
console.log(output);

Step 6: Run the Script

Save your demo.js file, open your terminal, and execute it:

$ node demo.js

$ node demo.js

You should see the output printed right in your terminal:

Hello World

Hello World

Going Beyond the Basics

This demo covers a very basic, introductory example, but jSmart allows you to use almost all the features you’re familiar with in native Smarty.

• Documentation: You can find the full documentation and advanced usage guides on the jSmart Wiki.
• More Examples: If you clone the jSmart repository on GitHub, you will find plenty of pre-built examples demonstrating how it works in browsers, Node.js, and setups using require.js.

If you want to see a guide on more advanced integrations, feel free to drop a request in the comments below, and I’ll be happy to put together a follow-up post!

UPDATE (06/11/2017):

jSmart now features dedicated plugins that make it much easier to integrate into popular build tools and web frameworks. Here are a few official packages you can drop right into your current workflow:

• Express JS Integration: https://www.npmjs.com/package/jsmart-express
• Webpack Loader: https://www.npmjs.com/package/jsmart-loader
• Grunt Task: https://www.npmjs.com/package/grunt-jsmart