mitzen

We can upgrade our sku from basic to premium using az cli. Here is the link that allow us to do just that  https://stackoverflow.com/questions/39535913/upgrade-azure-key-vault-to-premium-sku If you want to convert premium to standard, you can also do that  az keyvault update --set properties.sku.name=standard --name mykeyvault --resource-group my_rg_name

To start nextjs application, we need to run "npm run build", to get a production build. Next you need to manually copy a folder called "static" to ./next/standalone/.next (notice there is 2 .next folder) Then by running "node server.js" in standalone folder will allow you to load your application correctly.

This seems like Auth0 stores the login session information and when I try to relogin from another host, it says unable to find the session cookies. Clear the cookies and redo the login process. 

First you have to install using npm install.  npm install -g open-next The run the build command open-next build Finally, examine the output in .open-next folder 

https://github.com/sst/open-next/blob/main/README.md#custom-build-command

 Use the non-null assertion operator for example user.name! to resolve it  Or alternative you can cast it into a more acceptable typed for example  user.name as string  Best approach is to use type guard .  const username = user.name !== null ? user.name : ''

 This tools allows us to do a dump of application gc. So we start off with dotnet-dump ps which list down all the processes.  Then run dotnet-gcdump collect -p 11596, to generate the reports out  dotnet-gcdump report .\20230827_162357_11596.gcdump An example output is shown in diagram below:

 We can easily install this tool to collect dump from Linux and Windows environment. dotnet tool install --global dotnet-dump Once you have install it, run dotnet-dump ps to list current processes To create a dump, simply run the following command, where -p is the process Id (as listed by command above  dotnet-dump collect -p 11596 Once you have collected the dump, it is time to analyze it. There's some differences from windbg but it is essentially the same.  You will need to run  clrthreads  As you can see, we have an exceptions here. Then we just run "pe" (print exceptions) with the address   000001620000c370 This will gives us the exceptions.  One thing good about dotnet-dump is that sos would just work. For example you can try to use  sos runtimes  Dumping IL  First you need the correct method descriptior. To get that, try to run : sos dumpstack  Then you can run dumpil for example  If you have problem, always remember to use soshelp 

  The solution is basically turn on react restrict mode in the next.config.js. const nextConfig = {     experimental : {         //outputStandalone: true,         serverActions : true ,     },     reactStrictMode : true , } To read more about react restricted mode here: https://refine.dev/blog/react-strict-mode-in-react-18/#what-is-react-strict-mode

 As stated in this open issue here: https://github.com/vercel/next.js/issues/51875 The solution is the user either server actions or route handler as documented here.  https://nextjs.org/docs/app/api-reference/functions/cookies

 if you are using app router in nextjs and you have a routing.ts and page.tsx in the same folder, then it will not even compile and throws an error.  

  Example code that works import type { InferGetServerSidePropsType , GetServerSideProps } from 'next' ; type Repo = {   name : string   stargazers_count : number } export const getServerSideProps : GetServerSideProps <{   repo : Repo }> = async () => {     console . log ( "executing getServerSideProps" );   const res = await fetch ( 'https://api.github.com/repos/vercel/next.js' )   const repo = await res . json ()   console . log ( repo );   return { props : { repo } } } export default function Page ({     repo   } : InferGetServerSidePropsType < typeof getServerSideProps >) {       return (       <>       < p > hello there </ p >       </>     ) }

  https://auth0.com/docs/quickstart/webapp/nextjs/01-login

 This basically means that the component will load the first time and do it things  useEffect (() => {       console . log ( "effect called." );    }, []); Probably relevant to other scenario as well - this shows an example but maybe not realistic one - that if you forget to clean, there could be some side effects.   useEffect (() => {     console . log ( "calling effects" );     const itv = setInterval (() =>     {       setCount ( count + 1 )     }, 3000 );     return () => {         clearInterval ( itv );     }    }, [ count ]);

  Envoy gateway supports one GatewayClass (one load balancer per K8s) but sometimes there could be more scenario where you have more than one GatewayClass - 2 or more load balancer) then you might need to instantiate that in a namespace.  Troubleshooting gateway issues kubectl get gatewayclass  If your gatewayclass works correctly, then its column "Accepted" would be true - as shown below. My Product gatewayClass has issue as it has a status "Unknown". Also you can do a kubectl logs on the envoy proxy controller in the envoy-gateway-system. It should shows a huge bunch of logs about reconciling gateway classes.  In my scenario, I have multiple gateway class. If you do a kubectl get gateway  -A, you should see PROGRAMMED = true if your gateway is running correctly.  Since I created another gateway class in marketing namespace, it also create a Load Balancer service and if you look at the diagram above, i have it bind to localhost:8080.  So all I need to do is to hit 

 Given that some AKS cluster is managed, i think the best way to check/see if a feature is installed is by running  kubectl api-resources

 https://kubernetes.io/docs/reference/command-line-tools-reference/feature-gates/

This error indicate that you cannot have global selector such as ul or li definite in module.css. You must have a specific classname as shown in example below:  .productInfo {     font-size : 12pt ;     font-weight : bold ; } .productDescription {     font-size : 10pt ; }

You can try the following solution  const StaticLabel = dynamic (() => import ( './productTitle' ). then ( mod => mod . StaticLabel )); or  const StaticLabel = dynamic < any >(     () => import ( './producTitle' ). then ( mod => mod . StaticLabel )   )

 Always keep on forgetting the syntax for this - create a component and apply typing for it. export const StaticImage = ({ imageUrl } : { imageUrl : string }) => {     return < Image     src = { imageUrl }     alt = ""     width = { 500 }     height = { 500 } /> }

  Found 2 good AKS kubernetes troubleshooting resources: https://github.com/feiskyer/kubernetes-handbook/blob/master/en/troubleshooting/index.md https://learn.microsoft.com/en-us/troubleshoot/azure/azure-kubernetes/node-not-ready-basic-troubleshooting?source=recommendations

 Bump into this error a day ago and the solution is to add this to tsconfig.ts "lib" : [ "esnext" , "dom" ]

 We can have this here  https://gateway.envoyproxy.io/v0.5.0/

Tried with adding this to resolve it, still didn't work for me.   images : {         remotePatterns : [             {                 protocol : 'https' ,                 hostname : 'assets.woolworths.com.au' ,                 port : '' ,                 pathname : 'images/*' ,             },         ],     }, But this does work - I guess I am using older version of nextjs but my package.json says I am on version 13.4.11. images : {         domains : [ 'weetbix.com.au' ],       },

https://almanac.httparchive.org/en/2022/performance#lcp-image-optimization

 We can easily add some spacing to our grid by using the following: < Grid         container         spacing = { 0 }         alignItems = "center"         justifyContent = "center"         sx = { { minHeight : '20vh' , marginTop : 10 } }         >

To escape, i just use   {% raw % } ${{ parameters.tfautoapprove }} {% endraw %} As you can see, the {{ is escaped.  Can refer to this article for more info. https://jinja.palletsprojects.com/en/2.10.x/templates/#escaping

 Today was installing app dependencies using yarn and npm. When i do a "npm install" it keeps on saying I need to resolve some dependencies.  Then tried using npm ci --force it works. npm ci is used specifically for an automated or ci environment where there will be less interactivity. --force : will force npm to fetch remote resources even if a local copy exists on disk.

Getting the prisma result type can be interesting.   

 Getting this error and able to resolve it using    "prisma" : {     "seed" : "ts-node --compiler-options { \" module \" : \" CommonJS \" } prisma/seed.ts"   },

Resolve this by defining the following in your vitest.config.ts, as shown below. Please make sure you have install jsdom package. import { defineConfig } from 'vite' ; import react from '@vitejs/plugin-react' ; export default defineConfig ({   plugins : [ react ()],   test : {     environment : 'jsdom' ,   }, });

Bump into this error and i resolve it by using the good old absolute path for example if you have component in /src/component then you should provide '../component/<your component name>.tsx'