Configure 11ty

Let's get back to the creative part and start building up our frontend. For this we'll start to configure the 11ty setup we completed earlier and get it ready and working with Forestry.

11ty Config

To start, we need to create a new file .eleventy.js in the root of our Fathym project. We'll seed it with some code that unlocks the uploads folder from Forestry and the assets folder we'll use in a minute. We also need to passthrough package.json to support the NPM packaging process when it comes to deploying our project along with a few other changes for our setup:

module.exports = (config) => {
  //  Passthrough the uploads folder used by forestry
  config.addPassthroughCopy('uploads');

  //  Passthrough the assets folder used for our css, favicon and other assets
  config.addPassthroughCopy('assets');

  //  Passthrough the package.json file
  config.addPassthroughCopy('package.json');

  //  Configure our money filter so the price will be properly displayed
  config.addFilter('money', function (value) {
    const formatter = new Intl.NumberFormat('en-US', {
      currency: 'USD',
      style: 'currency',
    });

    return formatter.format(value);
  });

  //  Change the default folder used by 11ty from root to src
  return {
    dir: {
      input: 'src',
    },
  };
};

Project Config

In addition to this, we need to update our .gitignore file and add in the _site folder that 11ty compiles into:

# Dependencies
/node_modules

# 11ty
_site

Now we can add a couple of scripts to our package.json file so that we can build and test our application.

{
  "build": "eleventy",
  "start": "eleventy --serve",
  "deploy": "npm version patch && npm run build && npm publish ./_site --access public"
}

These scripts that we add will allow you to run npm run build to build your project, and npm start to start the development server. Since we don't have a home page built these commands will only give you errors. Next we'll jump in and get our home page going as well as the other pages.