Ready to start?
Follow our quick-start guide to set up your first Ontario.ca Frontend project.
New to Ontario.ca Frontend?
Learn the basics by following along with our getting started guide.
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?
Public Sector Salary Disclosure
Search the list of public sector employees paid $100,000 or more in a calendar year.
Calendar of international trade program and events
Find information about upcoming trade events for Ontario businesses looking to export outside Canada.
Check medication coverage
Find out if your medication is covered through the Ontario Drug Benefit program.
Motor fuel prices
Get the current Ontario price for unleaded gas, diesel, auto propane and other types of fuel.
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.