vite-plugin-ssr example with automatic TLS

This example modifies the default vite-ssr-project template generated by vite-plugin-ssr to add automatic TLS using @small-tech/https (via mkcert during development and via Let’s Encrypt during production) and @small-tech/cross-platform-hostname.

Install and run

1. Clone this repository.
2. Install dependencies: npm i
3. Run it: npm run dev
4. Hit https://localhost in your browser.

Recreate the example

Here is a short tutorial on how to recreate this example, starting with the default vite-plugin-ssr vue template:

1. Scaffold a new vite-plugin-ssr app and choose the vue template:

   npm init vite-plugin-ssr@latest

2. Install the dependencies:

   npm i @small-tech/https
   npm i @small-tech/cross-platform-hostname

3. Modify server/index.js to:

   1. Load the dependencies:

      const https = require('@small-tech/https')
      const hostname = require('@small-tech/cross-platform-hostname')
      
      const path = require('path')
      const fs = require('fs')
      const os = require('os')

   2. Manually load the development certificate material and pass it to the Vite development server to enable Hot Module Reloading (HMR). This is what the startServer() function looks like once that’s been done:

      async function startServer() {
        const app = express()
      
        let viteDevServer
        if (isProduction) {
          app.use(express.static(`${root}/dist/client`, { index: false }))
        } else {
          // Set Vite server up as middleware and configure HMR to use
          // same development-time certificate as used by @small-tech/https.
          const certificateDirectory = path.join(os.homedir(), '.small-tech.org', 'https', 'local')
          const cert = fs.readFileSync(path.join(certificateDirectory, 'localhost.pem'), 'utf-8')
          const key = fs.readFileSync(path.join(certificateDirectory, 'localhost-key.pem'), 'utf-8')
      
          const vite = require('vite')
          viteDevServer = await vite.createServer({
            root,
            server: {
              middlewareMode: true,
              https: {
                cert,
                key
              }
            },
          })
          app.use(viteDevServer.middlewares)
        }

   3. Use @small-tech/https to create and start your server:

      const server = isProduction ?
        https.createServer({ domains: [hostname] }, app) : https.createServer(app)
      
      server.listen(443, () => {
        console.log(`Server running at https://${isProduction ? hostname : 'localhost'}`)
      })

That’s it!

Test it (development)

Run npm run dev and hit https://localhost

Test it (production)

1. Expose your dev machine using something like PageKite or ngrok
2. Run npm run prod
3. Hit https://your.hostname

(In production, the first load will take a few seconds as your Let’s Encrypt certificates are automatically provisioned for you.)