I've been playing with lowkey ways of deploying javascript apps using vite, webcomponents, and simple express servers. This gets you a huge part of the way with a simplicity that makes things without a whole lot of ceremony. Figuring out vue, svelte or react always seems like a whole lot of overkill for small side projects.

Here's how I put together a simple javascript app with a backend that can be deployed on something like https://fly.io/. If you use their persisent volumes then its super easy to get a sqlite3 database up and running.

1

  npm i express vite cors

Something like this:

package.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

  {
      "type": "module",
      "scripts": {
          "dev": "node app.js & vite",
          "build": "vite build"
      },
      "optionalDependencies": {
          "@rollup/rollup-linux-x64-gnu": "4.6.1"
      },
      "dependencies": {
          "cors": "^2.8.5",
          "express": "^4.19.2",
          "vite": "^5.2.7"
      }
  }

app.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

  import express from 'express';
  import { createServer } from 'node:http';
  import cors from 'cors';

  const app = express();
  if( import.meta.env.MODE == 'development' ) {
      app.use(cors())
  }
  app.use(express.static('dist'))

  // Other server code

  server.listen(3000, () => {
    console.log('server running on port 3000');
  });

index.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<!doctype html>
<html>
  <head>
    <title>Client</title>
    <script src="client.js" type="module"></script>
  </head>
  <body style="margin: 0">
    <div style="height: 100vh" id="terminal"></div>
  </body>
</html>

And put your client code into client.js

1
2

  const host = import.meta.env.MODE == 'development' ? "http://localhost:3000/" : undefined
  console.log( "Our base url is ", host );

Dockerfile

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

FROM node:20.12.0-bookworm

WORKDIR /usr/app

COPY package* ./
RUN npm install

COPY . ./
RUN npx vite build

EXPOSE 3000

CMD node app.js