Squid Samples: Squid Queues with Confluent

This sample app contains client and backend code to demonstrate using Squid Queues

Squid Queues enable you to publish messages and subscribe to topics in a client without the need for additional backend infrastructure.

You can access this functionality through 3 integration options. Select an option to learn how to configure it:

• Squid's built-in queue integration. Read more
• Your own Apache Kafka integration. Read more
• Confluent. Read more

What it is:

• A Squid backend with a security service function to enable access to a Squid queue topic.
• A React frontend that uses Squid's React SDK and Squid queues. To get up and running quickly, you can use the built-in queue.

What you'll need:

• A Squid Cloud account
• Node.js and npm
• The Squid CLI

Running the project

1. In the Squid Cloud Console create a new app called queue.
2. Connect the Squid backend to the new app you created by scrolling in the console to the Backend section and selecting Create .env file. Copy the command.
3. Open a terminal window and change to the backend directory.

cd queue/backend

4. Install the required packages:

npm install

5. Create the .env file by running the command you copied. It will have this format:

squid init-env \
 --appId [YOUR_APP_ID] \
 --apiKey [YOUR_API_KEY] \
 --environmentId dev \
 --squidDeveloperId [YOUR_SQUID_DEVELOPER_ID]  \
 --region us-east-1.aws

6. Start the backend in this terminal window by running the following command:

squid start

7. Open a second terminal window. In this window, navigate to the frontend:

cd queue/frontend

8. Install the required dependencies:

npm install

9. Create a local.env file that contains information about your Squid app using the following command. The frontend then accesses these environment variables in the SquidContextProvider in main.tsx.

npm run setup-env

10. Start the frontend by running:

npm run dev

11. Click the URL in the terminal logs to open the app (likely http://localhost:5173/).
12. Interact with the UI. Write a message in the field, and click Write Message. Your message then appears.

Next Steps:

To learn more about Squid Queues, view the docs on queues. learn how to secure your queues