percipio.london: Setup the Typsesense plugin with Typesense Cloud
What will be discussed in this blogpost?
In this guide, we will provide you with a step-by-step process to set up the Typesense plugin within your Craft CMS installation. To help you visualise how it works, we will be using our Craft Typesense demo. For demo content, we’re using a random selection of schools in the United Kingdom.
The Typesense plugin is available in the plugin store under ‘percipiolondon/craft-typesense‘. If you need additional information, you can refer to our documentation or reach out to us on GitHub.
If you have further questions, feel free to join the Craft Discord community and tag Stef with ‘@cookie10codes‘.
How connect Craft CMS with Typesense Cloud
We will use the Typesense Cloud as an example as it’s nice and straight forward, however you can self host Typesense to remove your billing costs.
More information on the setup can be found in our docs.
Generate API keys
Once you have logged into Typesense Cloud with your Git account, hit the Generate API key button to receive your API key and search only API key.
This API key will be used within the backend to sync / flush the documents. The search only is the key you will use on your frontend application, this can only read from your Typesense Cloud cluster.
Environment variables
We are using environment variables to setup our connection. The cluster will be “;” separated.
Settings
Connect the environment variables directly into the settings.
Make sure to select Cluster as Typesense Server Type.
We use this approach for security to now share the API keys and you can easily change connections from environment as well. If you would have another Typesense cluster for production for example.
Connect your entries to Typesense Cloud
Create a ‘typesense.php‘ config file in your ‘cms/config‘ folder. This file returns an array with collections inside. Using our schools demo as an example, these are the fields that are synced to Typesense.
After this setup, you should see your collection listed when you navigate to Typesense > Collections in the control panel.
Run the sync command to sync all of your entries from that section to your Typsense server. You can check the Typesense Cloud to see all the entries in place.
Connecting to Typesense through javascript
For the connection we’re using Typesense javascript package to setup our client. This will connect through the search only API key to fetch the data from your index.
In the example below, we’re filtering our schools onto the local authority of Birmingham.