Hello World In Zare

To create your first Hello World program using Zare, you need to set up a simple Node.js server with Express and use Zare as the template engine.

1. Set Up Your Project

First, create a new folder for your project and initialize it with npm.


mkdir zare-hello-world
cd zare-hello-world
npm init -y

2. Install Dependencies

Install Express and Zare via npm:


npm install express zare

3. Create Your Project Files

Now, create the following files in your project:

app.js (Main server file)
views/index.zare (ZARE template file)

app.js

This file will set up your Express server and configure it to use Zare as the template engine.

app.js


import express from "express";
const app = express();
 
// Set the view engine to Zare
app.set('view engine', 'zare');
 
// Define a route for the homepage
app.get('/', (req, res) => {
  // Render the 'index' template and pass a 'message' variable
  res.render('index', { message: 'Hello, World!' });
});
 
// Start the server
app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

views/index.zare

This is your Zare template where you’ll display the dynamic content. The @( ) syntax is used to inject variables into the HTML.

views/index.zare


serve (
    <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>My First Zare App</title>
    </head>
    <body>
      <h1>@(message)</h1>
    </body>
    </html>
)

4. Run the Application

Once the files are set up, go back to your terminal and run the following command:


node app.js

5. Open the Browser

Now, open your browser and go to http://localhost:3000 . You should see:


Hello, World!

How It Works:

Express Setup: You created a basic Express server that listens on port 3000.
Zare Template: The res.render('index', { message: 'Hello, World!' }); line tells Express to render the index.zare file, passing the message data to it.
Dynamic Content: The @(message) inside the index.zare file gets replaced with Hello, World!, which is passed from the server.