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": {
     "ragu-server:run": "ragu-server run"
  }
}

Create your first component

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

export default {
  render({name}) {
    return {
      html: `<h1>Hello, ${name}</h1>`
    }
  },
  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.
WATCH_MODE=true npm run ragu-server:run

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