An Interest In:
Web News this Week
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
- April 13, 2024
- April 12, 2024
July 6, 2021 04:58 pm GMT
Original Link: https://dev.to/aminnairi/preact-vite-docker-compose-in-5-easy-steps-j21
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.
Original Link: https://dev.to/aminnairi/preact-vite-docker-compose-in-5-easy-steps-j21
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To