Node, Express, TypeScript, and Handlebars Setup (THEN Stack)

mkdir <my-new-project>
cd <my-new-project>
npm i --save express express-handlebars drizzle-orm better-sqlite3
npm i --save-dev @types/express @types/express-handlebars @types/nedb @types/node ts-node typescript drizzle-kit

Initial Directory Structure

my-new-project
|- src
|  |- public
|  |- views
|  |--|- home.handlebars
|  |--|- layouts
|  |--|--|- main.handlebars
|  |- main.ts

Initial `main.ts`

import path from "path";
import express, { Express, NextFunction, Request, Response } from "express";
import { engine } from "express-handlebars";

const port = 3000;

const app: Express = express();

app.use(express.json());
app.use("/", express.static(path.join(__dirname, "")));
app.engine("handlebars", engine());
app.set("view engine", "handlebars");
app.set("views", path.join(__dirname, "views"));

app.get("/", (_req: Request, res: Response) => {
  res.render("home");
});

app.listen(port, () => {
  console.log(`Listening on port: ${port}`);
});

Initial `home.handlebars`

<h1>Example App: Home</h1>

Initial `main.handlebars`

<html>
  <head>
    <meta charset="utf-8" />
    <title>Example App</title>
  </head>
  <body>

    {{{body}}}

  </body>
</html>

Add Script

Add the following to scripts section os package.json

"dev": "ts-node watch ./src/main.ts",

Follow Tutorial to Bootstrap Drizzle

For local in-memory db, just omit all of the connection config for supabase and just put a db filename instead. For example:

import { drizzle } from 'drizzle-orm/better-sqlite3';
import Database from 'better-sqlite3';

const sqlite = new Database('sqlite.db');
const db = drizzle(sqlite);

const result = await db.select().from(users);

Drizzle with Supabase Database

donhamiltoniii/node-express-ts-handlebars.md