Quick start guide

Create a new project

Before you proceed, ensure that you have the current LTS release of Node.js installed on your workstation.

Automatic setup

We recommend starting a new Ontario.ca Frontend project using npx, which sets up everything automatically from the npm package registry. To create a new project automatically, run:

npx @ongov/ontario-frontend-cli ontario-create-app

On installation, you'll see the following prompts:

What is your project named? (my-frontend-project)What is the file name for the English-language page? (This will be used for the path, e.g. ontario.ca/my-english-page): (english)What is the file name for the French-language page? (This will be used for the path, e.g. ontario.ca/ma-page-francaise): (francais)Add and configure ESLint for finding and fixing code problems? No / YesAdd and configure Prettier for opinionated code formatting? No / Yes

After the prompts, the installation process will create a folder with your project name and install the required dependencies.

Run the development server

1. Run npm run serve to start the development server.
2. Visit http://localhost:8080 from a web browser to view your application.
3. Edit the English or French language page in the src folder (e.g. src/english.njk) and save it to see the updated result in your browser.