To install dependencies:
bun installTo run:
bun devThis project was created using bun init in bun v1.0.22. Bun is a fast all-in-one JavaScript runtime.
wsl --install -d <Distribution Name>curl -fsSL https://bun.sh/install | bashbun initMake sure you set the index file to be src/index.tsx
bun add elysia// package.json
{
"scripts": {
"dev": "bun --watch src/index.tsx",
"build": "bun build src/index.tsx",
"start": "NODE_ENV=production bun src/index.tsx",
"test": "bun test"
}
}// tsconfig.json
{
"compilerOptions": {
"strict": true
}
}bun install --save-dev --save-exact prettier// .prettierrc
{
"arrowParens": "always",
"bracketSameLine": false,
"bracketSpacing": true,
"semi": true,
"experimentalTernaries": true,
"singleQuote": false,
"jsxSingleQuote": false,
"quoteProps": "as-needed",
"trailingComma": "all",
"singleAttributePerLine": false,
"htmlWhitespaceSensitivity": "css",
"vueIndentScriptAndStyle": false,
"proseWrap": "preserve",
"insertPragma": false,
"printWidth": 80,
"requirePragma": false,
"tabWidth": 4,
"useTabs": false,
"embeddedLanguageFormatting": "auto"
}Use the prettier playground to set your own prefferences.
bun add @elysiajs/html// tsconfig.json
{
"compilerOptions": {
"jsx": "react",
"jsxFactory": "Html.createElement",
"jsxFragmentFactory": "Html.Fragment"
}
}bun install --save typed-html// tsconfig.json
{
"compilerOptions": {
"jsx": "react",
"jsxFactory": "elements.createElement"
}
}// example.tsx
import * as elements from "typed-html";bun install concurrently// package.json
"scripts": {
"dev": "concurrently \"bun --watch src/index.tsx\" \"bunx tailwindcss -i ./src/assets/css/input.css -o ./src/assets/css/output.css --watch\""
},bun install -D tailwindcssbunx tailwindcss init// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: ["./src/**/*.{html,js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
};/* src/assets/css/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;bunx tailwindcss -i ./src/input.css -o ./src/output.css --watch// index.tsx
.get("styles.css", () => Bun.file("src/assets/css/output.css")// baseHTML.tsx
<link rel="stylesheet" href="styles.css">bun install -D prettier prettier-plugin-tailwindcss// .prettierrc
"plugins": ["prettier-plugin-tailwindcss"]<!-- BaseHTML.tsx -->
<script src="https://unpkg.com/htmx.org@1.9.10"></script>install -D @tailwindcss/typography// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
plugins: [require("@tailwindcss/typography")],
};