Skip to main content
NOTICE

Build dynamic experiences for Ontario.ca

Ontario.ca Frontend is an open source development kit for building frontend applications that are ready for Ontario.ca. Whether you're building a search app, a dashboard, a form, or just about anything else, Ontario.ca Frontend is the fastest way to get started.

What is Ontario.ca Frontend?

Ontario.ca Frontend is a toolkit that streamlines the creation and management of frontend applications for Ontario.ca. Inspired by tools like Create React App and built on top of the Eleventy site generator, it provides a simple and effective starting point for building accessible, performant, and scalable Jamstack applications that are ready to deploy to Ontario.ca.

Features

  • Simple to use: A single command creates and configures a new project structure with sensible defaults and best practices in place.
  • Automated project scaffolding: Generates all necessary files, from configs to templates, to get you up and running quickly.
  • Built-in development server: A built-in local development server with live reloading allows you to preview your site as you work.
  • Ontario Design System: Pre-configures your frontend application with the Ontario Design System and the Ontario.ca Branding Kit.
  • Ontario.ca standards: Templating and styling designed to meet the guidelines and standards for Ontario.ca are included.
  • Internationalization: Tools and structures to support English and French language sites, allowing for seamless content delivery across languages, is included by default.

Under the hood

Ontario.ca Frontend is intended to be lightweight and avoids making too many assumptions about the libraries or frameworks you might want to use in your project.

Under the hood, it uses:

  • the Eleventy static site generator for handling composition and build processes
  • the Nunjucks templating language for building pages, layout templates, and reusable components
  • the Ontario Design System to enable building frontends that match the Ontario.ca user experience, including its look and feel

Eleventy is a major foundation of the toolkit. Eleventy's documentation is a great starting point for learning about how it (and static site generators in general) precompiles user interfaces.

Ontario.ca Frontend follows Eleventy's default behaviour where possible, but it can be made to integrate with more complex client-side frameworks and libraries, like React or Angular.

Who's using Ontario.ca Frontend?

Any developer with an understanding of modern web development tools and technology (including HTML, CSS and JavaScript) can learn to use Ontario.ca Frontend. Get started with your own project by visiting our quick-start guide.