This content originally appeared on DEV Community and was authored by Amin
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.
This content originally appeared on DEV Community and was authored by Amin
Amin | Sciencx (2021-07-06T16:58:32+00:00) Preact, Vite, & Docker Compose in 5 easy steps. Retrieved from https://www.scien.cx/2021/07/06/preact-vite-docker-compose-in-5-easy-steps/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.