Skip to content

Commit

Permalink
Create a section on static pages in Getting Started
Browse files Browse the repository at this point in the history
This addresses issue outmoded#264
  • Loading branch information
Strand McCutchen committed Sep 26, 2015
1 parent c903bad commit 9cff8c0
Showing 1 changed file with 34 additions and 0 deletions.
34 changes: 34 additions & 0 deletions lib/tutorials/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,40 @@ Note that we URI encode the name parameter, this is to prevent content injection

The `method` parameter can be any valid HTTP method, array of HTTP methods, or an asterisk to allow any method. The `path` parameter defines the path including parameters. It can contain optional parameters, numbered parameters, and even wildcards. For more details, see [the routing tutorial](/tutorials/routing).

## Creating static pages and content

We've proven that we can start a simple Hapi app with our Hello World application. Next, we'll use a plugin called **inert** to serve a static page. Before you begin, stop the server with **CTRL + C**.

To install **inert** run this command at the command line: `npm install --save inert` This will download inert and add it to your `package.json`, which documents which packages are installed.

Add the following to your `server.js` file:

``` javascript
server.register(require('inert'), function (err) {
if (err) { throw err; }
});

server.route({
method: 'GET',
path: '/hello',
handler: function (request, reply) {
reply.file('./public/hello.html');
}
});
```

The `server.register` command above adds the inert plugin to your Hapi application. If something goes wrong, we want to know, so we've passed in an anonymous function which if invoked will receive `err` and throw that error. `err` is used instead of `error` because `error` is a reserved word in JavaScript. This callback function is required when registering plugins.

The `server.route` command registers the `/hello` route, which tells your server to accept GET requests to `/hello` and reply with the contents of the `hello.html` file.

Start up your server with `npm start` and go to `http://localhost:3000/hello` in your browser. Oh no! We're getting a 404 error because we never created a `hello.html` file. You need to create the missing file to get rid of this error.

Create a folder called `public` at the root of your directory with a file called `hello.html` within it. Inside `hello.html` put the following HTML: `<h2> Hella Whirled.</h2>`. Then reload the page in your browser. You should see a header reading "Hella Whirled."

Inert will serve whatever content is saved to your hard drive when the request is made, which is what leads to this apparent live reloading behavior. Customize the page at `/hello` to your liking.

More details on how static content is served are detailed on [Serving Static Content](http://localhost:3000/tutorials/serving-files). This techniques is commonly used to serve images, stylesheets, and static pages in your web application.

## Using plugins

A common desire when creating any web application, is an access log. To add some basic logging to our application, let's load the [good](https://github.com/hapijs/good) plugin and its [good-console](https://github.com/hapijs/good-console) reporter on to our server.
Expand Down

0 comments on commit 9cff8c0

Please sign in to comment.