https://github.com/yurique/laminar-snowpack-example
An example of a Snowpack build for a Scala.js + Laminar + frontroute app.
https://github.com/yurique/laminar-snowpack-example
embedded-files postcss scala scala-3 scalajs snowpack tailwindcss
Last synced: about 1 year ago
JSON representation
An example of a Snowpack build for a Scala.js + Laminar + frontroute app.
- Host: GitHub
- URL: https://github.com/yurique/laminar-snowpack-example
- Owner: yurique
- Created: 2021-01-21T05:39:56.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-06-03T21:41:22.000Z (about 5 years ago)
- Last Synced: 2025-04-13T03:09:25.757Z (about 1 year ago)
- Topics: embedded-files, postcss, scala, scala-3, scalajs, snowpack, tailwindcss
- Language: Scala
- Homepage:
- Size: 491 KB
- Stars: 12
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# laminar-snowpack-example
An example of a [Snowpack](https://www.snowpack.dev/) build for a [Scala.js](https://scala-js.org) + [Laminar](https://github.com/raquo/Laminar) +
[frontroute](https://github.com/tulz-app/frontroute) app.
Note that Snowpack is not a fit for every project:
> Snowpack is a lightning-fast frontend build tool, designed for the modern web.
> It is an alternative to heavier, more complex bundlers like webpack or Parcel
> in your development workflow. Snowpack leverages JavaScript's native module
> system (known as ESM) to avoid unnecessary work and stay fast no matter
> how big your project grows.
## embedded-files
This app also demonstrates how to use the [embedded-files](https://github.com/yurique/embedded-files/) – sbt plugin and
the macro – to effectively achieve "resources" in Scala.js.
## tailwindcss
The app is styled with [tailwindcss](https://tailwindcss.com/).
For this, the [PostCSS](https://postcss.org/) plugin for Snowpack is installed, and PostCSS
is configured to run the tailwindcss plugin (as well as the [postcss-preset-env](https://preset-env.cssdb.org/) plugin).
When building a production release, PostCSS will also run the [CSSNANO](https://cssnano.co/) plugin and tailwindcss plugin
will also purge the unused classes from the generated `.css` file.
## installing npm dependencies
```console
$ yarn install
```
## dev server
In sbt:
```
sbt:laminar-snowpack-example> fastLinkJS
// OR, if you want sbt to watch the source changes and rebuild continuosly
sbt:laminar-snowpack-example> ~fastLinkJS
```
Then, start the Snowpack dev server (from a terminal – this is *not* a sbt command):
```console
$ yarn run snowpack dev
```
## production build
In sbt:
```
sbt:laminar-snowpack-example> fullLinkJS
```
Run the Snowpack `build` command:
```console
$ yarn run snowpack build
```
The assets will end up in the `build` directory.
(main.js – `1.5M`, with brotli - `130K`, with gzip – `188K`)
## Scala 3
You can build this app with Scala 3:
* uncomment the corresponging line in the `build.sbt` (and comment the other one)
* do the same in the `snowpack.config.js`
* restart sbt and Snowpack, and follow the steps above
## tailwind
tailwindcss is configured to run in `jit` mode, but this feature is not yet polished
and sometimes it misses the classes that are actually used when `fastLinkJS` emits
a new `.js`,
If that's the case, you can either restart the snowpack or comment out this line in
`website/tailwind.config.js`:
```
mode: 'jit',
```