Fallback image if src doesn’t exist for image tag – ReactJS

Leave a reply

Hey everyone,

I have a small list component that I wanted to populate with a custom image based on the entity’s id. Unfortunately, not all entities have an image so some were appearing broken.

In order to get around this I used the img tag’s onError attribute in ReactJS. If the image can’t be found it the callback is invoked. In the callback I set the src of the image tag to a known placeholder.

<img
   src={`/img/widgets/${widgetId}.jpg`}
   style={{
      height: 50,
      width: 50,
   }}
   onError={(e: any) => e.target.src = '/img/widgets/no-image.jpg'}
/>

Using this attribute allows me to use a known convention to automatically populate images and then fallback to a suitable default if it’s not available.

I found the following links pretty handy when looking for a solution: https://stackoverflow.com/a/64326984/522859

.Net 5.0 – This package is required for the Entity Framework Core Tools to work

Leave a reply

I was trying to create a migration in a new project within a solution and received the following error:

Build started…
Build succeeded.
Your startup project ‘SubscriptionManagementGrpcService’ doesn’t reference Microsoft.EntityFrameworkCore.Design. This package is required for the Entity Framework Core Tools to work. Ensure your startup project is correct, install the package, and try again.

The error was a bit confusing because all of my migrations for the rest of the solution were still working and none of my other startup projects had Microsoft.EntityFrameworkCore.Design as a reference.

After a bit of comparing I realised that the other projects all referenced data projects that in turn referenced Microsoft.EntityFramework.Design. Adding the package reference to the subscription data library referenced by my GrpcService fixed the issue.

ElasticSearch on AWS – Anonymous is not authorized to perform es:ESHttpGet

Leave a reply

Hi everyone,

I am trying out ElasticSearch on AWS and ran into the following error while trying to access the provided Kabana endpoint:

{"Message":"User: anonymous is not authorized to perform: es:ESHttpGet"}

This turned out to be pretty simply, I just needed to whitelist my IP. Go to your search domain in the aws console, click access and finally select “Modify access policy”:

Then all you need to do is add another statement that gives your current ip access:

{ 
"Version": "2012-10-17", 
"Statement": [
{
 "Effect": "Allow",
"Principal": {
 "AWS": "*"
},
"Action": [
"es:ESHttp*"
],
"Condition": {
"IpAddress": {
"aws:SourceIp": [
"192.0.2.0/24"
]
}
},
"Resource": "arn:aws:es:us-west-1:987654321098:domain/test-domain/*"
}
]
}

Feel free to comment below if you hit any issues, but I also found the following links pretty helpful:

https://docs.aws.amazon.com/elasticsearch-service/latest/developerguide/es-ac.html#es-ac-types-ip

https://aws.amazon.com/premiumsupport/knowledge-center/anonymous-not-authorized-elasticsearch/

Docker Volumes Mounting File as Folder on Windows

Leave a reply

Hey everyone,

I ran into a small issue today using docker-compose. I had a config file I was trying to mount as a volume however running “docker-compose up” generated a folder instead.

ERROR: for grafana Cannot start service grafana: OCI runtime create failed: container_linux.go:349: starting container process caused “process_linux.go:449: container init caused \”rootfs_linux.go:58: mounting \\\”/host_mnt/e/repos/Sample-Twitch/grafana/datasources.yml\\\” to rootfs \\\”/var/lib/docker/overlay2/f5c9553407551b68dc5d5877d748ba2bf7d2f0dd2ad12c73e39be40af185c82d/merged\\\” at \\\”/var/lib/docker/overlay2/f5c9553407551b68dc5d5877d748ba2bf7d2f0dd2ad12c73e39be40af185c82d/merged/etc/grafana/provisioning/datasources/prometheus.yaml\\\” caused \\\”not a directory\\\”\””: unknown: Are you trying to mount a directory onto a file (or vice-versa)? Check if the specified host path exists and is the expected type ERROR: Encountered errors while bringing up the project.

The issue turned out to be an oversight on my part, I’d misspelled the config filename and docker was unable to find it. Consequently, it generated the missing file as a directory.

It took a bit of Googling to narrow this down, but eventually this stackoverflow post pointed me in the right direction: https://stackoverflow.com/a/44950494/522859

Thanks,
Chris

Useful RabbitMQ Commands

Leave a reply

Hey everyone,

This is more for personal reference, but hopefully it’s able to help someone else as well. This post will simply be used for a list of RabbitMQ commands that I’ve found handy and may need to use again down the track.

CommandDescriptionReferenceMisc
rabbitmqctl stop_app
rabbitmqctl reset # Be sure you really want to do this! rabbitmqctl start_app		Used to completely reset rabbit mqhttps://stackoverflow.com/a/11459967/522859

Useful Docker Commands

Leave a reply

Hey everyone,

This is more for personal reference, but hopefully it’s able to help someone else as well. This post will simply be used for a list of docker commands that I’ve found handy and may need to use again down the track.

CommandDescriptionReferenceMisc
docker build -t “twitch/warehouse” -f .\Dockerfile-warehouse .Build and tag an imageUsed while following this tutorial: https://github.com/MassTransit/Sample-Twitch
docker psList all running containers
docker exec -it <container_id> shAccess terminal of running containerhttps://stackoverflow.com/a/30173220/522859
docker stop <container_id>Stop a running containerCan then start it again using docker start <container_name>

MassTransit with Mediator – ‘IServiceCollectionBusConfigurator’ does not contain a definition for ‘AddMediator’ and the best extension method overload ‘DependencyInjectionRegistrationExtensions.AddMediator(IServiceCollection, Action)’ requires a receiver of type ‘IServiceCollection’

Leave a reply

Hi everyone,

I’m currently learning MassTransit by following a great video series by Chris Patterson: https://www.youtube.com/watch?v=dxHNAn69x6w&list=PLx8uyNNs1ri2MBx6BjPum5j9_MMdIfM9C&index=1. Unfortunately, when trying to add mediator as instructed in the first video I hit the following error:

‘IServiceCollectionBusConfigurator’ does not contain a definition for ‘AddMediator’ and the best extension method overload ‘DependencyInjectionRegistrationExtensions.AddMediator(IServiceCollection, Action)’ requires a receiver of type ‘IServiceCollection’

After a bit of Googling I came across some upgrade documentation with the following highlight:

Container configuration has changed, and now uses the AddMediator method (instead of AddMassTransit).

The solution ended up being as follows:

services.AddMediator(x =>
{
x.AddConsumersFromNamespaceContaining();
x.AddRequestClient();
});

Thanks to this link for the info: https://masstransit-project.com/getting-started/upgrade-v6.html#version-7

Overwrite Selected Tree View Item Styles – Material UI ReactJS

Leave a reply

Hi everyone,

Just a quick post on how to overwrite the styles of a selected tree item using material ui and ReactJS:

treeItem: {
paddingTop: theme.spacing(1),
‘&[aria-selected=”true”][aria-expanded=”true”] > div:nth-of-type(1)’: {
backgroundColor: ‘red’,
}
},

This will make the background color red for ONLY the selected item:
material-ui-tree-view

Cheers,
Chris

Failed to load the development https certificate using docker and ocelot

Leave a reply

Hey everyone,

I randomly started encountering the following error while using docker to host my Ocelot gateway:

Failed to load the development https certificate at ‘/root/.aspnet/https/ContentGateway.pfx’.

The solution ended up being to clean out as many temp files as possible, especially the generated certs:

  • Delete the following files: Delete the C:\Users{USER}\AppData\Roaming\ASP.NET\Https folder
  • Clean the solution. Delete the bin and obj folders (I just did this for the gateway project)
  • Restart visual studio/visual code

I’ll add an update if I can narrow down what caused the initial issue but for now this seems to work.

Thanks to the following links for the info:
– https://docs.microsoft.com/en-au/aspnet/core/security/enforcing-ssl?view=aspnetcore-3.1&tabs=visual-studio#trust-the-aspnet-core-https-development-certificate-on-windows-and-macos
– https://stackoverflow.com/q/52457514/522859