0.0.7 • Published 2 months ago
@ongov/ontario-search v0.0.7
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.
- Install all the required NPM packages by issuing
npm install
from this folder - 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 ofmajor
,minor
orpatch
. This will automatically increment the version number inpackage.json
and create a git tag for the version. Note that the versions are prefixed with anpm-v
so they look likenpm-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:
- Import the package into your project
- 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>
- Import the JS from the NPM package into the page via a script tag
- Create an anchor element on the page. Anchor element should have id of
ontario-search-autosuggest