Knowledge Base for IT Professionals, Teachers and Astronauts
To determine how much memory the Azure Container App needs, we can use the Metrics feature. To monitor the resource usage
To pass secrets, configuration values to Azure Container Apps we can use the Azure CLI or the Azure Portal.
To pass an environment variable value to toe Azure Container App using the Azure CLI execute the command in a terminal
az containerapp update --name <app-name> --resource-group <rg> \
--set-env-vars NODE_OPTIONS="--max-old-space-size=4096"
Azure Container Apps (ACA) run containers in a serverless environment with zero environment maintenance requirement. To deploy a new application in Azure Container Apps follow the steps at Deploy a web application in Azure Container Apps (ACA)
To deploy a new version of the same app in Azure Container Apps
To push a Docker container image to the Azure Container Registry
docker build -t MY_IMAGE . az login
az acr login --name MY_REGISTRY
docker tag MY_IMAGE:latest MY_REGISTRY.azurecr.io/MY_REPOSITORY/MY_IMAGE:latest
docker push MY_REGISTRY.azurecr.io/MY_REPOSITORY/MY_IMAGE:latestdocker build -t …:latest .
ERROR: error during connect: Head “http://%2F%2F.%2Fpipe%2FdockerDesktopLinuxEngine/_ping”: open //./pipe/dockerDesktopLinuxEngine: The system cannot find the file specified.
Solution
Start the Docker Desktop application
error from registry: authentication required, visit https://aka.ms/acr/authorization for more information. CorrelationId: 2a33d0ac-091c-4158-b927-397c6e5692cf
Solution
The Azure Container Registry hosts container images for deployment in any of the container hosting services.
If you have created an Azure Resource Group, and want to change the name, unfortunately you cannot rename it. To change the name create a new resource group and move all resources from the old group to the new one.
To deploy an application to Azure Container Apps
The GitHub Copilot budget allows us to make sure we get the necessary premium assistance with a predictable price.
AI agent usage is charged by the complexity of the request and response, so the charges are very unpredictable
The $10 GitHub Copilot Pro subscription includes the free tier usage, that is may not enough if we use premium features, like Anthropic’s Claude Sonnet (for rapid drafts), and Claude Opus (for polishing the final, most complex sections).
When you have reached the limits of the free tier, you can update the budget to responsibly request more help to finish the project. To update the GitHub Copilot Coding Agent budget
Tailwind is a rapid web development tool to style user interfaces using English like expressions. It has advantages and disadvantages.
Instead of complex CSS, use English like style class names to control all aspects of the web interface
When we use CSS, we create classes to style similar elements, like submitButton, searchField. Tailwind classes define a specific visual property, like background, border, text color. There is no room to create styles for similar objects. Using Tailwind it can be tedious to keep the visuals consistent in a large web application. If we want to update the style of all buttons on multiple pages, we have to visit all of them to change the class names.
In this tutorial we will develop a system that merges the advantages of the CSS thematic classes and the friendliness of Tailwind.
We will create a class collection, a middle layer between the Tailwind classes and the elements to specify the look of all controls with the same purpose. You still can override the values at the individual control level with the ! (important) postfix.
Create the styles/classes.ts file in the same directory where the style sheets are located for consistency. In this example we will create separate themes for the panel header, and the panel body. All contains light and dark mode Tailwind classes for background, border, button text, hover styling.
// Define color themes for different panel types
// Each theme includes classes for borders, backgrounds, text, inputs, buttons, and drag states
export const ColorThemes = {
panelHeader: {
bg: "bg-slate-200 dark:bg-slate-700",
text: "text-black dark:text-white",
input: "bg-white dark:bg-slate-600 text-black dark:text-white placeholder:text-slate-500 dark:placeholder:text-slate-400",
button: "bg-black/50 dark:bg-white/20 text-white/80 dark:text-white hover:bg-black/40 dark:hover:bg-white/50",
},
panelBody: {
border: "border-blue-200 dark:border-slate-600",
bg: "bg-slate-100 dark:bg-slate-700",
text: "text-blue-200 dark:text-blue-800",
hover: "hover:bg-blue-100 dark:hover:bg-slate-700",
button: "bg-blue-600 dark:bg-blue-800 hover:bg-blue-500 dark:hover:bg-blue-700",
},
};In the .tsx file import the class collection and create constant references.
// Import color themes to standardize appearance for light and dark modes
import { ColorThemes } from "~/styles/classes";Style the controls. Enclose the entire className definition in curly braces, and use backtick to allow variable usage in the string. You can add additional Tailwind classes to the element to set specific visual features.
<div className={`${ColorThemes.panelBody.bg} ${ColorThemes.panelBody.border} rounded-xl`} >To override the background color for this element, use the ! (important) postfix
<div className={`${ColorThemes.panelBody.bg} bg-black! rounded-xl`} >Material UI is a great Google React UI component library. It looks great, provides consistent look for web applications, but it has two disadvantages:
Material Tailwind is an opensource library recreating the consistent look of Material UI, but allowing Tailwind themes to control the look.
To set a React Router (Remix) web application to use Material Tailwind
Install Tailwind CSS
pnpm install tailwindcss @tailwindcss/viteConfigure the Vite plugin. Add the bold lines to the vite.config.js file
import { reactRouter } from "@react-router/dev/vite";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
plugins: [
tailwindcss(),
reactRouter(),
tsconfigPaths(),
],
});Add to the app.css file
@import "tailwindcss";See Install Tailwind CSS with React Router
Execute the command
pnpm i @material-tailwind/reactCreate the tailwind.config.js file in the root of the web application directory
const withMT = require("@material-tailwind/react/utils/withMT");
module.exports = withMT({
content: ["./app/**/*.{js,jsx,ts,tsx}"], // Add your template paths here
theme: {
extend: {},
},
plugins: [],
});If you are using a monorepo, to host multiple applications in the same repository, and the node_modules directory is not in the application directory, use this tailwind.config.js file in the root of the web application
import type { Config } from "tailwindcss";
import withMT from "@material-tailwind/react/utils/withMT";
export default withMT({
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"path-to-your-node_modules/@material-tailwind/react/components/**/*.{js,ts,jsx,tsx}",
"path-to-your-node_modules/@material-tailwind/react/theme/components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
} satisfies Config);Theme Provider
Wrap the entire application with the ThemeProvider. Create the app/entry.client file
import { RemixBrowser } from "@remix-run/react";
import { startTransition } from "react";
import { hydrateRoot } from "react-dom/client";
import { ThemeProvider } from "@material-tailwind/react";
startTransition(() => {
hydrateRoot(
document,
<ThemeProvider>
<RemixBrowser />
</ThemeProvider>
);
});This example displays a button using the Material Tailwind library
import MaterialTailwind from "@material-tailwind/react";
const { Button } = MaterialTailwind;
export default function Example() {
return <Button>Button</Button>;
}