Category Archives: Web Development

Breaking the Internet

Azure CDN not updating after deployment – Azure

Hey everyone,

I’ve setup a deployment pipeline for the JellyWidgets.com react app that I’m currently messing around on. Unfortunately, while the deployment appeared to be successful it the CDN wasn’t updating.

This turned out to be a fairly simply fix – I needed to purge the cache after each deployment. This can be done manually using the Azure portal:

Simply click the purge button on your CDN’s profile page. For a more permanent fix you can also setup a pipeline step like the following:

      - task: AzureCLI@2
        displayName: 'Purge the CDN.'
        inputs:
          azureSubscription: $(azureSubscription)
          scriptType: 'pscore'
          scriptLocation: 'inlineScript'
          inlineScript: 'az cdn endpoint purge --resource-group widgets-prod --name $(resourceGroup) --profile-name JellyWidgets --content-paths "/*" --no-wait'
          workingDirectory: '$(Build.SourcesDirectory)/UI/infrastructure'
          failOnStandardError: true

Note that if you don’t add the “no-wait” step it can take a long time for the purge to complete.

See the following urls for more info:

Setup MongoDB on an Azure VM

Hi everyone,

I’m currently using a small linux vm to host a MongoDB instance on Azure. These are the steps I followed:

## MongoDB

### Install
https://docs.mongodb.com/manual/tutorial/install-mongodb-on-ubuntu/

1. Import the public key: `wget -qO - https://www.mongodb.org/static/pgp/server-4.4.asc | sudo apt-key add -`
2. Create a list file:  `echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu bionic/mongodb-org/4.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-4.4.list`
   - This is for Ubuntu 18.04, check version using `lsb_release -a` 
3. Reload the local package database: `sudo apt-get update`
4. Install MongoDb: `sudo apt-get install -y mongodb-org`
5. Pin the version to prevent automatic upgrades 
```
echo "mongodb-org hold" | sudo dpkg --set-selections
echo "mongodb-org-server hold" | sudo dpkg --set-selections
echo "mongodb-org-shell hold" | sudo dpkg --set-selections
echo "mongodb-org-mongos hold" | sudo dpkg --set-selections
echo "mongodb-org-tools hold" | sudo dpkg --set-selections
```

### Allow remote access
https://www.digitalocean.com/community/tutorials/how-to-configure-remote-access-for-mongodb-on-ubuntu-20-04

1. sudo nano /etc/mongod.conf
2. Find the `network interfaces` section
3. Find the `bindIp` value
4. Append the public ip of your vm to this address list `bindIp: 0.0.0.0`
   - *Note that this is the VM ip not the ip of the machine you plan to connect from.*
5. Restart MongoDB `sudo systemctl restart mongod`

### Add authentication
1. Connect to the instance from an ssh connection: `mongo --port 27017'
2. Create the user:
https://stackoverflow.com/a/38921949/522859
```
db.createUser(
  {
    user: "YOUR_USERNAME",
    pwd: "YOUR_PASSWORD",
    roles: [ { role: "root", db: "admin" } ]
  }
)
```
3. Restart with access control: `mongod --auth --port 27017 --dbpath /data/db1`
4. Authenticate as the user adminstrator: `mongo --port 27017 -u "YOUR_USERNAME" -p "YOUR_PASSWORD"  --authenticationDatabase "admin"`
5. Locate the commented out security heading and uncomment it.
6. Add `authorized: enabled`
```
security:
  authorization: enabled
```
7. Restart with access control: `mongod --auth --port 27017 --dbpath /data/db1` 

Setup PostgreSQL on an Azure VM

Hi everyone,

I’m currently testing out a small linux vm with PostgreSQL on Azure. Just sharing the steps for future reference and hopefully it’ll be able to help you out as well.

# Setup PostgreSQL on Azure VM

## Run updates
sudo apt-get update
sudo apt-get install postgresql

## Setup postgresql.conf
1. sudo vim /etc/postgresql/10/main/postgresql.conf
2. Add or uncomment `listen_addresses = '*'`

## Update pg_hba.conf
1. sudo nano /etc/postgresql/10/main/pg_hba.conf
2. Add the following line `host    all             all             151.XXX.XXX.XXX/32        md5` *\*where the ip is your public ip*
3. Restart pgsql `invoke-rc.d postgresql restart`

## Setup a PostgreSQL user
https://serverfault.com/a/248162/148152  

1. sudo -u postgres psql postgres
2. postgres=# \password postgres
3. Enter a new password and then confirm it.

## Done
You should now be able to login remotely (I was using pgAdmin from Windows for this).

Good luck!

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

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

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

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

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

Overwrite Selected Tree View Item Styles – Material UI ReactJS

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

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