The ontario-frontend
package is a part of the Ontario.ca Frontend monorepo and a core dependency for developing digital services within the Ontario Government's digital ecosystem. It provides developers with a robust set of tools, configurations, and templates aimed at facilitating the creation of accessible, efficient, and consistent web experiences. Built on top of popular web development tools such as Eleventy and Nunjucks, this framework offers a comprehensive solution for rapid development without sacrificing quality or performance.
-
Eleventy configurations: Optimized configurations for Eleventy, designed to streamline the development of static sites with enhanced performance and scalability.
-
Nunjucks templating: A rich set of Nunjucks templates and macros that promote reusability and maintainability across various projects, enabling developers to craft dynamic content with ease.
-
Custom filters: A collection of custom Nunjucks filters tailored to meet the unique requirements of government digital services, facilitating common tasks such as date formatting, text transformations, and more.
-
Utility functions: Handy utilities for common calculations, configurations, and other helper functions that simplify complex tasks and improve developer productivity.
This package is a core dependency for Ontario.ca Frontend applications and projects. As such, it is best to create a new Ontario.ca Frontend project using the ontario-frontend-cli's ontario-create-app
command. This package will be automatically added to your Ontario.ca Frontend project when it is created that way.
It is possible to include this package and leverage the Eleventy configurations in an existing project not created with the Ontario.ca Frontend, but this is an unsupported method.
Ensure you have Node.js and npm installed on your machine. This framework is built to work with Eleventy, so familiarity with Eleventy and Nunjucks is recommended.
-
Add the framework as a dependency to your project:
npm install @ongov/ontario-frontend
-
Configure Eleventy to use the framework's settings and Nunjucks environment:
// .eleventy.js const ontarioFrontendFramework = require('@ongov/ontario-frontend'); module.exports = function(eleventyConfig) { // Apply the framework's configurations ontarioFrontendFramework.configureEleventy(eleventyConfig); };
-
Start building your project with the provided templates and utilities.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
Refer to the main monorepo README for detailed setup instructions and prerequisites.
-
Clone the monorepo (if you haven't already):
git clone -b main https://github.com/ongov/ontario-frontend.git cd ontario-frontend
-
Navigate to the
ontario-frontend
package:cd packages/ontario-frontend
-
Install dependencies using pnpm:
pnpm install
To work with this package locally as a dependency:
pnpm link
This will make the current local package accessible system-wide, or in another location.
Explore the documentation to learn about every aspect of the toolkit--from installation and file structure to adding analytics and preparing for deployment. The documentation is available at developer.ontario.ca.
Contributions to the Ontario.ca Frontend are welcome. Whether it's bug reports, feature requests, or contributions to code, we appreciate your input.
Check out our CONTRIBUTING.md file for guidelines on how to contribute.
This project is licensed under the Open Government Licence - Ontario. Feel free to use, modify, and distribute it as needed.
We use SemVer for versioning. For the versions available, see the tags on this repository.