Hootsuite local development

This article covers the setup of local development in conjunction with Hootsuite.

Local development for Hootsuite is somewhat intricate and requires specific configurations. If you need to modify the backend, it's relatively straightforward: just run our Hootsuite Function locally. Similarly, for frontend development, you can partially limit yourself to local development by running Hootsuite with:

start:hootsuite-smart-asset-picker

However, integrating with Hootsuite poses a more complex challenge.

Make changes to the “environment.local.ts” file:

export const environment: IEnvironment = {
  production: false,
  ...
  connectorFunctionServiceUrls: {
    hootsuiteFunctionServiceUrl: { url: 'https://digizuite-hootsuite-dev.azurewebsites.net', 
                                   code: '-TmZ3xULRXvA_iUzzZ6r72nkSFtkgi_XfPc2jf4aL-37AzFuX1DFag==', oauthRedirect: '' },
  ...
  },

Start the local frontend.
Use a reverse proxy, such as ngrok or similar, to expose your local deployment to the internet.
ngrock http 4210
Visit https://hootsuite.com/developers/my-apps and select the test project from the list

Change Test CONTENT_LIBRARY to any external local URL you obtained in step three.
Go to https://hootsuite.com/dashboard
Choose planner, content, and the test project.

Now you should see your application that can be modified locally.

However, it's worth to note that each request requires specific authentication, which needs to be specified:

in Authentication iFrame SDK Authentication (SSO)

Provide this information with every request. More info on that is here:
https://developer.hootsuite.com/docs/iframe-sdk-authentication

Authentication Problem

It might happen that during insertion, you’ll have “Authentication check failed”.

Please search for CLIENT_ID

private static readonly CLIENT_ID: string = '4a517412-5ff4-11ec-bf63-0242ac130002';

This should correspond to Shared Secret in Application section for Hootsuite on https://hootsuite.com/developers page: