Skip to main content

Project structure

This page provides an overview of the file and folder structure of an Frontend project. It covers top-level files and folders, as well as items found within the src directory.

Top-level folders

srcApplication source folder
node_modulesApplication dependencies (automatically generated)

Top-level files

package.jsonProject dependencies and scripts
.eleventy.jsConfiguration file for Eleventy
.eslintrc.jsConfiguration file for ESLint
.prettierrc.jsonConfiguration file for Prettier
.prettierignoreFiles and folders that Prettier will ignore
.htmlvalidate.jsonConfiguration file for html-validate
.htmlvalidateignoreFiles and folders that html-validate will ignore
.nvmrcConfiguration file for Node Version Manager

src folders

_dataFiles containing global data available to every page or layout template in a project
_includesFiles containing layout templates, partials and macros to be consumed by project pages
assetsFiles and folders containing styles, images and scripts in a project, including Ontario Design System assets

src files

index.njkConvenience page redirecting browsers to a project’s default English-language page during local development
<my-english-page>.njkDefault English-language page created during the new project setup process
<ma-page-francaise>.njkDefault French-language page created during the new project setup process
sitemap.njkFile to help search engines find, crawl, and index a project’s pages (necessary for deploying to