Samuel engineersamuel

Introduction

This blog will detail how to manage remote docker-compose instances with Azure Devops Deployment groups.

I'm going through https://docs.microsoft.com/en-us/azure/devops/pipelines/ecosystems/containers/acr-template?view=azure-devops as a template.

I'm using AzureDevops https://dev.azure.com/, when I signed up it automatically created a project {FirstName}{LastName} for me.

Under Pipelines click Deployment Groups and create a new Deployment Group. You'll need to copy the script and run it on the machine in question. That could be a VM, for this blog I'm testing on my personal laptop.

Introduction

When using Apollo Graphql in the front-end, there is no established pattern to separate out your graphql queries into separate files instead of bundled with the js assets. I've searched and tried many various ways, including webpack file-loader and even modifying file-loader. Actually file-loader will separate it out but it returns a url that points to the filesystem which is not easily consumed. The answer is actually strangly obvious once you see the solution.

TL&DR: If you want to skip ahead to the configuration see What worked at the bottom.

The goal being, having some directory structure like:

src
- graphql

users.query.graphql

	from pirate_speak.chain import chain as pirate_speak_chain

	add_routes(
	app,
	pirate_speak_chain,
	path="/pirate-speak",
	playground_type="chat",
	)

	const sendPayload = server$(async function*(input: unknown, config: unknown) {
	const self = this as unknown as RequestEventBase;
	for await (const s of fetchEventSource(`${self.env.get('LANGSERVE_BASE_URL') ?? ''}/stream_log`, {
	method: "POST",
	headers: { "Content-Type": "application/json" },
	body: JSON.stringify({ input, config }),
	signal: self.signal
	})) {
	yield s;
	}

	const startStream = useCallback(async (input: unknown, config: unknown) => {
	const controller = new AbortController();
	setController(controller);
	startRef.current?.({ input });

	let innerLatest: RunState \| null = null;

	await fetchEventSource(resolveApiUrl("/stream_log").toString(), {
	signal: controller.signal,
	method: "POST",

	await getBytes(response.body!, getLines(getMessages(id => {
	if (id) {
	// store the id and send it back on the next retry:
	headers[LastEventId] = id;
	} else {
	// don't send the last-event-id header anymore:
	delete headers[LastEventId];
	}
	}, retry => {
	retryInterval = retry;

	export function useAppStreamCallbacks() {
	// callbacks handling
	const context = useRef<{
	onStart: Exclude<StreamCallback["onStart"], undefined>[];
	onChunk: Exclude<StreamCallback["onChunk"], undefined>[];
	onSuccess: Exclude<StreamCallback["onSuccess"], undefined>[];
	onError: Exclude<StreamCallback["onError"], undefined>[];
	}>({ onStart: [], onChunk: [], onSuccess: [], onError: [] });

	const callbacks: StreamCallback = {

	<script>
	window.onload = function() {
	// Begin Swagger UI call region
	const ui = SwaggerUIBundle({
	url: 'http://localhost:7071/api/swagger/openapi.json', oauth2RedirectUrl: 'http://localhost:7071/api/swagger/oauth2-redirect.html',
	dom_id: '#swagger-ui',
	deepLinking: true,
	presets: [
	SwaggerUIBundle.presets.apis,
	SwaggerUIStandalonePreset

	{
	"IsEncrypted": false,
	"Values": {
	"AzureWebJobsStorage": "UseDevelopmentStorage=true",
	"FUNCTIONS_WORKER_RUNTIME": "dotnet"
	},
	"Host": {
	"LocalHttpPort": 7071,
	"CORS": "*"
	},