TypeScript

This guide will show how to use hop in a TypeScript project.

We start by creating a hop.toml file.

hop.toml

[compile]
target = "ts"
output_path = "frontend.ts"

[dev]
server_commands = ["node server.ts"]

Now we write a simple .hop file.

index.hop

<Index {name: String}>
  Hello {name}!
</Index>

Now we compile the hop code to TypeScript.

hop compile

Now, let's define a simple backend using Express.

server.ts

import express from 'express';
import frontend from './frontend.ts';

const app = express();

app.get('/', (req, res) => {
    res.send(frontend.index({
        name: "Tobi"
    }));
});

app.listen(8080, () => {
    console.log('Server running on port 8080');
});

Now hop is integrated into the backend, and we can run

hop dev

to start the server and get hot-reloading.