Negatively Proportional Model

    @marko/serve

    4.2.3 • Public • Published


    @marko/serve
    API Stability NPM Version Downloads

    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.

    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.

    hello.marko in directory index

    Click on it to view the new page. Nice!

    hello page

    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.

    home page

    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!

    home with menu

    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.

    hello params page

    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.

    image

    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.

    Install

    npm i @marko/serve

    DownloadsWeekly Downloads

    84

    Version

    4.2.3

    License

    MIT

    Unpacked Size

    27.4 kB

    Total Files

    8

    Last publish

    Collaborators

    • ryansolid
    • mlrawlings
    • austinkelleher
    • dylanpiercey
    • manthan.doshi
    • agliga