Getting started: Configuring your Ragu Server

Installation

If you does not have a node project set. Run npm init inside the project path before start.

# Install ragu-server
npm install ragu-server 
# create ragu-config.js
npx ragu-server init
# The directory where components should live.
# You can change the path at the ragu-config.js
mkdir components 

And add this entry at you package.json:

{
  "scripts": {
     "build": "ragu-server build"
     "start": "ragu-server run",
     "dev": "ragu-server dev",
  }
}

Create your first component

Start creating a file called components/hello-world/view.js.

export default {
  render({name}) {
    return {
      html: `<h1>Hello, ${name}</h1>`
    }
  }
}

Also we need an hydration file components/hello-world/hydrate.js.

export default {
  hydrate(el, {name}) {
    el.addEventListener('click', () => alert('Hello, ${name}!'));
  }
}

Starting the server

npm run ragu-server:run

# OR with you want to automatically re-compile components when component change.
npm run ragu-server:dev

Check the component live http://localhost:3101/preview/hello-world/?name=World