1- ## TL : DR
1+ See [ docs ] ( https://quafadas.github.io/live-server-scala-cli-js/docs/index.html )
22
3- ``` sh
4- touch helloScalaJS.scala
5- ```
6-
7- ``` scala
8-
9- //> using scala 3.4.2
10- //> using platform js
11-
12- //> using dep org.scala-js::scalajs-dom::2.8.0
13- //> using dep com.raquo::laminar::17.0.0
3+ # Scala JS live server TL;DR
144
15- //> using jsModuleKind es
16- //> using jsModuleSplitStyleStr smallmodulesfor
17- //> using jsSmallModuleForPackage webapp
5+ > Show me scala JS - I have 20 seconds.
186
19- package webapp
20-
21- import org .scalajs .dom
22- import org .scalajs .dom .document
23- import com .raquo .laminar .api .L .{* , given }
24-
25- @ main
26- def main : Unit =
27- renderOnDomContentLoaded(
28- dom.document.getElementById(" app" ),
29- interactiveApp
30- )
31-
32- def interactiveApp =
33- val hiVar = Var (" Wor" )
34- div(
35- h1(
36- s " This was more.scala " ,
37- child.text <-- hiVar.signal
38- ),
39- p(" This asdf df" ),
40- // https://demo.laminar.dev/app/form/controlled-inputs
41- input(
42- typ := " text" ,
43- controlled(
44- value <-- hiVar.signal,
45- onInput.mapToValue --> hiVar.writer
46- )
47- )
48- )
49- ```
7+ Paste this into your terminal and hit enter.
508
519``` sh
52- cs launch io.github.quafadas:live-server-scala-cli-js_3:0.1.1
53- ```
54-
55- The intention, is for the simple case to be zero configuration. The below invocation makes the following assumptions;
56-
57- - cs (coursier) is on the path
58- - You are using scala-cli and it is on the path
59- - You are happy to serve your application on port 3000
60- - You wish a browser window to open at the root of the application
61- - You are invoking it from the root of a directory containing a valid scala JS project that is configured to use ES modules.
62- - Your application, will mount in a div with id ` app ` .
63-
64- The file above is a one file example of such a project, satisfying these constraints.
65-
66- The dream, is for the CLI to be flexible enough to accomodate more complex scenarios as well.
67-
68- ```
69- Usage: LiveServer [--project-dir <string>] [--out-dir <string>] [--port <integer>] [--proxy-target-port <integer>] [--proxy-prefix-path <string>] [--log-level <string>] [--build-tool <string>] [--browse-on-open-at <string>] [--extra-build-args <string>]... [--mill-module-name <string>] [--path-to-index-html <string>] [--styles-dir <string>]
70-
71- Scala JS live server
7210
73- Options and flags:
74- --help
75- Display this help text.
76- --version, -v
77- Print the version number and exit.
78- --project-dir <string>
79- The fully qualified location of your project - e.g. c:/temp/helloScalaJS
80- --out-dir <string>
81- Where the compiled JS will be compiled to - e.g. c:/temp/helloScalaJS/.out. If no file is given, a temporary directory is created.
82- --port <integer>
83- The port you want to run the server on - e.g. 3000
84- --proxy-target-port <integer>
85- The port you want to forward api requests to - e.g. 8080
86- --proxy-prefix-path <string>
87- Match routes starting with this prefix - e.g. /api
88- --log-level <string>
89- The log level. info, debug, error, trace
90- --build-tool <string>
91- scala-cli or mill
92- --browse-on-open-at <string>
93- A suffix to localhost where we'll open a browser window on server start - e.g. /ui/greatPage OR just `/` for root
94- --extra-build-args <string>
95- Extra arguments to pass to the build tool
96- --mill-module-name <string>
97- Extra arguments to pass to the build tool
98- --path-to-index-html <string>
99- a path to a directory which contains index.html. The entire directory will be served as static assets
100- --styles-dir <string>
101- A fully qualified path to your styles directory with LESS files in - e.g. c:/temp/helloScalaJS/styles
11+ scala-cli --version && \
12+ cs version && \
13+ git clone https://github.com/Quafadas/viteless.git && \
14+ cd viteless && \
15+ cs launch io.github.quafadas::sjsls:{{projectVersion}}
10216```
10317
104- To be minimally viable for me personally,
105- - A Proxy server to the backend
106- - Style application
107- - Mill
108- - Some way, to integrate the outcome into a deployment pipline
109-
110- As the project is somehwhat young, the approach these points may remain chaotic... your contribution or opinion on them is welcome :-).
111-
112- # An experiment in a dev server for scala JS
113-
114- Try and break the dependance on node / npm completely whilst retaining a sane developer experience for browser based scala-js development.
115-
116- [ Blogpost] ( https://quafadas.github.io/Whimsy/2024/05/22/Viteless.html )
117-
11818## Goals
11919
120- Replicate the "experience" of using vite with scala JS.
20+ Replicate the "experience" of using vite with scala JS. Without vite.
12121
12222- Live reload / link on change
12323- Hot application of style (no page reload)
12424- Proxy server
12525- page open on start
12626
127- ## Contraints
128-
129- - Scala cli to build frontend
130- - ESModule output (only)
131- - Third party ESModules via import map rather than npm
132- - Styles through LESS
133-
13427## Assumptions
13528
13629` cs ` , ` scala-cli ` and ` mill ` are readily available on the path.
@@ -139,26 +32,4 @@ App must be mounted to a div, with id `app`.
13932
14033## Contributing
14134
142- CI builds a container image which is ready to roll.
143-
144- ## Providing your own HTML
145-
146- You'll need to make sure it includes this script. Otherwise no reload on change.
147-
148- ``` html
149- <script >
150- const sse = new EventSource (" /refresh/v1/sse" );
151- sse .addEventListener (" message" , (e ) => {
152- const msg = JSON .parse (e .data );
153-
154- if (" KeepAlive" in msg) console .log (" KeepAlive" );
155-
156- if (" PageRefresh" in msg) location .reload ();
157- });
158- </script >
159-
160- ```
161-
162- # Windows
163-
164- Ought to work. However, it appears impossible to get it to work in CI. See the ` doze ` branch. Therefore, windows testing is ad hoc.
35+ It's so welcome. Start a dicsussion if you'd like so ideas! CI builds a container image which is ready to roll.
0 commit comments