Ontario.ca Search Components Package

This package contains the ontario.ca search bar and the associated autosuggest dropdown for it.

Development

To make development of the NPM package simpler, we have added a hot reload local server workflow to the project. It's very simple.

1. Install all the required NPM packages by issuing npm install from this folder
2. Run npm run start to build the development bundle and serve it with hot reload

Note that in order to make this work as expected, we have created separate Webpack files to handle the two scenarios.

Packaging & Deployment

To do a push to NPM, all changes must be pushed to the main branch and a new tag needs to be created and pushed to remote:

• Navigate to the root folder of the project and ensure you are on the main branch
• Issue the following command: npm run npm-publish [<newversion> | major | minor | patch] <tagmessage> where <newversion> is replaced with one of major, minor or patch. This will automatically increment the version number in package.json and create a git tag for the version. Note that the versions are prefixed with a npm-v so they look like npm-v1.3.14
• This will automatically push the tag and prepare the package for publishing to NPM
• Because the CI is set to manual deploy, you will need to click the publish button to have it published to NPM

Package Use In Projects

To use the NPM package in your own project, you need to do the following:

1. Import the package into your project
2. Add server configuration as a script tag on the page like this:

  <script>
      // This is the configuration for the ElasticSearch AppSearch Connector
      window.apiConfig = {
          searchKey: "search-3d52b350d6564c8702597cee",
          engineName: "enterprise-search",
          endpointBase: "https://3d52b350d6564c8702597cee.ent.us-east-1.aws.found.io"
      }
      // This is the endpoint configuration for the search results page for EN and FR
      window.endpointConfig = {
          en: "/search/search-results/",
          fr: "/fr/recherche/resultats-de-recherche/"
      }
  </script>

3. Import the JS from the NPM package into the page via a script tag
4. Create an anchor element on the page. Anchor element should have id of ontario-search-autosuggest