https://github.com/zsakowitz/esbuild-template
https://github.com/zsakowitz/esbuild-template
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/zsakowitz/esbuild-template
- Owner: zsakowitz
- License: other
- Created: 2025-04-19T16:48:37.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-19T16:53:02.000Z (about 1 year ago)
- Last Synced: 2025-05-05T06:15:18.602Z (about 1 year ago)
- Language: HTML
- Size: 25.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
This is a single-page application template which uses esbuild, tailwindcss,
TypeScript, and Bun.
## Your code
- `src/index.ts`: where you write your code
- `src/index.dev.html`: the development HTML template
- `src/index.prod.html`: the production HTML template
- `src/index.postcss`: your CSS
**Run `bun tw` and `bun esb` in separate terminals to start developing.**
## Other files
- `src/index.dist.d.css.ts`: a declaration file so TypeScript knows
`index.dist.css` exists and can be imported without causing an error
## Generated files
- `src/index.postcss.css`: the compiled postcss and tailwind code (this isn't in
`dist` so that esbuild doesn't override it accidentally)
- `dist/...`: esbuild's output directory
Make sure to import `src/index.postcss.css` into your main JavaScript file; this
is how esbuild knows where to get your CSS from.
## Running the project
To develop locally, run `bun tw` and `bun esb` in two separate terminals. If you
think you won't make any CSS modifications, you can just run `bun dev` instead,
which will rebuild the CSS once, then switch to `bun esb`.
To deploy the project, execute `bun run build` to generate the `dist` directory,
then serve the entire `dist/` directory.
## Code-splitting
esbuild code-splitting is enabled, so asynchronous `import(...)` statements will
work. This means, however, that import order is not guaranteed to be stable. See
https://esbuild.github.io/api/#splitting for more information.
Imports will work correctly if you avoid cyclic imports (multiple files
importing each other in a chain). To check the project for cyclic imports, run
`bun lint:cycles`.
## Icons
Use https://realfavicongenerator.net/ to generate these files:
- apple-touch-icon.png
- favicon-96x96.png
- favicon.ico
- favicon.svg
- site.webmanifest
- web-app-manifest-192x192.png
- web-app-manifest-512x512.png
Then, put all those files into a top-level `icon` directory, and change the
"build:icon" script in the package.json to:
```sh
cp -R icon dist/icon && cp icon/favicon.ico dist/favicon.ico
```