File-Based Routing

Greenwood supports file-based routing, which means that filenames in the pages/ directory of your project's workspace will be mapped to URLs that you can visit in your browser.

Static Pages

For static content, Greenwood support HTML and markdown as page formats.

For example, given the following folder structure:

src/
  pages/
    blog/
      first-post.md
      second-post.md
    index.html
    about.md

The following routes will be accessible from the browser:

src/pages/index.html -> /
src/pages/about.md -> /about/
src/pages/blog/first-post.md -> /blog/first-post/
src/pages/blog/second-post.md -> /blog/second-post/

SSR

Greenwood supports the intermingling of static pages with dynamic pages. Taking the example above, if we wanted a server rendered route, like a "Products" page, we can simply create a JavaScript file following the same naming convention.

src/
  pages/
    blog/
      first-post.md
      second-post.md
    index.html
    about.md
    products.js

Now the route /products/ will be available and will re-run on each request.

See our section on server-rendering to learn about using SSR in Greenwood.

APIs

Within a dedicated /pages/api/ directory, backend only routes can be created that can be called from the client.

src/
  pages/
    api/
      search.js

Now the route /api/search will be available to return a Web API Response.

See our section on API Routes to learn about using SSR in Greenwood.

SPA

You can opt-out of all file-based routing, like for a Single Page Application (SPA), and go full client-side only mode by just putting an index.html at the root of your workspace. (e.g. no pages/ directory).

Below is an example project structure for a typical SPA:

src/
  components/
    footer.js
    header.js
  routes/
    products.js
    home.js
  styles.css
  index.js
  index.html

Not Found

As is a common convention with most hosting providers and web servers, you can create a 404 page in your pages/ directory which will be used as the default Not Found page for your site.

src/
  pages/
    404.html

Edit on GitHub

Introduction

Pages

Resources

Plugins

Content As Data

Reference