Fixed My Docker Container and Built a Progress Bar

After last night’s stream, I felt ripped off… I got all the way through building a container and running my application in it, and it didn’t work.  I couldn’t sleep last night, wondering what I did wrong.  So, I did what any developer would do: I investigated.

I inspected the contents of my container image from yesterday by attaching to it and running a bash shell to look around in it:

docker exec -it mycontainer bash

When I looked at the content of the /app folder, it was empty.

via GIPHY

Alright, let’s rebuild that container.  I updated the publish statement inside my dockerfile to ensure the entire contents of my application were published in a self-contained manner:

RUN dotnet publish -c Release -o /app -r linux-x64 --self-contained

When I built my container, everything was loaded properly and I was able to access the application.  Success!

I wrote a simple file to disk with my private configuration settings to manage my stream, and started using the –env-file switch to load those settings as environment variables for my container.  That file looked like this:

StreamServices__Twitch__Channel=csharpfritz
StreamServices__Mixer__Channel=csharpfritz

I would then run my container with this command:

docker run -itd -p 8000:80 --env-file env.txt --name streamtools fritzregistry.azurecr.io/fritz.rundown

Next, I needed to tune how Mixer’s data was being loaded, because the NuGet package I grabbed was forcing me to login with OAuth in a browser window.  I discovered that the endpoint to read channel information is not authenticated and I could hit it directly.  This lead to me simplifying the MixerService class to use an HttpClient to query the endpoint and using a timer to periodically refresh the data.  That was easy….

Finally, we built a follower-goal meter just like the one at the top of my stream.  This was a simple MVC Action in the FollowersController called “Goal” and we added parameters to it that allowed it to be customized from either the application configuration, or on the URL.  I could make it look JUST like my current meter with this URL:

http://localhost:8000/Followers/Goal/500/ASP.NET Core Workshop?width=800

and the following was output:

My New Gauge

My New Gauge

Next time, we’ll do some more CSS cleanup and tuning in the project.  I want to figure out how to unit test this and refactor out some other configuration to make it more general purpose.  I hope you join me then!