Temple provides a separate package for a better development
experience when working with server frameworks that utilize
the native http module. Start by installing adding
@ossph/temple-dev
to your project.
npm install --save-dev @ossph/temple-dev
Next, import the dev()
function from the package and use it in your existing
src/index.ts
file to create a development server as shown in the example below.
import http from 'http';
import temple from '@ossph/temple/compiler';
import { dev } from '@ossph/temple-dev';
//create temple compiler
const compiler = temple({ cwd: __dirname });
//1. create dev tools
const { router, refresh } = dev({ cwd: __dirname });
//create http server
const server = http.createServer(async (req, res) => {
//2. Add dev router
if (router(req, res)) return;
//if home page
if (req.url === '/') {
//3. sync builder with refresh server
refresh.sync(compiler.fromSource('./page.dtml'));
//compile the document
const html = await compiler.render('./page.dtml');
//... send response ...
}
//... other routes ...
});
//listen on port 3000
server.listen(3000);
Lastly, update the document file
src/page.dtml
to include the development script
<script src="/dev.js"></script>
as shown below.
<script>
//...
</script>
<html>
<head>
<!-- ... -->
<!-- 4. include dev script -->
<script src="/dev.js"></script>
</head>
<body>
<!-- ... -->
</body>
</html>
Run the following command in terminal.
npx ts-node src/index.ts
Whenever src/page.dtml
is updated, the development server will automatically refresh
the page. Components will also be updated in real-time.
