@marko/serve

When you serve a directory, every .marko file in that directory becomes a page. A browser is automatically launched and live-reloads as you make changes. It's the simplicity of a static file server plus the power of the Marko UI language.

Features

• 🚀 Fastest way to build an app with Marko
• 💖 No need to configure webpack, babel, etc.
• ⚡️ Pages live-reload as you make changes
• 📁 Directory-based routes
• 💯 Supports route parameters (/blog/:id)
• 🛠 Serve a single component to work on it in isolation

And when you build your production-ready app:

• 🔥 Blazing fast server-side rendering
• 📦 Optimized bundles with automatic code splitting
• ✨ Modern JS & CSS for modern browsers, legacy JS & CSS for legacy browsers

Getting Started

Hello World

To get started, let's create a new directory and serve it using npx (requires npm 5.2.0+):

mkdir my-new-app
cd my-new-app
npx @marko/serve .

When you serve a directory, a browser tab is automatically opened. Since this directory is empty, you should now be looking at an empty directory index.

Let's get some content in there! Create a hello.marko file within my-new-app with the following content:

<h1>Hello World</h1>

Once you save this file, the directory index will reload and show hello.marko as a file in the directory.

Click on it to view the new page. Nice!

A custom index

Navigate back to the directory index. Let's create an index.marko file with the following content:

<h1>Home</h1>

Once you save this file, the directory index will reload and show our custom index instead.

Adding a component

Let's add a menu so we can easily navigate between our two pages. Since we'll be adding this to each page, we'll create it as a component instead of duplicating code on each page. Create a components/ directory and add a main-menu.marko file inside with the following content:

<nav>
  <a href="/">Home</a> -
  <a href="/hello">Hello</a>
</nav>

And then we'll add the <main-menu> component to both of our pages:

<h1>Home</h1>
<main-menu/>

<h1>Hello World</h1>
<main-menu/>

We can now use the menu to navigate between pages!

Route params

What if we want our app to be able to say "Hello" to more than just the world? Do we need to create a new page for each thing we want to say hello to?

Nope. This is where route parameters come in. Route parameters allow you to use dynamic values from the url in your template. Just like normal pages, these are powered by your directory structure, but use a special syntax: files or directories that contain [PARAM] indicate a parameter. Let's rename hello.marko to hello/[name].marko and update its contents to the following:

<h1>Hello ${input.params.name}</h1>
<main-menu/>

Try visiting http://localhost:3000/hello/params in your browser.

The possibilities are endless! Let's add a few to our menu:

<nav>
  <a href="/">Home</a>-
  <a href="/hello/marko">Marko</a> -
  <a href="/hello/params">Params</a> -
  <a href="/hello/world">World</a>
</nav>

Go forth and build

When you're ready to let the world see what you've built, run the build command to get a production-ready app.

npx @marko/build .

This produces a build/ directory that contains the app and its assets, all optimized and compressed. We no longer need serve, build or any other dependencies. We can run the server using just node:

node build/index.js

Open your browser to http://localhost:3000/ and you'll see the same app, only faster.

This build directory can now be deployed to your favorite hosting service. We're exicited to see what you come up with! ✨

CLI

Installation

npm install @marko/serve

Example

marko-serve .                                # serve the current directory
marko-serve ./pages                          # serve a pages directory
marko-serve ./components/my-component.marko  # serve a single component
marko-serve . --inspect-brk                  # debug by passing node arguments through

Options

• --port -p: The port to serve on
• --no-browser: Don't automatically open the browser
• --verbose: Show the raw build output
• node arguments are passed to the server process

API

Do not use the @marko/serve package directly. A programatic API is coming soon.