https://bun.sh/guides/ecosystem/vite
bun create vite my-app
cd my-app/
bun install && bun install alpinejs
bun run dev
Create a json server.
touch db.json
Run json server
json-server --watch db.json
Create a template index.html
Create src/main.js
mkdir src
touch src/main.js
build with
bun build ./src/main.js --outdir ./public
| { | |
| "weekdays": [ | |
| { "id": 1, "text": "Domingo" }, | |
| { "id": 2, "text": "Segunda" }, | |
| { "id": 3, "text": "Terça" }, | |
| { "id": 4, "text": "Quarta" }, | |
| { "id": 5, "text": "Quinta" }, | |
| { "id": 6, "text": "Sexta" }, | |
| { "id": 7, "text": "Sábado" } | |
| ] | |
| } |
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <link rel="icon" type="image/svg+xml" href="public/vite.svg" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Vite App</title> | |
| <!-- Axios --> | |
| <script src="https://unpkg.com/axios/dist/axios.min.js"></script> | |
| <script src="public/main.js" defer></script> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div | |
| id="app" | |
| x-data="getItems" | |
| > | |
| <a | |
| href="https://vitejs.dev" | |
| target="_blank" | |
| > | |
| <img | |
| src="public/vite.svg" | |
| class="logo" | |
| alt="Vite logo" | |
| /> | |
| </a> | |
| <a | |
| href="https://alpinejs.dev/" | |
| target="_blank" | |
| > | |
| <img | |
| src="https://alpinejs.dev/alpine_long.svg" | |
| class="logo vanilla" | |
| alt="JavaScript logo" | |
| /> | |
| </a> | |
| <h1>Vite and AlpineJS running with Bun</h1> | |
| <div class="card"> | |
| <button @click="isOpen = !isOpen">Toggle</button> | |
| <div> | |
| <div x-show="isOpen"> | |
| <p>Modal</p> | |
| </div> | |
| <ul> | |
| <template | |
| x-for="item in items" | |
| :key="item.id" | |
| > | |
| <li | |
| style="list-style-type: none" | |
| x-text="item.text" | |
| ></li> | |
| </template> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
| import Alpine from 'alpinejs' | |
| window.Alpine = Alpine | |
| Alpine.data('getItems', () => ({ | |
| isOpen: false, | |
| items: [], | |
| init() { | |
| this.getData() | |
| }, | |
| getData() { | |
| const url = 'http://localhost:3000/weekdays' | |
| axios.get(url) | |
| .then(response => this.items = response.data) | |
| } | |
| })) | |
| Alpine.start() |
