website/server.js

import express from 'express'
import { createServer as createViteServer } from 'vite'
import { getDevRoutesMetadata } from './meta/routes.js'

import fetch from 'node-fetch'

import { readFile } from 'fs/promises'
import { dirname, resolve } from 'path'

import morgan from 'morgan'

import { fileURLToPath } from 'url'
const __dirname = fileURLToPath(new URL('.', import.meta.url))

async function main() {
    const routes = await getDevRoutesMetadata('http://127.0.0.1:4000/api/development/routes')

    console.log('Found static routes:')
    for (const [route, file] of Object.entries(routes.static)) {
        console.log(`- ${route} -> "${file}"`)
    }

    console.log('Found dynamic routes:')
    for (const [route, file] of Object.entries(routes.dynamic)) {
        console.log(`- ${route} -> "${file}"`)
    }

    const app = express()
    app.use(morgan(':method :url :status :response-time ms - :res[content-length]'))

    const vite = await createViteServer({
        server: { middlewareMode: true },
        appType: 'custom',
    })

    app.use(vite.middlewares)

    for (const [route, file] of Object.entries(routes.static)) {
        app.get(route, async (req, res) => {
            console.log(`Requested static route "${route}":`)

            let htmlPage = await readFile(resolve(__dirname, './frontend/', file), 'utf8')

            // Replace "./" with the absolute path of the html page
            htmlPage = htmlPage.replace(/\.\//g, '/' + dirname(file) + '/')

            console.log(`- applying vite transformations for "${file}"`)
            const html = await vite.transformIndexHtml(file, htmlPage)

            console.log(`- sending resulting page for "${route}"`)
            res.writeHead(200, { 'Content-Type': 'text/html' }).end(html)
        })
    }

    for (const [route, file] of Object.entries(routes.dynamic)) {
        app.get(route, async (req, res) => {
            console.log(`Requested dynamic route "${route}":`)

            let htmlPage = await readFile(resolve(__dirname, './frontend/', file), 'utf8')

            // Replace "./" with the absolute path of the html page
            htmlPage = htmlPage.replace(/\.\//g, '/' + dirname(file) + '/')

            console.log(`- applying vite transformations for "${file}"`)
            const html = await vite.transformIndexHtml(file, htmlPage)

            console.log(`- applying server transformations for "${file}"`)
            const templateHtmlReq = await fetch('http://127.0.0.1:4000/api/development/render', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    route,
                    page: html,
                    request: {
                        params: req.params,
                        query: req.query,
                    },
                }),
            })

            const renderedHtml = await templateHtmlReq.json()

            console.log(`- sending resulting page for "${route}"`)
            res.writeHead(200, { 'Content-Type': 'text/html' }).end(renderedHtml)
        })
    }

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

main()