···6666## Installation
67676868Lustre's dev tools are published on [Hex](https://hex.pm/packages/lustre_dev_tools)!
6969-You can add them to your Gleam projects from the command line:
6969+You can add them as a dev dependency to your Gleam projects from the command line:
70707171```sh
7272gleam add lustre_dev_tools --dev
7373```
74747575-> **Note**: make sure you remember the `--dev` flag! This ensures the dev tools
7676-> are never included in production builds.
7575+The `--dev` flag is important to make sure the dev tools are not included in your
7676+application's build!
7777+7878+> **Note**: The included development server uses the erlang package [`fs`](https://github.com/5HT/fs)
7979+> as a file watcher. For Linux uses, you need to have [inotify-tools](https://github.com/inotify-tools/inotify-tools)
8080+> installed on your system. Both Linux and MacOS users must also have a C compiler.
77817882To run any of the commands provided by the dev tools, you should run the
7983`lustre/dev` module using Gleam's `run` command:
···8387```
84888589## Commands
9090+9191+You can run `gleam run -m lustre/dev -- --help` to see a list of all the available
9292+commands. Each command also has its own help text that lists the available flags
9393+and options. Here's a brief overview of the commands provided by Lustre's dev tools:
86948795- `lustre/dev add` - Commands for adding external binaries to your project. These
8896 are run and managed by Lustre, and while not typically intended to be run manually,
+3-27
src/lustre/dev.gleam
···126126////
127127//// The `lustre/dev start` command starts a development server that builds and serves your
128128//// project. This lets you focus on development without having to worry about a backend
129129-//// or additional tooling.
130130-////
131131-//// Currently the server does _not_ watch for changes to your Gleam source files. You
132132-//// must **restart the server** for changes to take effect. There have been discussions
133133-//// about including a `watch` command in the Gleam compiler that would make this
134134-//// possible.
129129+//// or additional tooling. The page will automatically reload when you make changes
130130+//// to your project.
135131////
136132//// Flags:
137133////
138134//// - `--port` - The port to serve the project on. Defaults to `1234`.
139135////
140140-//// - `--host` - The host to serve the project on. Defaults to `0.0.0.0` and is
141141-//// accessible on localhosts and any other devices on the same network.
142142-////
143143-//// - `--html` - Provide a custom HTML file to serve. This is useful if you want to
144144-//// include your own styles or scripts.
145145-////
146146-//// To make sure the Lustre bundle can be loaded, you must include the following
147147-//// script tag somewhere in your HTML file:
148148-////
149149-//// ```html
150150-//// <script type="application/lustre"></script>
151151-//// ```
152152-////
153153-//// - `--use-example-styles` - Include the stylesheet from
154154-//// [lustre/ui](https://hexdocs.pm/lustre_ui/). This is mainly used in the example
155155-//// projects, but you may use this option to quickly experiment with the library
156156-//// yourself.
157157-////
158158-//// If the `--html` flag is provided, this flag will be ignored.
159159-////
160136//// Example:
161137////
162138//// ```sh
163163-//// gleam run -m lustre/dev start --port=8080 --use-example-styles
139139+//// gleam run -m lustre/dev start --port=8080
164140//// ```
165141////
166142//// ## Getting help
+3-25
src/lustre_dev_tools/cli/start.gleam
···2828 glint.command(fn(input) {
2929 let CommandInput(flags: flags, ..) = input
3030 let assert Ok(port) = flag.get_int(flags, "port")
3131- let assert Ok(use_example_styles) =
3232- flag.get_bool(flags, "use-example-styles")
33313432 let script = {
3533 use _ <- cli.do(build.do_app(False))
3636- use _ <- cli.do(prepare_html(use_example_styles))
3434+ use _ <- cli.do(prepare_html())
3735 use _ <- cli.do(cli.from_result(server.start(port)))
38363937 cli.return(Nil)
···5553 |> flag.default(default)
5654 |> flag.description(description)
5755 })
5858- |> glint.flag("use-example-styles", {
5959- let description =
6060- "Inject the lustre/ui stylesheet. This is primarily intended to be used when running any of Lustre's examples and is ignored if the `--html` flag is set."
6161- let default = False
6262-6363- flag.bool()
6464- |> flag.default(default)
6565- |> flag.description(description)
6666- })
6767- |> glint.flag("html", {
6868- let description =
6969- "Supply a custom HTML file to use as the entry point. To inject the Lustre bundle, make sure it includes the following empty script: <script type=\"application/lustre\"></script>"
7070- |> string.trim_right
7171-7272- flag.string()
7373- |> flag.description(description)
7474- })
7556}
76577758// STEPS -----------------------------------------------------------------------
78597979-fn prepare_html(include_example_styles: Bool) -> Cli(any, Nil, Error) {
6060+fn prepare_html() -> Cli(any, Nil, Error) {
8061 let assert Ok(cwd) = cli.cwd()
8162 let assert Ok(root) = filepath.expand(filepath.join(cwd, project.root()))
8263 let index = filepath.join(root, "index.html")
···8465 case simplifile.verify_is_file(index) {
8566 Ok(True) -> cli.return(Nil)
8667 Ok(False) | Error(_) -> {
8787- use html <- cli.template(case include_example_styles {
8888- True -> "index-with-lustre-ui.html"
8989- False -> "index.html"
9090- })
6868+ use html <- cli.template("index.html")
9169 use config <- cli.do(cli.from_result(project.config(False)))
9270 let html = string.replace(html, "{app_name}", config.name)
9371 use _ <- cli.try(simplifile.write(index, html), fn(reason) {