TypeScript

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

We start by writing a simple hop file.

index.hop

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

Now we compile the hop code to native TypeScript code.

hop compile

Now the generated TypeScript code is available in the folder ./frontend so we can import it in the backend.

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

server.ts

import express from 'express';
import * as frontend from './frontend';

const app = express();

app.get('/', (req, res) => {
    res.send(frontend.pageIndex({
        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.