⚙ Advanced Setup

If you have not read the Getting Started guide, now would be the perfect time! The Advanced Section builds on top of what we did in the Getting Started section.

Step 1: Setting up a layout

A layout is a template that contains our application shell which our page templates get injected into. Create a folder called "layouts", this is where our layouts will be stored.

layouts/default.js

    
      module.exports = ({ title, content }) => `
        <!DOCTYPE html>
        <html>
          <head>
            <title>${title}</title>
          </head>
          <body>
            ${content}
          </body>
        </html>
      `;

title is provided by the page template and content is the result of the generated page template. Now that we have our layout, we now need to use link it to a page template.

Step 2: Setting up a page

A page is a template that contains your page content. All page templates are stored in the pages folder.

pages/index.js

    
      const page = ({ data }) => `
        <p>${data.text}</p>
      `;

      module.exports = {
        layout: 'default',
        title: 'Hydrogen webpage',
        page,
        data: () => ({
          text: 'Hello from Hydrogen 🎈',
        }),
      };

Step 3: Building our templates into HTML

After setting up our pages and layouts, we are now able to generate our templates into deployable HTML files. The built files are stored in dist. To build your templates run the build command

    
      $ npx hydrogen build
       _   _           _
      | | | |_   _  __| |_ __ ___   __ _  ___ _ __  
      | |_| | | | |/ _` | '__/ _ \ / _` |/ _ \ '_ \ 
      |  _  | |_| | (_| | | | (_) | (_| |  __/ | | |
      |_| |_|\__, |\__,_|_|  \___/ \__, |\___|_| |_|
              |___/                 |___/

      MODE: PRODUCTION
      Building files... done
      Build time: 49.934ms

Use the --dev to enable builds in development mode

Step 4: Using static assets like CSS and JS

If you have static assets like CSS, JS, Images and etc... You can create a folder called public in the root of the project. You can place any assets you like in this folder and when you run the build command the public folder is automatically hoisted into the dist folder.

Repeat Step 3 to see how it works.

Step 5: Setting up a dev server

Most static-site generators provide a development server out of the box but not Hydrogen. Hydrogen gives all the power to you, so you can setup our own development server. Here is a simple development server setup with hot reloading.

We need some way to re-run hydrogen when files change and push the updates to the browser. We can use nodemon live-server npm-run-all packages

Install packages

    
        $ yarn add -D nodemon live-server npm-run-all

Update package.json

    
        {
          "scripts": {
            "reload": "npx cross-env npx nodemon -w ./layouts -w ./pages -w ./public --exec \"npx hydrogen build --dev\"",
            "serve": "npx cross-env npx live-server ./dist",
            "dev": "npx npm-run-all --parallel reload serve"
          }
        }

Run yarn dev then you will have neat little development server with hot reloading