Preact, Vite, & Docker Compose in 5 easy steps

Requirements

  • Docker
  • Docker Compose
  • A terminal emulator
  • A text editor

Docker Compose

Add these lines to docker-compose.yaml.

version: "3"

services:
  yarn:
    image: node:16.0.0
    user: node
    working_dir: /home/node
    tty: true
    stdin_open: true
    entrypoint: yarn
    command: --help
    volumes:
      - .:/home/node

Vite

Add these lines to vite.config.js.

export default {
  esbuild: {
    jsxFactory: "h",
    jsxFragment: "Fragment"
  }
};

Preact

Add these lines to index.jsx.

import {h, render} from "preact";
import {useCallback} from "preact/hooks";

const App = () => {
  const onButtonClick = useCallback(() => alert("Hello, Preact"), []);
  return (
    <button onClick={onButtonClick}>
      Hello
    </button>
  );
};

const app = document.getElementById("app");

if (app) {
  render(<App />, app);
}

HTML

Add these lines to index.html.

<!DOCTYPE html>
<html>
  <body>
    <div id="app"></div>
    <script src="./index.jsx" type="module"></script>
  </body>
</html>

Run

Run the following commands.

$ docker-compose run yarn add preact vite
$ docker-compose run --publish 3000:3000 yarn vite --host
$ open http://localhost:3000

That's it

You can now build your next awesome Preact application using the awesome Vite bundler running anywhere with Docker Compose.

Use this command to generate your optimized build.

$ docker-compose run yarn vite build

Thank you Evan, I can now dev on my 2 cores @1GHz laptop using Docker Compose without going for a coffee break between each updates on my projects.

18

Tags:

PreactViteTutorialWebdev