27
Preact, Vite, & Docker Compose in 5 easy steps
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/nodeAdd these lines to
vite.config.js.export default {
esbuild: {
jsxFactory: "h",
jsxFragment: "Fragment"
}
};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);
}Add these lines to
index.html.<!DOCTYPE html>
<html>
<body>
<div id="app"></div>
<script src="./index.jsx" type="module"></script>
</body>
</html>Run the following commands.
$ docker-compose run yarn add preact vite
$ docker-compose run --publish 3000:3000 yarn vite --host
$ open http://localhost:3000You 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 buildThank 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.
27