Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

July 6, 2021 04:58 pm GMT

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:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To