Using the CLI

Etcher’s CLI allows you to transform your etcher site into traditional HTML and CSS.

CLI Options.

The CLI includes a couple options to make your experience easier,

  • -w Watch the source directories for changes then rerun jobs.
  • -s Serve files locally using Vite’s dev server with HMR.

But what does it actually do?

-------  your source code  -------
/components              /pages
    |                       |
    v                       v
CLI Step 1              CLI Step 2
    |                       |
    v                       v
------  output (web-ready)  ------
chunks      <---->   Updated Pages

The CLI first finds your Configuration File (etcher.config.js) and stores it for later use.

Step 1

The CLI looks in your project for the /components directory and reads it, for each of the components it goes through and serialises each component into a ‘chunk’. It then embeds it’s client script into each of your pages and creates a tiny js file for each chunk.

An example of what this step might do is change:

{@if {{data.thing}}}
    <div @click={/* ... */}>click me!</div>\n
{/if}

Into

// batteries and utility functions ect...

transform("etcher-9a0dab85", `{@if {{data.thing}}}\n\t<div @click={/* ... */}></div>\n{/if}`)

Step 2

Next, the CLI will look for the /pages directory and for each of these it will update component names and parse computed attributes.

An example of this is:

<!DOCTYPE html>
<html>
    <body>
        <etcher-Navbar></etcher-Navbar>
        <etcher-Hero #pageId={0}></etcher-Hero>
    </body>
</html>

Will get turned into

<!DOCTYPE html>
<html>
    <body>
        <etcher-507E26A></etcher-507E26A>
        <etcher-2CFB25F pageId="0"></etcher-2CFB25F>
        <script>
            /* etcher client js */
        </script>
        <script src="/@etcher/etcher-507E26A.js"></script>
        <script src="/@etcher/etcher-2CFB25F.js"></script>
    </body>
</html>