Category Archives: Web Development

Breaking the Internet

“‘protoc-gen-go’ is not recognized as an internal or external command” – Go

Hi everyone,

I’m currently looking into Go and have hit the following error while trying to run proto:

`protoc-gen-go` is not recognized as an internal or external command

I am using Windows and have installed the required libraries:

go get -u github.com/golang/protobuf/proto
go get -u github.com/golang/protobuf/protoc-gen-go

In my case the issue turned out to be that proto-gen hadn’t been added to my path: E:\repos\gocode\bin

Note that the new path won’t be available until you restart your terminal.

A subsequent error I encountered was the following:

'protoc-gen-go-grpc' is not recognized as an internal or external command,
operable program or batch file.

I just had to run the following to resolve it:

go install google.golang.org/grpc/cmd/protoc-gen-go-grpc@latest

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