Skip to content

Latest commit

 

History

History
160 lines (127 loc) · 5 KB

hello-world.md

File metadata and controls

160 lines (127 loc) · 5 KB
Raw
title description source edit masthead
Hello World with Maki
A simple guide to building your first Maki app.
/img/digital-texture.jpg

Hello, world.

Building an average application with Maki is incredibly simple. We'll get a web server set up using the built-in HTTP service, and edit some content on the page to say "Hello world!".

If you're not an experienced developer, you should first read Developer Basics and Initial Setup to get familiar with the tools we'll be using here, including the terminal and code editors.

0. Install Maki

As with all apps, you'll likely want to start a new folder to contain your work and install dependencies.

mkdir hello-world           # creates a `hello-world` directory
cd hello-world              # move into the directory we just created
npm install martindale/maki # install Maki using NPM

1. Build the App

Maki comes with a pre-configured website you can use as a starting point. To use it, we'll need to create an instance of a Maki application. Let's create a new file, app.js.

touch app.js

Now in that file, add the following contents.

var Maki = require('maki'); /* pulls in the Maki library */
var app = new Maki();       /* creates a new instance of Maki, and calls it "app" */

2. Create Content

Maki's pre-configured website needs to be extended with your content. To modify the index page, we'll simply create a new file in views/index.jade. The views/ folder doesn't exist by default, so you might need to create it:

mkdir views
touch views/index.jade

We've just created the views/ folder and placed a new index.jade file inside of it. Let's add some content. Open views/index.jade in your editor, and add the following.

extends node_modules/maki/views/layouts/default

block content
  h1 Hello, world!

In the block keyword, we've specified that the content section should be filled out with our HTML. This uses a simple but powerful markup language known as Jade.

You'll notice we've used the extends keyword to select one of Maki's internal layouts. This is just a default, and you can override it by creating your own layout (or copying Maki's and modifying it) in the views/ folder.

For convenience, you can even use maki.bootstrap() to automatically create the files locally for you. This is useful when you've got a list of Resources your application will expose!

3. Run the App

Finally, we'll simply start the application. Since Maki has the HTTP Service enabled by default, it'll automatically be available to your web browser.

maki.start();

You'll get some output that looks like this:

[SERVICE] [HTTP] listening for [http]       on  http://0.0.0.0:9200
[SERVICE] [HTTP] listening for [https,spdy] on https://0.0.0.0:9563

Simply click one of those links and your browser should open and you'll see your "Hello World" content. Congratulations, you've just built your first Maki app!

Conclusion

In the end, your directory structure should look like this:

.
├── app.js
├── node_modules
│   └── maki
└── views
    └── index.jade

The contents of each of the files you've created, app.js and views/index.jade, should look like this:

app.js

var Maki = require('maki');
var app = new Maki();

app.start();

views/index.jade

extends node_modules/maki/views/layouts/default

block content
  h1 Hello, world!

That's it! You're on your way to a fully-functional app.

Up Next: Adding Resources

Now that we've created a basic application, it's time to get fancy.

Add New Resources