In a nutshell, Squad is like having a team of AI assistants that can help you with all aspects of software development, from planning and design to implementation and testing. It’s a powerful tool that can help you be more productive and efficient, but it does require some learning and experimentation to get the most out of it.

• Squad repository
• Squad documentation

Note: This blog post was written on an early alpha version of Squad, so some of the details may change as the product evolves. However, I believe the general principles and tips will still be relevant.

I’ve used Squad on two projects so far: my open-source project Joseph Guadagno Broadcasting and a new project I was starting to build. This gave me a two different contexts to learn how to use Squad effectively. A “mature” codebase with a lot of existing code and patterns to learn from, and a “greenfield” codebase where I could define the architecture and patterns from scratch.

For the Broadcasting project, when I initialized the Squad, it created the squad with the names of cast of the Matrix movies. You can customize your team and their roles or chose to have them randomly generated. I think there are about 11 preconfigured teams to choose from.

On to the tips, tricks, and lessons learned!

The Relationship

First off, I want to talk about the relationship between you and your Squad. Your Squad is like a team of assistants that are there to help you, but they are not there to replace you. They are there to augment your abilities and help you be more productive, but they still need your guidance and oversight. Like any team, you need to establish a good working relationship with your Squad. This means communicating clearly, setting expectations, and providing feedback. The better the relationship you have with your Squad, the more effective they will be. This also means, that either you or your Squad can take the lead on different tasks. Sometimes you may want to take the lead and have your Squad follow your instructions, and other times you may want to let your Squad take the lead and provide guidance as needed. The key is to be flexible and adapt to the situation.

It’s also important to remember that your Squad is not perfect. They will make mistakes, and they will not always understand your intentions. This is why it’s important to provide feedback and correct them when they make mistakes. The more feedback you provide, the better your Squad will become. It’s a learning process for both you and your Squad, and it’s important to be patient and persistent as you work together to build a strong relationship. The Squad will learn from you and document your requests and preferences in the code base, so the more you use it and provide feedback, the better it will become at understanding your needs and preferences. You can also customize your Squad’s behavior and preferences by editing the files in the .github/agents/ directory of your repo. This is a powerful way to tailor your Squad to your specific needs and preferences. I “cheated” a took a head start and used the squad.agent.md from the Squad repository as a template for my Squad’s files, but you can customize them as much as you want. The key is to find a balance between providing guidance and allowing your Squad to learn and adapt on its own.

It’s also important to remember that you need to ease into the relationship with your Squad. Go all in too fast and the Squad might tell you to take a minute.

Sorry, you’ve hit a rate limit that restricts the number of Copilot model requests you can make within a specific time period. Please try again in 1 minute. Please review our Terms of Service (https://docs.github.com/site-policy/github-terms/github-terms-of-service). (Request ID: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx)

This is not really the Squad telling you to take a break, but you getting rate limited by GitHub Copilot. This is a good reminder that while Squad is a powerful tool, it does have limitations and it’s important to be mindful of those limitations as you work with your Squad.

Set Boundaries and Expectations

Associated with the relationship is the importance of setting boundaries and expectations with your Squad. This means being clear about what you want your Squad to do and what you don’t want them to do. For example, you may want to set boundaries around certain types of tasks that you want to handle yourself, or certain areas of the codebase that you don’t want your Squad to touch. Setting these boundaries and expectations can help prevent misunderstandings and ensure that your Squad is working in a way that is aligned with your goals and preferences. I created a label in my repo called squad:Joe that I use to track tasks that I want to handle myself, and I told the Squad to never work on issues with that label unless I explicitly ask them to. The prompt I used for that is:

Team, I created a label called squad:Joe that I will use to track tasks that I, the human, want to handle myself. Please do not work on any issues with that label unless I explicitly ask you to assist with them.

This is a simple way to set a boundary with your Squad and ensure that they are not working on tasks that you want to handle yourself. You can use similar prompts to set other boundaries and expectations with your Squad as needed.

Expectations

Pull Requests and Branches

Initially, the Squad was committing directly to the main branch of my repo, which is not ideal. I wanted them to create a branch and a pull request for any changes they wanted to make, so I set that expectation with the following prompt:

Team, for any changes to the codebase, there must be an issue created in the GitHub repo, and any code changes must be made in a branch with an associated pull request. Pull requests must also be tagged with the issue number. Please do not commit directly to the main branch.

This allows me to review any changes that the Squad wants to make before they are merged into the main branch, and it also allows me to provide feedback and guidance on those changes as needed. Setting this expectation has helped me maintain control over the codebase while still allowing the Squad to contribute and make changes as needed. After the team get’s the hang of your repository and your preferences, you can start to loosen the boundaries and allow them to take more initiative and make changes on their own. The key is to find a balance that works for you and your Squad, and to be flexible and adapt as needed.

I’ve also asked Neo, my “architect” team member, to review the pull requests created by the Squad and provide feedback on the architecture and design of the changes. This has been helpful in ensuring that the changes made by the Squad are aligned with the overall architecture and design of the project.

Neo, as the architect of the team, please review any pull requests created by the Squad and provide feedback on the architecture and design of the changes.

Neo, has caught a few things that the Squad has done that I may have missed, and has provided helpful feedback on how to improve the architecture and design of the changes. This has been a valuable part of the process and has helped ensure that the changes made by the Squad are of high quality and aligned with the overall goals of the project.

Sample Code Review from Neo on a pull request created by the Squad.

Testing

My tester, Tank, is good at creating tests, however, he would create them and commit them without validating that they were correct or even running them. This is not ideal, so I set the expectation with the following prompt:

Tank, going forward, before you commit any tests to the codebase, please run them locally to ensure that they are correct and passing. This will help ensure that the tests you create are effective and reliable, and it will also help prevent any issues with failing tests being committed to the codebase.

This has helped improve the quality of the tests created by Tank and has also helped prevent any issues with failing tests being committed to the codebase. It’s important to set expectations around testing and quality assurance to ensure that the changes made by the Squad are of high quality and do not introduce any issues or bugs into the codebase. It also prevented a lot of wasting of time with failed builds and deployments.

Helpful Commands

Initial Setup

After setting up your Squad, I recommend you run the following prompt to get your Squad to learn about your codebase and document it for future reference. This will help your Squad understand the architecture and design of your codebase, and it will also help them learn from the existing code and patterns in your codebase.

Team, to help you get up to speed with the codebase, please take some time to explore the codebase and learn about its architecture and design. As you explore, please document your findings and any patterns or best practices you discover in the codebase. Also, make any recommendations for improving the architecture or design of the codebase as you see fit. This will help you learn from the existing code and patterns in the codebase, and it will also help you understand how to work effectively within the existing architecture and design of the project.

Additional Tip: This is a good prompt to run periodically as your Squad learns and evolves, to help them continue to learn and adapt to the codebase as it changes over time.

Also, this prompt, or more so “make any recommendations for improving the architecture or design of the codebase as you see fit”, is not for faint of heart, or those who are not open to criticism. The initial list of recommendations I got back from the Squad was pretty overwhelming, somewhere around 150-200 recommendations. As I reviewed them, I found that mosts of them were important, helpful, and valid. Many of which were things I did not think about like, security, setting up a better CI/CD pipeline, duplicate code, better error handling, better logging, and the list goes on.

You can view the initial recommendations I got back from the Squad in the issues of my repo. I recommend you review the recommendations and prioritize them based on their importance and impact on the project. This can help you identify the most critical issues and improvements that need to be addressed, and it can also help you create a plan for addressing those issues and improvements over time.

In my case, I asked Neo to review the recommendations and help me prioritize them based on their importance and impact on the project. This has been helpful in identifying the most critical issues and improvements that need to be addressed, and it has also helped me create a plan for addressing those issues and improvements over time. And create sprints for the Squad to work on.

Prompt I used for that is:

Neo, as the architect of the team, please review the recommendations provided by the Squad and help me prioritize them based on their importance and impact on the project.

After a few moments of review, Neo came back with a prioritized list of recommendations and a plan for addressing those recommendations over time. While I was not thrilled with the names of the sprints, I thought they were pretty funny and sadly accurate.

The first sprint was “Fire Fighting: Stop the Bleeding”, which was focused on mostly security issues and critical bugs the needed to be addressed immediately. The second was “Pipeline Integrity: Broadcasting actually works”, which was focused on improving the CI/CD pipeline and ensuring that the project could be built, tested, and deployed reliably. Ouch!

Status Updates

Ralph, is the “coordinator” of the team. Ralph is a built-in squad member whose job is keeping tabs on work. Like Scribe tracks decisions, Ralph tracks and drives the work queue. He’s always on the roster — not cast from a universe — and has one job: make sure the team never sits idle when there’s work to do.

I found that asking Ralph for regular status updates on the work queue was helpful in keeping track of what the Squad was working on and what tasks were in the queue. I set the expectation with the following prompt:

Ralph, as the coordinator of the team, please provide status updates every minute on the work queue.

This was helpful when I was working with the Squad cli, which I learned is not the preferred way to interact with the Squad. The preferred way is to interact with the Squad through the GitHub Copilot CLI, which provides more functionality, status updates, and control over the Squad. When I switched to using the GitHub Copilot CLI, I found that I didn’t need to ask Ralph for regular status updates as much, because the CLI provided more visibility into what the Squad was working on and what tasks were in the queue.

Other tips

Know what is running and being used by the Squad. I was doing something in Visual Studio Code, not related to this project, and when I was finished I closed Visual Studio Code. After closing Visual Studio Code, I got a message in the terminal that Squads was running in said that “IDE Connection lost: Visual Studio Code - Insiders closed”. I guess that the Squad was using Visual Studio Code - Insiders to build the solution.

Be cautious about asking your Squad to do too much at once. While there is not much, that I have seen that the Squad cannot do, like any team, they can start to step over each other and get in each other’s way if they are working on too many tasks at once. This can lead to confusion and inefficiency, so it’s important to manage the work queue and ensure that the Squad is focused on a manageable number of tasks at any given time. Also, you run the risk of getting rate limited by GitHub and the recovery time can be long and sometimes it’s challenging for the Squad to pick back up where they left off after a rate limit.

Wrap Up

If you have any questions about Squad or want to share your own tips and tricks, please reach out to me on Bluesky or shoot me an email. I’m excited to see how the community uses Squad and what we can learn from each other!

References

• Squad repository
• Squad documentation
• GitHub Copilot website
• GitHub Copilot CLI
• Joseph Guadagno Broadcasting

Like most blog posts, this is an opinionated list of settings and plugins that I use when presenting with JetBrains Rider. Your mileage may vary and you may find other settings and plugins that work better for you when presenting. The important thing is to find what works best for you when presenting and to have fun presenting with JetBrains Rider.

Plugins

There are many plugins available for JetBrains Rider, these are two that I use when presenting … in no particular order :smile:.

Window Arranger

Window Arranger

This plugin helps you easily switch between projects, arrange project windows, and resize them to various predefined dimensions. You can align windows horizontally or vertically, maximize, and position them to the left, right, top, or bottom, improving workspace organization and productivity.

When the plugin is installed and enabled, you will see a “Window” like icon next to the project branch, highlighted in red, like this:

When you click on the icon, you will see a menu with the different options to arrange the windows.

Key Promoter X

Key Promoter X

The Key Promoter X helps you to learn essential shortcuts while you are working. When you use the mouse on a button inside the IDE, the Key Promoter X shows you the keyboard shortcut that you should have used instead.

This provides an easy way to learn how to replace tedious mouse work with keyboard keys and helps to transition to a faster, mouse free development. The Key Promoter X tool window shows you a hit-list of the mouse actions you use the most and directly provides you with the shortcut you can use instead. For buttons that don’t have a shortcut, the Key Promoter X prompts you with the possibility to directly create one.

Here is an example of the Key Promoter X showing a keyboard shortcut (F9) for the Toggle Breakpoint action when I click on the red dot in the gutter to set a breakpoint:

Bundled Plugins

This plugins are bundled with JetBrains Rider and I enable them when I am presenting.

Keymaps

I use these mostly because of muscle memory, being a long time user of Visual Studio and ReSharper. Plus, as a bonus, it allows me to show the keyboard shortcuts that most of the attendees of the presentation are used to.

• ReSharper Keymap
• Visual Studio 2022 Keymap
• Visual Studio Keymap

Others

• Terminal: I use the terminal a lot when presenting and this plugin allows me to have a terminal window inside of JetBrains Rider and not have to jump to the operating system terminal.
• Database Tools and SQL: I use this plugin when I am presenting database related topics and it allows me to connect to databases and run SQL queries inside of JetBrains Rider.

Settings

For the settings, I use the default settings for the most part, but there are a few settings that I change when I am presenting. These settings are mostly related to the appearance of the IDE and the editor.

Appearance and Behavior

In the Appearance section, the only “non-default” setting that I change is the Presentation Mode Zoom level, which I set to 175%. This setting is used when you enter presentation mode which I will cover in more detail in the Tool Windows / IDE Features > Appearance section below. This setting allows me to make the text and the UI elements larger when I am presenting, which makes it easier for the attendees to see what I am doing on the screen.

Appearance & Behavior > Presentation Assistant

There used to be a plugin called Presentation Assistant that would show the keyboard shortcuts on the screen when you used them. This plugin is no longer available because it was replaced by built-in features. These settings in the built-in Presentation Assistant help you to make the keyboard shortcuts more visible when presenting.

Navigate to Settings > Appearance & Behavior > Presentation Assistant and review the following settings:

• Check Show action names and shortcuts in popups to show the action names and shortcuts in popups when you use them.
• Assign the Keymaps you would like the Presentation Assistant to show when you use the keyboard shortcuts. I use the Keymaps of ReSharper Keymap and Visual Studio 2022 Keymap when presenting.

My settings look like this:

Editor

Editor > General

I change the following settings in Settings > Editor > General when I am presenting:

Editor > General > Mouse Control

• Check the Change font size with Ctrl+Mouse Wheel in: and select All editors to allow me to quickly adjust the font size if I need to during a presentation.
• Check the More code fragments with drag and drop to allow me to easily move code around when I am presenting.

Editor > General > Soft Wraps

This setting is more of a preference, but I like to check the Soft-wrap these files: and add *.md; *.txt; *.rst; *.adoc to allow me to easily read markdown files and other text files when I am presenting.

Editor > General > Appearance

• Check the Show line numbers: and set it to Absolute so I can reference line numbers when I am presenting and attendees can easily follow along.

Editor > General > Code Folding

These are more of a preference, and depending on the type of presentation I am giving, I may check or uncheck these settings. My default settings are:

Show code folding arrows is checked and set to On mouse hover.

Fold by default is checked for the following:

• General > File header
• General > Imports
• Android > String references
• JSON > Show key count in folded JSON
• Markdown > Collapse front matter
• Markdown > Collapse links
• Markdown > Collapse table of contents
• XML > HTML ‘style’ attribute
• XML > XML Entities
• XML > Data URIs
• YAML > Limit folded keys and values to 20 characters
• .NET > Preprocessor regions
• C/C++ > Conditionally non-compiled code
• F# > F# hash directives blocks

Editor > Font

Now this setting has a lot of personal preferences, but the two settings that I use when presenting are:

• Font: I also use a Mono spaced font when presenting and coding so I really don’t have to change this setting when I am presenting. I use JetBrainsMono Nerd Font Mono, but you can use any Mono spaced font that you like.
• Font size is usually set to 13 and line height is set to 1.0 when I am presenting. However, this will be adjusted based on the size of the room and the size of the screen that I am presenting on. I usually start with these settings and then adjust them as needed during the presentation. I’ll cover this is more detail in the Important Keyboard Shortcuts and Tool Windows / IDE Features section below.

Tool Windows / IDE Features

Tool Windows

These are available via shortcuts and via the View > Tool Windows menu. I use these tool windows when I am presenting to show different aspects of the IDE and to help me navigate through the code and the project. Some of the tool windows I use when presenting are:

• Explorer: CTRL+ALT+L or View > Tool Windows > Explorer to show the project structure and files when I am presenting.
• Database: CTRL+\+S or View > Tool Windows > Database to show the database connections and queries when I am presenting.
• TODO: CTRL+\+T or View > Tool Windows > TODO to show the TODO items in the code when I am presenting.

Appearance

These are available via shortcuts and via the View > Appearance menu. I use these appearance features when I am presenting to show reduce distractions and to help me navigate through the code and the project.

Some of the appearance features I use when presenting are:

Appearance > Presentation Mode

When I am ready to start presenting, I enter the presentation mode by going to View > Appearance > Enter Presentation Mode. This will hide all the tool windows and the menu bar and will make the editor take up the entire screen. This is a great way to focus on the code and the presentation without any distractions.

It’s going to be a little hard to see in the screenshot, but when you enter presentation mode, the menu bar and the tool windows are hidden and the editor takes up the entire screen. This screenshot is at a 1920x1440 resolution, so you can see that the editor is taking up the entire screen with just the code window, and there are no distractions.

While in presentation mode, you can still access the tool windows and the menu bar by using the shortcuts or by moving your mouse to the top of the screen to show the menu bar and the tool windows. This allows you to quickly access the features of the IDE without having to exit presentation mode.

You’ll also notice, that in the upper right corner of menu bar, there is a clock with the current time. This is a great way to keep track of time during a presentation and to make sure that you are staying on schedule. Plus, there is a Presentation Mode indicator next to the clock, so you can easily exit presentation mode.

Appearance > Presentation Assistant

Choose the Presentation Assistant option from the View > Appearance menu to show the keyboard shortcuts on the screen when you use them. This is a great way to show the attendees what keyboard shortcuts you are using during a presentation and to help them learn the shortcuts as well.

You can see in the screenshot above that I pressed CTRL+ALT+S to open the settings and the Presentation Assistant is showing the keyboard shortcut on the screen. This is a great way to show the attendees what keyboard shortcuts you are using during a presentation and to help them learn the shortcuts as well. Especially, if you forget to mention the keyboard shortcut that you are using during a presentation.

Important Keyboard Shortcuts

You can find all the keyboard shortcuts in the Settings > Keymap section, but here are some of the important keyboard shortcuts that I use when presenting, besides the typical CUT, COPY, PASTE shortcuts.

These shortcuts are with the Visual Studio 2022 Keymap, but you can use the shortcuts from the Keymap that you are using when presenting.

General

Navigation

Wrap Up

As I mentioned at the beginning of this post, these are just some of the settings and plugins that I use when presenting with JetBrains Rider. There are many other settings and plugins that you can use when presenting with JetBrains Rider, so I encourage you to explore the settings and plugins and find what works best for you when presenting.

References

• JetBrains Rider
• JetBrains Rider Plugins

Chris started by building a working prototype using Claude Code to see what it can do. After seeing the potential, I joined the project to help turn the prototype into a full-fledged platform. Over the next two months, we worked to design, develop, and launch MoreSpeakers.com.

Key Features

The platform’s main goal is to connect aspiring speakers with experienced mentors who can guide them through the process of becoming confident public speakers. Once a user signs up, they can create a profile highlighting their speaking interests (expertise’s) and goals. They can then browse through a list of available mentors, read their profiles, and request mentorship. Experienced speakers can also sign up to become mentors, sharing their knowledge and helping others grow.

How It Works

First step is to Sign Up. Users can create an account on MoreSpeakers.com, providing basic information about themselves and their speaking interests. After signing up, you can browse through the list of available mentors. Each mentor has a profile that includes their areas of expertise, speaking experience, and availability. When you find a mentor that aligns with your interests and goals, you can send them a mentorship request. Once a mentor accepts your request, you can start scheduling sessions and working together to improve your speaking skills.

Next step is to navigate to the Browse Speakers page. Here, you can filter speakers based on various criteria such as expertise, availability, and location. This makes it easy to find mentors who match your specific needs.

Once you’ve found a mentor that interests you, click on their profile to learn more about their background, experience, and areas of expertise. This information will help you determine if they are the right fit for your mentorship needs.

In the search results, you can see a list of speakers that match your criteria. Each entry includes the speaker’s name, areas of expertise, and a brief bio. You can click on a speaker’s name to view their full profile.

The speaker profile provides detailed information about the speaker, including their biography, goals and objectives, areas of expertise’s, links to their social media profiles, their Sessionize profile (if they provided one), and more. This information will help you decide if this mentor is the right fit for you.

If the speaker looks like a good match, you can send them a Mentorship Request directly from their profile page by clicking on Request Mentorship.

Sending a Mentorship Request

After finding a mentor, you can send them a Mentorship Request.

This request includes the expertise’s you are interested in and a brief message explaining why you are interested in working with them and what you hope to achieve through the mentorship. Once the mentor accepts your request, you can start scheduling sessions and working together to improve your speaking skills.

The Technology Behind MoreSpeakers.com

You can read all about the technology behind MoreSpeakers.com in my detailed article.

If you want to help out with the project, the repository is available on GitHub. Find a bug, submit an issue and/or a pull request. We are open to contributions, whether it’s fixing bugs, adding new features, or improving documentation.

Wrap Up

That’s it! Now you can start your journey to becoming a confident public speaker with the help of experienced mentors on MoreSpeakers.com. We are excited to see how this platform will help aspiring speakers grow and thrive in the technology community. If you’re interested in becoming a mentor or mentee, head over to MoreSpeakers.com and sign up today!

References

• MoreSpeakers.com
• GitHub Repository
• Bootstrap 5
• ASP.NET Core
• Entity Framework Core
• Aspire
• HTMX
• ASP.NET Core Reimagined with HTMX book
• JetBrains Rider

Technology Used

MoreSpeakers.com is built using a combination of modern web technologies to ensure an user-friendly experience.

Development Stack

Tools and frameworks used in the development of MoreSpeakers.com include.

Tools

• JetBrains Rider: The primary IDE used for development, providing a robust environment for C# and web development.
• Azure Storage Explorer: Used for managing Azure Storage resources.
• GitHub: For version control and collaboration among the development team.
• Microsoft Azure: Hosting and deployment of the application.
• Aspire: Used for to help manage dependencies and ensure an easier on boarding for new engineers.

Frameworks and Libraries

• Frontend
  • The frontend is built using Bootstrap 5 for responsive design and a clean user interface.
  • HTMX is used to enhance interactivity and provide a seamless user experience without the need for heavy JavaScript frameworks.
• Backend
  • The backend is developed using ASP.NET Core, providing a robust and scalable foundation for the application.
  • Entity Framework Core is used for data access and management, allowing for efficient interaction with the database.
  • SQL Server serves as the primary database for storing user profiles, mentorship requests, and other application data.

You can read more about the architecture and developer start up of MoreSpeakers.com in the GitHub repository.

AI and Vibe Coding

AI and “Vibe Coding” is all the rage these days. As I mentioned in the previous post, this project was prototyped with Claude Code. Now while the application compiled and ran, it was a mess. It took some time to get the project in a maintainable state.

Since then, we have continued to use AI tools to help with various aspects of the development process. I primarily used JetBrains Junie to help me with code generation, unit test creation, refactoring, and documentation. We’ve also used GitHub Copilot to help with code reviews of pull requests. We’ve used ChatGPT to help with the hero images and generating a lists of features to include in the platform. While AI has been a helpful tool throughout the development process, it is important to note that you still need skilled developers to “double-check” the work guide the process and ensure the quality of the final product.

AI Instructions

We used the following instructions when using AI tools to help with the development of MoreSpeakers.com.

Claude Code Instructions

Claude Code allows you to create custom instructions to guide Claude in generating code and assisting with development tasks.

Our instructions are organized into two main categories: Commands and Skills. For overall instructions for Claude Code, we have:

• Claude.md: Instructions for using Claude to generate code snippets and assist with development tasks.

Claude Code Commands

• Claude Commands: A collection of custom commands to streamline the use of Claude in the development process.
  • db-change.md: Instructions for making database schema changes using Claude.
  • docs.md: Instructions for generating documentation using Claude.
  • feature.md: Instructions for adding new features using Claude.
  • test.md: Instructions for creating and running tests using Claude.

Claude Code Skills

• Claude Skills: A set of predefined skills to enhance the capabilities of Claude in the development process.
  • dotnet-feature: A skill for generating .NET features using Claude.
  • qa-engineer: A skill for performing quality assurance tasks using Claude.
  • sql-schema: A skill for managing SQL schemas using Claude.

GitHub Copilot Instructions

GitHub Copilot allows you to create customize how GitHub Copilot responds to your prompts by creating custom instructions.

According to the documentation, you can create custom instructions to guide GitHub Copilot’s responses.

GitHub Copilot can provide responses that are tailored to your personal preferences, the way your team works, the tools you use, or the specifics of your project, if you provide it with enough context to do so. Instead of repeatedly adding this contextual detail to your prompts, you can create custom instructions that automatically add this information for you. The additional information is not displayed, but is available to Copilot to allow it to generate higher quality responses.

We build a couple of task based agents/instructions to help with various development tasks. Here are the instructions we used for MoreSpeakers.com:

GitHub Agents

• Agents.md: Instructions for using GitHub Copilot Agents to automate development tasks.
• api-agent.md: An agent for managing API-related tasks using GitHub Copilot.
• dev-deploy-agent.md: An agent for handling development and deployment tasks using GitHub Copilot.
• docs-agent.md: An agent for managing documentation tasks using GitHub Copilot.
• lint-agent.md: An agent for performing linting tasks using GitHub Copilot.
• test-agent.md: An agent for managing testing tasks using GitHub Copilot.

JetBrains Junie Instructions

JetBrains Junie allows you to create custom instructions to guide Junie in generating code and assisting with development tasks. Instructions for customizing Junie can be found in the documentation.

Our instructions for Junie are documented in the file guidelines.md.

Want to Contribute?

If you want to help out with the project, the repository is available on GitHub. Find a bug, submit an issue and/or a pull request. We are open to contributions, whether it’s fixing bugs, adding new features, or improving documentation.

Wrap Up

As you can see, MoreSpeakers.com is built using a combination of modern web technologies and AI tools to provide a seamless user experience. The development process has been greatly enhanced by the use of AI, allowing us to focus on building a platform that truly meets the needs of aspiring speakers and experienced mentors in the technology community.

References

• MoreSpeakers.com
• GitHub Repository
• Bootstrap 5
• ASP.NET Core
• Entity Framework Core
• Aspire
• HTMX
• ASP.NET Core Reimagined with HTMX book
• JetBrains Rider
• Claude Code
• GitHub Copilot
• JetBrains Junie
• ChatGPT

What is Open Graph?

The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook. By using Open Graph tags, you can control how your web pages are represented when shared on social media platforms, like Facebook, BlueSky, LinkedIn, etc.

To turn a web page into a rich object, you need to add specific Open Graph meta tags to the HTML of your page. These tags provide information about the page, such as its title (og:title), type (og:type), image (og:image), and description (og:description). The most relevant tag for this post is the og:image tag, which specifies the image that will be displayed when the page is shared.

I won’t go into detail about how to add Open Graph tags to your web pages, but if you’re interested, you can check out the Open Graph protocol specification for more information.

Generating Open Graph Images with C#

To generate images in C#, I used the SixLabors ImageSharp library. ImageSharp is a powerful and flexible library for image processing in .NET. It supports a wide range of image formats and provides a rich set of features for manipulating images. I also needed to use the SixLabors Fonts to generate the text for the images.

For an Open Graph profile image to look correct on social media platforms, it needs to be 1200 pixels wide by 630 pixels tall. This aspect ratio ensures that the image displays properly across various platforms without being cropped or distorted. Let’s take a look at a sample image generated for a MoreSpeakers profile:

Breaking Down the Image

As you can see from the sample image above, there are several key components that make up the Open Graph profile image:

• Speaker Image: This takes up the left side of the image and is half the width of the image (600 pixels wide by 630 pixels tall).
• Background: The right side of the image has a gradient background that matches the MoreSpeakers branding. The gradient goes from orange-red (#E95420) to a warm yellow (#F7C873).
• The MoreSpeakers Logo: The MoreSpeakers logo is placed at the top center of the image.
• The Text
  • “MoreSpeakers.com”: Below the logo, the text “MoreSpeakers.com” is displayed in a bold font.
  • “Speaker Profile”: Below “MoreSpeakers.com”, the text “Speaker Profile” is displayed in a regular font.
  • Speaker Name: Below “Speaker Profile”, the speaker’s name is displayed in a large, bold font.

Now, the code to generate this is broken out similarly to the breakdown above. Let’s go through each part of the code.

The Images

First we start with creating a canvas to draw on:

1
using var image = new Image<Rgba32>(1200, 630);

The Gradient Background

Next, we need to create a LinearGradientBrush to create the gradient background:

1
2
3
4
5
6
7
8
9
var gradientBrush = new LinearGradientBrush(
    new PointF(0, 0),
    new PointF(1200, 630),
    GradientRepetitionMode.None,
    new[]
    {
        new ColorStop(0f, Color.ParseHex("#E95420")), // orange-red
        new ColorStop(1f, Color.ParseHex("#F7C873")) // warm yellow
    });

Now we can fill the image with the gradient:

1
canvas.Mutate(ctx => ctx.Fill(gradientBrush));

The Speaker Image

Since the speaker image can come in various sizes and aspect ratios, we need to resize and crop it to fit perfectly into the left half of the Open Graph image. Here’s how we can do that:

1
2
3
4
5
speakerImage.Mutate(x => x.Resize(new ResizeOptions
{
    Size = new Size(1200 / 2, 630),
    Mode = ResizeMode.Crop
}));

NOTE: The speakerImage variable represents a SixLabors.ImageSharp.Image object that contains the speaker’s image. This image could be loaded from a file, URL, or stream.

Mutate is the method used to change the image, and ResizeOptions allows us to specify the size and mode. We set the size to half the width of the Open Graph image (600 pixels) and the full height (630 pixels). The ResizeMode.Crop option ensures that the image fills the entire area without distortion, cropping any excess parts as necessary.

Now we can draw the speaker image onto the left side of the canvas:

1
canvas.Mutate(ctx => ctx.DrawImage(speakerImage, new Point(0, 0), 1f));

The MoreSpeakers Logo

Next, we need to load the MoreSpeakers logo and draw it onto the canvas. Assuming we have the logo image loaded into a variable called logoImage, we can position it at the top center of the right half of the Open Graph image:

1
2
3
4
5
6
var logoWidth = 110;
var logoHeight = 110;
logoImage.Mutate(x => x.Resize(logoWidth, logoHeight));

// Paste the logo in the center of the width of the gradient background
canvas.Mutate(ctx => ctx.DrawImage(logoImage, new Point((width / 2 / 2 - logoWidth / 2) + width / 2, 40), 1f));

That’s the images taken care of. Now let’s move on to the text.

The Text

This is where we use the SixLabors Fonts library to load fonts and draw text onto the image. You work with a font via a FontFamily. You can load a font front from the system or from a file. Assuming the font you want to use is installed on the system, you can load it like this:

1
2
3
var fontCollection = new FontCollection();
fontCollection.AddSystemFonts();
var fontFamily = fontCollection.Get("Open Sans");

Now that we have the font family, we can create different Font instances for each text element with varying sizes and styles:

1
2
3
var brandFont = fontFamily.CreateFont(58, FontStyle.Bold);
var labelFont = fontFamily.CreateFont(40, FontStyle.Regular);
var nameFont = fontFamily.CreateFont(48, FontStyle.Bold);

Here, we create three fonts: one for the brand text (“MoreSpeakers.com”), one for the label text (“Speaker Profile”), and one for the speaker’s name.

Now you can draw the text onto the canvas. For each text element, you need to specify the position where it should be drawn. I created a couple of variables to help with positioning:

1
2
3
4
float textLeft = (float)1200 / 2 + 40;
float brandTop = 200;
float labelTop = brandTop + 70;
float nameTop = labelTop + 90;

Now let’s draw each text element:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
canvas.Mutate(ctx =>
{
    // MoreSpeakers
    ctx.DrawText(new RichTextOptions(brandFont)
    {
        Origin = new PointF(textLeft, brandTop),
        HorizontalAlignment = HorizontalAlignment.Left
    }, "MoreSpeakers.com", Color.White);

    // Speaker Profile
    ctx.DrawText(new RichTextOptions(labelFont)
    {
        Origin = new PointF(textLeft, labelTop),
        HorizontalAlignment = HorizontalAlignment.Left
    }, "Speaker Profile", Color.White);

    // Speaker Name (dynamic)
    ctx.DrawText(new RichTextOptions(nameFont)
    {
        Origin = new PointF(textLeft, nameTop),
        HorizontalAlignment = HorizontalAlignment.Left,
        WrappingLength = (float) width / 2 - 80
    }, speakerName, Color.White);
});

On the canvas, we use the DrawText method to draw each text element. We specify the font, position, and color for each text. The RichTextOptions allows us to set additional options like horizontal alignment and wrapping length. There are more options available in the ImageSharp Fonts documentation.

The final step: Saving the Image

After drawing all the images and text onto the canvas, the final step is to save the generated Open Graph profile image to a file. You can do this using the Save method provided by ImageSharp. Here’s how you can save the image as a PNG file:

1
canvas.Save("og-profile-image.png");

There are several other image formats you can save to, such as JPEG, BMP, and GIF. You can specify the format by using the appropriate encoder when saving the image. Look at the ImageSharp Formats Extensions source code for more details on saving images in different formats.

The Sample Project

I built a sample solution with C#10 called OpenGraphProfileImageGenerator, which is available at this GitHub repository. The solution has 3 projects in it:

• OpenGraphProfileImageGenerator.Manager: Contains the core logic for generating the Open Graph profile image.
• OpenGraphProfileImageGenerator.Manager: Contains unit tests for the Manager project.
• OpenGraphProfileImageGenerator.ConsoleApp: This is the main project that contains the code to generate the Open Graph profile image.

The console app will allow you to generate the sample image shown above. The Manager project has a lot of helper methods to make it easier to generate the image. You can clone the repository and run the console app to see how it works.

If you want to modify image or play around with it, all of the generation code that I walked through above is in the OpenGraphImageGenerator class in the Manager project. Look for the GenerateSpeakerProfile method with the following signature:

1
2
3
public Image GenerateSpeakerProfile(Image speakerImage, Image logoImage, string speakerName,
    FontFamily fontFamily,
    int width = DefaultOpenGraphWidth, int height = DefaultOpenGraphHeight)

Wrap Up

In this post, I walked you through how I used C# and the SixLabors ImageSharp library to generate dynamic Open Graph profile images for the MoreSpeakers platform. By leveraging the power of C# and ImageSharp, I was able to create visually appealing images that enhance the sharing experience on social media platforms.

References

• OpenGraphProfileImageGenerator repository
• Open Graph protocol specification
• SixLabors ImageSharp documentation
• MoreSpeakers website
• MoreSpeakers GitHub repository

I started using JetBrains Rider because I used both a Windows PC and a Mac PC and I wanted a consistent experience between the both. JetBrains Rider provided that and now I am hooked.

I thought I’d take some time to blog about the plugins I use to help with my day-to-day coding (mostly in Microsoft .NET and Azure), presenting (public speaking), and blogging (using Jekyll).

All of these plugins can be downloaded from either the JetBrains plugin Marketplace or directly in the IDE.

This is an updated post from a previous post I wrote in June 2022 and July 2024.

So here is the list.

General Development

AI Tools

Microsoft Specific Development

Azure Specific Development

Presenting

Writing

I know longer have anything in this category since I use GitHub Copilot and JetBrains AI Assistant.

No longer in the list

Wrap Up

You’ll also notice that a lot of the plugins I used to use are now built into the IDE.

Do you have a favorite not listed? Let me know.

What is the Aspire Dashboard?

The Aspire Dashboard is a web-based interface that allows developers to monitor and manage their .NET projects. It provides a comprehensive overview of your projects, including their status, dependencies, and performance metrics. The dashboard is designed to help you quickly identify issues and optimize your development workflow.

The dashboard is available once you start the AppHost project in your solution. For this post, we will use the sample project from the Simplify Your .NET Development with Aspire post which is available on GitHub

Once we start the AppHost project, Aspire will launch the Aspire dashboard in the browser as well as other projects that are part of the solution. In this case, the Contacts.Api and Contacts.Web projects will be launched. The Aspire dashboard should look similar to the following image:

Exploring the Dashboard

The Aspire Dashboard is divided into several sections, each providing different pieces of information about your projects:

• 1 - Title Bar: Displays the name of the project. This currently is the name of the AppHost project, less the .AppHost suffix. In this case, it is Contacts.
• 2 - Settings & More: This section provides access to dashboard settings and more options.
• 3 - Menu: Contains links to various sections of the dashboard, such as resources, dependencies, and performance metrics.

Let’s explore each section in more detail.

1. Title Bar

The title bar displays the name of the project. This is useful for quickly identifying which project you are currently viewing in the dashboard. Not much more to say about this section.

2. Settings & More

This section provides access to various settings and options for the dashboard.

The GitHub icon (#1) allows you to view the source code for Aspire on GitHub.

The Help icon (#2) provides a list of the available keyboard shortcuts for navigating the dashboard. This is useful for power users who prefer to use keyboard shortcuts instead of the mouse. It also provides a link to the Aspire documentation. Not that you will need it after this post. :smile:

The GitHub Copilot icon (#3) starts up a GitHub Copilot chat session that lets you diagnose issues with your application. Summarize the application and it’s dependencies, and ask questions about the application. This is a great way to get help with your project without leaving the dashboard. Unfortunately, this feature requires that you have a GitHub Copilot subscription, as well as start the application from Visual Studio 14.14 or later or VS Code with the C# Dev Kit 1.19.63 or later.

The Settings icon (#4) allows you to configure various settings for the dashboard, such as theme and language. You can also delete all of the local telemetry that has been gathered through Aspire.

3. Menu

The menu section contains links to various sections of the dashboard. This is probably the most important section of the dashboard, as it provides access to all of the features and functionality of Aspire. You’ll spend a lot of time clicking around in this section or using the keyboard shortcuts to navigate.

The “menu” section contains links to the following sections:

• Resources: This section provides an overview of the resources used by your project, such as databases, APIs, and other external dependencies.
• Console: This section allows you to view the console logs for different resources in your project.
• Structured: This section allows you to view structured logs for your project, if you have a structured logging provider configured in your project, such as Serilog.
• Traces: This section allows you to view traces for your project, which correlate log events that are part of the same logical activity, even if they’re spread across multiple machines or processes.
• Metrics: This section allows you to view performance and health metrics for your project, such as response times, error rates, and other key performance indicators.

Let’s dig more into this menu.

Resources

The Resources section provides an overview of the resources/dependencies used by your project. You can think of this as a list of all of the “things” that make up your project, such as databases, APIs, web services, and other external dependencies.

This section is broken down into two parts, or views: the Table view and the Graph view.

Table View

The Table view displays a list of all the resources used by your project in a tabular format. This view is useful for quickly identifying the resources and their status. You can also filter the resources by type, status, and other criteria, start/stop the resource, and view the details of each resource.

Filtering Resources

In the filter text box, upper right hand corner, you can filter the resources by name. For example, if you type “sql” in the filter text box, the table will only show resources that contain “sql” in their name. The button to the right of the filter allows you to filter by resource type, such as SQL Server, Redis, or RabbitMQ. This is useful for quickly finding the resources you are interested in. The second button to the right of the filter allows for to customize what is visible to the current view, like the resource type or child dependencies.

Resource Details

The resource table displays the following information for each resource:

• Name: The name of the resource. This is the name of the resource as you defined it in your project. The name column can also contain child resources. In this example, the AzureStorage resource has a child resource cwjgcontacts which is a storage name in the Azure Storage account, which has two child resources, contact-images and contact-images-thumbnails, which are the containers in the Azure Storage account.
• State: The current state of the resource.
  • This can be Running, Unhealthy, Error, or Stopped.
    • Running means the resource is up and running.
    • Unhealthy generally means the resource is starting up, but not yet ready to accept requests.
    • Error means there was an issue starting the resource.
    • Stopped means the resource is not running.
• Start Time: The time the resource was started.
• Source: The source of the resource, such as a Docker image, a local project file, or something else.
• URLs: The URL(s) associated with the resource. You can click on the URL to open up the resource, like a web service or API, in a new tab in your browser.
• Actions: The actions you can take on the resource, such as starting or stopping the resource. You can also view the details of the resource by clicking on the “View Details” link.

Actions

The actions column provides quick access to common actions that you can take on the resource. You can start or stop the resource, view the details of the resource, or view the logs for the resource.

The stop icon will stop the resource. The console logs icon will open the console logs for the resource in a new tab in your browser. The ellipsis icon will open the details for the resource in a new tab in your browser. Clicking on the ellipsis icon will bring up the actions menu. The actions menu will vary depending on the type of resource, but generally includes options to view the details of the resource, view the console logs, Ask GitHub Copilot, start, and stop the resource.

View Details

The View Details option will give you more information about the resource, such as the configuration, environment variables, and other details. In the screen shot below, you can see some of the details for the Contacts.Web resource.

Here you will find the following information:

• Resource Information: The name, type, state of the resource, and more.
• URLs: The URLs associated with the resource. You can click on the URL to open up the resource in a new tab in your browser.
• References: The references to other resources that this resource depends on. This is useful for understanding the relationships between resources in your project.

Not shown in the screen shot above, but you can also view the back reference, health checks, and environment variables for the resource. The back reference shows you which resources depend on this resource, while the health checks show you the health of the resource. The environment variables show you the environment variables that are set for the resource.

Again, the information displayed will vary depending on the type of resource. For example, a SQL Server resource will have different information than a Redis resource.

Graph View

The Graph view displays the resources in a graphical format, showing the relationships between the resources. This view is useful for understanding the dependencies between resources and how they interact with each other.

The status of the resource can be identified by the icon in the upper right hand corner of the resource node. Hovering over the resource will show you which way the dependency flows, such as Inbound or Outbound. Clicking on the resource will show you the details of the resource in a side panel, similar to the clicking the ellipsis and selecting View Details in the Table view.

Console

In the Console section, you can view the console logs for different resources in your project.

In the screen shot above, you can see the console logs for the SQL Server resource. In the top part of this section, you can select the resource you want to view the logs for. You can also pause the logs, or delete the logs for this resource or any of the resources in you project. You also can perform different actions on the resource, such as starting or stopping the resource, or viewing the details of the resource.

In the upper right hand corner, to the right of the Watching logs… text, you can click on the “Console Log Settings” icon to either download the logs or show the timestamps for each log entry.

Structured

In the Structured section, you can view structured logs for your project. This only works if you have a structured logging provider configured in your project, such as Serilog. This section provides a way to view the structured logs in a more readable format.

This project does not have a structured logging provider. The screen shot below is from a different project that has Serilog configured.

Similar to the Console section, you can select the resource you want to view the logs for, pause the logs, or delete the logs for this resource or any of the resources in your project. You can also perform different actions on the resource, such as starting or stopping the resource, or viewing the details of the resource. However, since this is structured logging, you can also filter the logs by level, such as Information, Warning, Error, or Critical. You can also search for specific text in the logs.

You will see that there are several columns in the structured log view:

• Resource: The name of the resource that generated the log entry.
• Level: The level of the log entry, such as Information, Warning, Error, or Critical.
• Message: The message of the log entry.
• Timestamp: The timestamp of the log entry.
• Trace: The trace ID associated with the log entry. This is useful for correlating logs across different resources in your project.
• Actions: The actions you can take on the log entry, such as viewing the details of the resource or copying the log entry to the clipboard.

The actions ellipsis icon will open the actions menu, you can:

• View Details: which allows you to view the details of the message, it provides more details about the log entry, very similar to the Application Insights interface on the Azure portal.
• Log Message: which allows you to copy the log message to the clipboard or view the log message in different formats, such as JSON or XML.
• Ask GitHub Copilot: which allows you to ask GitHub Copilot about the log entry.

Traces

Traces correlate log events that are part of the same logical activity (e.g. the handling of a single request), even if they’re spread across multiple machines or processes.

In this section, you can view the traces for your project. This is useful for understanding the flow of requests through your application and how they interact with different resources. You can filter the traces by resource, status, and other criteria.

Here you will see that Aspire captured six traces for the Contacts.Web resource and are grouped by a common trace ID. The trace ID is a unique identifier for the trace, and it is not shown in the screen shot above. In this view, you can see the following information:

• Timestamp: When the first log entry was captured for the trace.
• Name: The name of the trace, which is the name of the resource and an action that generated the trace.
• Spans: All of the the different resources, and their count of log entries, that were part of the trace.
• Duration: The total duration of the trace, which is the time between the first and last log entry in the trace.
• Actions: The actions you can take on the trace, such as viewing the details of the trace or copying

For the actions, you can click on the ellipsis icon to view the actions menu. The actions menu will allow you to:

• View Details: which allows you to view the details of the trace, including the log entries that are part of the trace.
• Structured Log: which allows you to view the structured logs for the trace.
• Ask GitHub Copilot: which allows you to ask GitHub Copilot about the trace.

If you click on one of the traces, you will see the details of the trace.

In this view, you will see details about the trace, such as the trace ID, the timestamp, the duration, and the spans that are part of the trace. You can also see the log entries that are part of the trace, which are ordered in the order they happened.

In the screen shot above, you can see that the trace is made up of three spans, which are the Contacts.Web, the initiator of the trace, a PUT call to Azure Storage, and then a GET call to the Contacts.Api resources. This is useful for understanding the flow of requests through your application and how they interact with different resources as well as the time it took to complete each portion of the flow.

Metrics

Metrics expose the performance and health characteristics of an app as simple numerical values. As a result, they have low performance overhead and many services configure them as always-on telemetry. This also makes them suitable for triggering alerts when potential problems are detected.

In this section, you can view the metrics for your project. You can filter the metrics by resource and the time duration. Example: the last minute, last five minutes, last hour, or last 12 hours. You can also view the metrics in a graphical format, which is useful for understanding the performance and health of your application.

On the left side of the screen, you can see the list of metrics that are available for your project. You can select the metric you want to view, grouped by the metric collector, such as Microsoft.AspNetCore.Hosting, Microsoft.AspNetCore.Routing, and others. The right side of the screen shows the graph or table for the selected metric. Depending on the metric chosen, you can several data points, such as the number of requests, the response time, and the number of errors. There are also several filters available to help you narrow down the metrics you want to view.

In the screen shot above we are looking at the Microsoft.AspNetCore.Hosting - http.server.active_requests metric, which shows the number of active requests being processed by the Contacts.Web resource. When the screen shot was taken, there were no active requests being processed, so the graph is empty. If there were active requests, you would see a line graph showing the number of active requests over time. The screen shot also lists different filters that are available for this metrics, such as http.request.method and url.scheme. These filters are going to vary based on the metric you are viewing. You can use these filters to narrow down the metrics you want to view.

Wrap Up

The Aspire Dashboard is a powerful tool that provides insights into your .NET projects. It allows you to monitor and manage your resources, dependencies, and performance metrics in a single interface. The dashboard is designed to help you quickly identify issues and optimize your development workflow.

References

• .NET Aspire Documentation
• YouTube - AspiriFridays (Joe Guadagno’s Broadcast site)
• Simplify Your .NET Development with Aspire

According to the official documentation, .NET Aspire provides tools, templates, and packages to help you build observable, production-ready apps. Delivered through NuGet packages, .NET Aspire simplifies common challenges in modern app development.

A few weeks ago, I was on AspiriFridays where Damian Edward, David Fowler, Maddy Montaquila and I were adding .NET Aspire to the JosephGuadagno.NET Broadcasting application. Let’s take a look at how Aspire can help you streamline your .NET development process.

Note: This blog post was updated on August 2nd to reflect Aspire version 9.4.0

Getting Started with Aspire

To get started with Aspire, you need a few prerequisites:

• .NET SDK (version 8.0 or later)
• An OCI compliant container runtime, such as:
  • Docker (for containerization) or
  • Podman (if you prefer)
• An IDE or code editor of your choice, such as:
  • Visual Studio version 17.9 or later
  • Visual Studio Code
  • JetBrains Rider with the .NET Aspire plugin

Note: .NET Aspire also works with GitHub Codespaces or Dev Containers.

If you want to use the Aspire project templates, you can install them with the following command:

1
dotnet new install Aspire.ProjectTemplates --force

Note: These get updated frequently, so you may want to run this command periodically to ensure you have the latest templates.

I recommend installing the Aspire CLI tool, which provides a set of commands to help you manage your Aspire projects. You can install the CLI tool by running the following command:

1
dotnet tool install -g Aspire.Cli --prerelease

Now we are ready to Aspire-ify our project!

The Project

I have a sample project that I use for presentations and demos. It’s a simple ASP.NET Core web application that allows users to add, edit, delete, and list contacts. The project was designed to be a straightforward example of how to build a web application using .NET technologies, and it serves as a great starting point for learning .NET.

The project is built using .NET 9 and leverages various technologies such as:

• ASP.NET Core for the web application
• Entity Framework Core for data access
• An assortment of Azure cloud services

You can find the project contacts-noauth on GitHub. If you want to follow along, you can clone the repository and open it in your preferred IDE or code editor.

1
git clone https://github.com/jguadagno/contacts-noauth.git

Adding Aspire to the Project

Aspire project templates are designed to help you quickly set up a new project with the necessary dependencies and configurations for building .NET applications. They provide a starting point for your application, allowing you to focus on building features rather than wrestling with setup and environment issues. There are two projects that are created when you add Aspire to your solution:

• App Host: This project serves as the entry point for your Aspire application. It contains the AppHost.cs file, which is where you configure your application and its services.
• Service Defaults: This project sets up the default services for your Aspire application, such as telemetry, logging, health checks, and more. It contains the Extensions.cs file that sets up these services.

Depending on the IDE you are using, you can add Aspire to your project in different ways. Here are the steps for Visual Studio, Visual Studio Code, and JetBrains Rider.

Visual Studio

Visual Studio provides a straightforward way to add Aspire to your project using the built-in project templates and in my opinion, is the easiest way to get started with Aspire.

In Visual Studio, in the Solution Explorer, right-click on the Contacts.Api project and select “Add” > “.NET Aspire Orchestration Support”. This will open the “Add .NET Aspire Orchestration Support” dialog.

The defaults are fine, so you can click “Add” to create the Aspire project. This will create two new projects in your solution called Contacts.AppHost and Contacts.ServiceDefaults then add the necessary references to the Contacts.Api project.

Once the projects are created, you will see them in the Solution Explorer. The Contacts.AppHost project contains the AppHost.cs file, which is where you configure your application and its services. The Contacts.ServiceDefaults project contains the Extensions.cs file, which sets up the default services for your Aspire application. Visual Studio also adds two new run configurations to the solution, one for HTTP and one for HTTPS. You can use these configurations to run your Aspire application. In addition, Visual Studio will display the Aspire welcome page which provides an overview of the Aspire projects and how to use them.

Visual Studio Code

With the solution open in Visual Studio Code, you can add Aspire to the project by opening the terminal and running the following command:

1
dotnet new aspire-host -o Contacts.AppHost

Then add the app host project to the solution:

1
dotnet sln add .\Contacts.sln add .\Contacts.AppHost\Contacts.AppHost.csproj

Now, let’s add the Service Defaults project to the solution. In the terminal, run the following command:

1
dotnet new aspire-servicedefaults -o Contacts.ServiceDefaults

Then add the service defaults project to the solution:

1
dotnet sln add .\Contacts.sln add .\Contacts.ServiceDefaults\Contacts.ServiceDefaults.csproj

You’ll need to add the Contacts.ServiceDefaults project reference to both the Contacts.Api and the Contacts.WebUi projects. You can do this by running the following commands in the terminal:

1
2
dotnet add .\Contacts.Api\Contacts.Api.csproj reference .\Contacts.ServiceDefaults\Contacts.ServiceDefaults.csproj
dotnet add .\Contacts.WebUi\Contacts.WebUi.csproj reference .\Contacts.ServiceDefaults\Contacts.ServiceDefaults.csproj

Now we should have the Aspire projects added to the solution. You can verify this by opening the Solution Explorer in Visual Studio Code and checking that the Contacts.AppHost and Contacts.ServiceDefaults projects are listed. If so, we are ready to run the application.

JetBrains Rider

With the solution open in JetBrains Rider, you can add Aspire to the project by right-clicking on the solution in the Solution Explorer and selecting “Add” > “New Project…”. This will open the “New Project” dialog.

• Select Aspire from the project templates on the left side.
• Enter a name for the project, such as Contacts.AppHost.
• Select the type of App Host.
• Click “Create” to create the project.

This will create the first part of what “Aspirify” your project. You will see a new project in the Solution Explorer with the name you specified.

Now, we need to add the Service Default project to the solution.

Right-click on the solution in the Solution Explorer and select “Add” > “New Project…”. This will open the “New Project” dialog.

• Select Aspire from the project templates on the left side.
• Enter a name for the project, such as Contacts.ServiceDefaults.
• Select the type of Service Defaults.
• Click “Create” to create the project.

Now you will see a new project in the Solution Explorer with the name you specified. In that project, you will find a Extensions.cs file, which is where Aspire configures some of the default services.

You’ll also notice, that the Aspire templates added two new configuration files to the solution:

• Contacts.AppHost: http
• Contacts.AppHost: https

You’ll use one of these configurations to run your Aspire application. The http configuration is for running the application without HTTPS, while the https configuration is for running the application with HTTPS.

Adding Resources (Projects)

Now that we have the Aspire projects added to the solution, we can start adding the resources of our application. In this case, we will add support for loading the web application, API, and database components.

Note: The rest of this post will walk you through adding the components to the project. For this, it doesn’t matter which IDE you are using, as the steps are the same across Visual Studio, Visual Studio Code, and JetBrains Rider.

All of this is done by adding the components to the AppHost.cs file in the Contacts.AppHost project. You can think of this a sort of like a Startup.cs or Program.cs file in a traditional ASP.NET Core application. This is where compose the pieces of your application together and establish any dependencies between them.

Let’s get started by opening the AppHost.cs file in the Contacts.AppHost project.

Adding the Web Api Project

Depending on which IDE you are using, you will see a slightly different version of the AppHost.cs file. If you are using Visual Studio, and you added the Aspire projects using the “Add .NET Aspire Orchestration Support” option, you will see a basic AppHost.cs file that looks like this:

1
2
3
4
5
var builder = DistributedApplication.CreateBuilder(args);

builder.AddProject<Projects.Contacts_Api>("contacts-api");

builder.Build().Run();

If you are using Visual Studio Code or JetBrains Rider, you will see a more generic AppHost.cs file that looks like this:

1
2
3
var builder = DistributedApplication.CreateBuilder(args);

builder.Build().Run();

This is the only difference between the two versions of the AppHost.cs file. The Visual Studio version has a line that adds the Contacts.Api project and reference to the application, while the Visual Studio Code and JetBrains Rider versions do not.

Let’s explain what happened here. The DistributedApplication.CreateBuilder(args), line 1, method creates a new DistributedApplicationBuilder instance, which is used to configure the application. The AddProject<Projects.Contacts_Api>("contacts-api") method, line 3, adds the Contacts.Api project to the application, with the name of contacts-api, allowing it to be run as part of the Aspire application. Then the builder.Build().Run() method, line 5, builds the application and runs it.

If you are using Visual Studio Code or JetBrains Rider, you will need to add the Contacts.Api project as a reference to the Contacts.Api project, then, add the project the Aspire app. You can do this by adding the following line to the AppHost.cs file:

1
builder.AddProject<Projects.Contacts_Api>("contacts-api");

Note: The name field, in this case, contacts-api, is used to identify the project in the Aspire application. You can use any name you like, but it is recommended to use a name that is descriptive and unique within your application.

At this point, you should have the Contacts.Api project added to the Aspirified application. You can verify this by running the application using the http or https run configuration in Visual Studio or Contacts.AppHost: http(s) in Rider.

Note: If you are running this sample project with aspire version 9.3.1-preview.1.25305.6, there is a bug that prevents the application from running. You can fix this by moving builder.AddServiceDefaults(); to just after the var builder = WebApplication.CreateBuilder(args); in the Contacts.Api Program.cs file, line 20. Then delete the builder.MapDefaultEndpoints(); in the Program.cs file, and add the following line just after the var app = builder.Build();, around line 28.

The try portion of the Program.cs file should look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
try
{
    var builder = WebApplication.CreateBuilder(args);
    builder.AddServiceDefaults();

    builder.Logging.ClearProviders();
    builder.Host.UseNLog();
    
    ConfigureServices(builder.Services);

    var app = builder.Build();

    app.MapDefaultEndpoints();

    if (builder.Environment.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    ConfigureMiddleware(app);
    app.Run();
}

As of the time of this post, it is an issue that I submitted to the Aspire team.

You should be able to run the application now, and the Aspire dashboard should be accessible at a URL like https://localhost:17004 or http://localhost:15122.

Note: The port numbers may vary depending on your configuration, so check the run configuration in Visual Studio or Rider to see the exact URL.

Upon a successful run, you should see the Aspire dashboard, which provides an overview of the application and its components. The dashboard will show the contacts-api project as a running service.

Dashboard Overview

The Aspire dashboard provides a comprehensive overview of your application, including:

1. List of running services
2. Console output from the application
3. Structured logging information
4. Tracing information
5. Metrics and health checks

We’ll explore the dashboard in more detail in a future post, but for now, you can see that the contacts-api project is running and accessible. If you click on the URLs link in the dashboard, the Api will open in a new tab, and you can see the Swagger UI for the API.

Adding the Sql Server Project

Now that we have the Contacts.Api project added to the Aspire application, let’s “tell” Aspire about the SQL Server database that the API will use.

Back to the AppHost.cs file in the Contacts.AppHost project. We will add the following line to the builder after the AddProject line for the Contacts.Api project:

1
2
var sql = builder.AddSqlServer("SqlServer")   
    .WithLifetime(ContainerLifetime.Persistent);

This line adds the SQL Server database to the Aspire application, with the name SqlServer. The WithLifetime(ContainerLifetime.Persistent) method specifies that the database should be persistent, meaning it will not recreate the database every time the application is run. This is useful for development and testing purposes, as it allows you to keep the data in the database between runs.

You may see the red squiggly line under the AddSqlServer method, indicating that the method is not recognized. This is because you need to add a reference to the Aspire.Hosting.SqlServer package in your project. You can do this by running the following command in the terminal:

1
dotnet add package Aspire.Hosting.SqlServer

Or add it through the NuGet Package Manager in Visual Studio or Rider.

Now, you should be able to run the application again, and the Aspire dashboard should show the SqlServer project as a running service. The first time you run the application, it will take a few moments build the container image for the SQL Server database, so be patient. Once the image is built, the application will start, and you should see the SqlServer project in the Aspire dashboard. However, we are not done yet. The database will be empty. So we are going to need to add a schema to it, and optionally, some seed data.

Run, the project again. Make sure you have Docker or Podman running, and the SQL Server container will be created.

Depending on how quick you are at the looking at the Aspire dashboard, you may see the SqlServer as unhealthy, that is because the container/server is still being built. Once the container is built, the SqlServer project will be marked as healthy and you can start using it.

If you are using Sqlite as your database, you can add the following line to the AppHost.cs file instead:

1
var sqlite = builder.AddSqlite("Sqlite");

This will require the CommunityToolkit.Aspire.Hosting.Sqlite package, which you can add by running the following command in the terminal:

1
dotnet add package CommunityToolkit.Aspire.Hosting.Sqlite

If you are using Sql Server, wait until the SqlServer project is marked as healthy in the Aspire dashboard before you continue. If you are using Sqlite, you can continue without waiting for the database to be created.

Stop the project if it is still running, and let’s add the database schema to the project.

Create the Database Schema

To create the database schema for this sample, we add some code to the AppHost.cs file in the Contacts.AppHost project that will run the database creation scripts that are part of this project.

Note: Having scripts to create the database schema not only is a best practice, but it also allows other developers to easily set up the database schema in their local development environment and not need a central “development” database server.

If you cloned this repository to follow along, you will find the database creation scripts in the db-scripts folder in the root of the project. There is a folder for each database type, such as sqlserver and sqlite. Each folder contains two files create-data.sql and create-tables.sql. The create-data.sql file contains the SQL commands to insert seed data into the database, while the create-tables.sql file contains the SQL commands to create the database schema. There is also an extra file for the SQL Server database called create-database-and-user.sql, which contains the SQL commands to create the database and user for the SQL Server database.

Back to the AppHost.cs file in the Contacts.AppHost project. We are going to need to create the database based on these scripts. We will add the following code to the AppHost.cs file, just after the var sql line for the database creation:

For SQL Server, add the following code:

1
2
3
4
5
6
7
8
9
10
var path = builder.AppHostDirectory;
var sqlText = string.Concat(
    File.ReadAllText(Path.Combine(path, @"..\..\db-scripts\sqlserver\create-database-and-user.sql")), 
    " ",
    File.ReadAllText(Path.Combine(path, @"..\..\db-scripts\sqlserver\create-tables.sql")),
    " ",    
    File.ReadAllText(Path.Combine(path, @"..\..\db-scripts\sqlserver\create-data.sql")));

var db = sql.AddDatabase("Contacts")
    .WithCreationScript(sqlText);

Note: For the SQL Server database, Aspire will report it unhealthy as the database is not created yet. Once the database is created, it will be marked as healthy.

Note: If you are using your own scripts, make sure that the scripts are in the correct order, and that each script ends with an new line/carriage return or an empty line. This is important as Aspire will execute the scripts in the order they are provided, and if there is no new line at the end of the script, it may not execute correctly.

For Sqlite, add the following code:

1
2
3
4
5
6
7
8
var path = builder.AppHostDirectory;
var sqlText = string.Concat(
    File.ReadAllText(Path.Combine(path, @"..\..\db-scripts\sqlite\create-tables.sql")),
    " ",    
    File.ReadAllText(Path.Combine(path, @"..\..\db-scripts\sqlite\create-data.sql")));

var db = sql.AddDatabase("Contacts")
    .WithCreationScript(sqlText);

Now when you run the application, Aspire will execute the database creation scripts and create the database schema. You can verify that the database was created by checking the Aspire dashboard, where you should see the Contacts database listed under the SqlServer or Sqlite project, depending on which database you are using. At this point, you can even connect to the database using a database management tool to see the database schema and the seed data that was added.

Having the Contacts.Api Use the Aspire Managed Database

Now object/project creation matters. Since the Contacts.Api project depends on the database, we need to make sure that the Contacts.Api project is aware of the database that we just created. We can do this by adding a reference to the database in the AppHost.cs file. This is going to require us to move the AddProject line for the Contacts.Api project to just after the var db line, so that the database is created before the API project is added. The AppHost.cs file should look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var builder = DistributedApplication.CreateBuilder(args);

// Comments out the following 2 lines if you are using Sqlite
var sql = builder.AddSqlServer("SqlServer")   
    .WithLifetime(ContainerLifetime.Persistent);

// Uncomment out is using Sqlite
// var sql = builder.AddSqlite("Sqlite");

var path = builder.AppHostDirectory;
var sqlText = string.Concat(
    File.ReadAllText(Path.Combine(path, @"..\..\db-scripts\sqlserver\create-database-and-user.sql")), 
    " ",
    File.ReadAllText(Path.Combine(path, @"..\..\db-scripts\sqlserver\create-tables.sql")),
    " ",    
    File.ReadAllText(Path.Combine(path, @"..\..\db-scripts\sqlserver\create-data.sql")));

var db = sql.AddDatabase("Contacts")
    .WithCreationScript(sqlText);

builder.AddProject<Projects.Contacts_Api>("contacts-api");

Now we need to update the Contacts.Api configuration to use the Aspire managed database. This is done by chaining a call to the WithEnvironment method on the AddProject method for the Contacts.Api project. This will pass the database connection string to the API project, allowing it to connect to the database.

1
2
3
builder.AddProject<Projects.Contacts_Api>("contacts-api")
    .WithEnvironment("ConnectionStrings__ContactsDatabaseSqlServer", db)
    .WaitFor(db);

or for Sqlite:

1
2
3
builder.AddProject<Projects.Contacts_Api>("contacts-api")
    .WithEnvironment("ConnectionStrings__ContactsDatabaseSqlite", db)
    .WaitFor(db);

Note: Note the double underscore (__) in the environment variable name. This is a convention used by .NET to separate the sections of the configuration key. In this case, it separates the Settings section from the ContactsDatabaseSqlServer or ContactsDatabaseSqlite key. You can see the settings in the appsettings.json file in the Contacts.Api project, where the connection string is defined.

The WaitFor() command tells Aspire to wait for the database to be created before starting the Contacts.Api project. This is important because the API project needs to connect to the database, and if the database is not created yet, it will fail to start.

Run the application again, and you should see that the Contacts.Api project is now marked as healthy in the Aspire dashboard. You can also verify that the API is able to connect to the database by checking the logs in the Aspire dashboard.

Adding the Web App Project

Now that we have the Contacts.Api project added to the Aspire application, let’s add the Contacts.WebUi project. This project is a simple ASP.NET Core web application that allows users to interact with the API.

As you might be able to guess, we will add the Contacts.WebUi project to the AppHost.cs file in the Contacts.AppHost project.

Since the Web UI project depends on the API project, we need to make sure that the API project is created before the Web UI project, then we need to get a reference to it.

Go back to the AppHost.cs file in the Contacts.AppHost project, find the line that adds the Contacts.Api project.

1
2
builder.AddProject<Projects.Contacts_Api>("contacts-api")
    .WithEnvironment("ConnectionStrings__ContactsDatabaseSqlServer", db);

Change this line to add a variable named api to hold the reference to the API project:

1
2
var api = builder.AddProject<Projects.Contacts_Api>("contacts-api")
    .WithEnvironment("ConnectionStrings__ContactsDatabaseSqlServer", db);

Now, we can add the Contacts.WebUi project to the Aspire application. Add the following line after the Contacts.Api project line:

1
builder.AddProject<Projects.Contacts_WebUi>("contacts-web-ui");

However, we need to make sure that the Web UI project is aware of the API project, so we need to add a reference to the API project in the Contacts.WebUi project. We can do this by chaining a call to the WithEnvironment method on the AddProject method for the Contacts.WebUi project.

1
2
3
builder.AddProject<Projects.Contacts_WebUi>("contacts-web-ui")
    .WithReference(api)
    .WaitFor(api);

This makes sure that the ContactsApi project starts before the Contacts.WebUi project, and that the Web UI project is aware of the API project. The WithReference(api) method tells Aspire to pass the API project reference to the Web UI project, allowing it to connect to the API. The WaitFor(api) method tells Aspire to wait for the API project to be created before starting the Web UI project.

Now this Contacts.WebUi project requires a Url to the API’s that Contacts.Api has. There is a setting in the appsettings.json file in the Contacts.WebUi project that specifies the URL of the API. We can set this URL to the URL of the API project using a convention that Aspire provides. Open up the appsettings.Development.json file in the Contacts.WebUi project, and find the ApiRootUrl setting. Then update the value to https://contacts-api. The contacts-api should match whatever name you used when you added Contacts.Api project. The Aspire framework will automatically resolve this to the URL of the API project when the application is run.

Now, when you run the application, Aspire will start the Contacts.WebUi project and pass the URL of the API project to it. You can verify that the Web UI project is able to connect to the API clicking on the Contacts line in the Web Ui project.

However, you may notice that the Web UI project is not able to connect to the API project. This is because the Web UI project is trying to connect to the API project using the URL https://contacts-api, but the Contacts.WebUi project does not know how to “connect” to that end point because we did not wire up some of the Aspire configuration.

Open up the Contacts.WebUi project, and open the Program.cs file. Just after we create the builder variable, we need to add the following line:

1
builder.AddServiceDefaults();

Then after the var app = builder.Build() line and before the app.Run() line, we need to add the following line:

1
app.MapDefaultEndpoints();

The last step is to add a reference to the Contacts.ServiceDefaults project in the Contacts.WebUi project. You can do this by running the following command in the terminal:

1
dotnet add .\Contacts.WebUi\Contacts.WebUi.csproj reference .\Contacts.ServiceDefaults\Contacts.ServiceDefaults.csproj

or by adding the reference through the NuGet Package Manager in Visual Studio or Rider.

Note: If you are using Visual Studio, the AddServiceDefaults and MapDefaultEndpoints methods are added automatically when you add the Aspire projects to the solution. If you are using Visual Studio Code or JetBrains Rider, you need to add these lines manually.

Now, when you run the application again, the Web UI project should be able to connect to the API project, and you should be able to see the contacts in the Web UI.

At this point, everything looks good, and the application is running as expected. You can add, edit, delete, and list contacts using the Web UI, and the API is able to connect to the database. However, we still have one more step to complete before we are done. We need to add support for storing contact images in Azure Blob storage.

Adding Blob Storage to the Application

The application requires Azure Blob storage to store uploaded contact images. The project Contacts.ImageManager is responsible for managing the images. It uses a library I wrote called JosephGuadagno.AzureHelpers.Storage to interact with Azure Blob storage. I know, an original name, right? This library provides a set of helper methods to make it easier to work with Azure Blob storage in .NET applications.

The project Contacts.WebUi uses the Contacts.ImageManager project to upload the contact images to Azure Blob storage. There are two blobs containers that are used in this project:

1. contact-images: This container is used to store the contact images.
2. contact-images-thumbnails: This container is used to store the thumbnail images of the contact images.

For local development, we will use the Azurite emulator to simulate Azure Blob storage. Azurite is a lightweight server that simulates the Azure Blob storage service locally. It is useful for local development and testing purposes.

To add Azurite to the Aspire application, we will use the Aspire.Hosting.AzureStorage package to the Contacts.AppHost project. This package provides support for Azure Blob storage in Aspire applications. We are then going to need to update the application configuration to use the Aspire managed Azurite instance.

You can add the Aspire.Hosting.Azure.Storage package to the Contacts.AppHost project by running the following command in the terminal:

1
dotnet add package Aspire.Hosting.Azure.Storage

or by adding it through the NuGet Package Manager in Visual Studio or Rider.

Since the storage emulator is going to be used by the Contacts.WebUi project, we need to add the reference to the storage component to Aspire before we add the Contacts.WebUi project. Open the AppHost.cs file in the Contacts.AppHost project, and add the following line after the var db line:

1
2
3
4
5
var blobStorage = builder.AddAzureStorage("AzureStorage")
    .RunAsEmulator(azurite =>
    {
        azurite.WithLifetime(ContainerLifetime.Persistent);
    });

This line adds the Azure Blob storage component to the Aspire application, with the name AzureStorage. The RunAsEmulator() method specifies that the Azurite emulator should be used instead of a real Azure Blob storage account. Just as we did with the SQL Server database, we are using the WithLifetime(ContainerLifetime.Persistent) method to specify that the Azurite emulator should be persistent, meaning it will not be recreated every time the application is run. This is helpful for development and testing purposes, as it allows you to keep the data in the Azurite emulator between runs.

1
2
3
4
5
var blobStorage = builder.AddAzureStorage("AzureStorage")
    .RunAsEmulator(azurite =>
    {
        azurite.WithLifetime(ContainerLifetime.Persistent);
    });

Next, we need to create the blob containers that will be used by the application. We can do this by calling the AddBlobContainer("contact-images") and AddBlobContainer("contact-images-thumbnails") methods on the blobStorage variable. Add the following line to the AppHost.cs file after the AddBlobs("cwjgcontacts") line:

1
2
var imageContainer = blobStorage.AddBlobContainer("contact-images");
var thumbnailContainer = blobStorage.AddBlobContainer("contact-images-thumbnails");

Now, we need to update builder.AddProject<Projects.Contacts_WebUi>("contacts-web-ui") to pass the Azure Blob storage connection string to the Contacts.WebUi project. We can do this by chaining a call to the WithEnvironment method on the AddProject method for the Contacts.WebUi project.

1
2
3
4
5
6
builder.AddProject<Projects.Contacts_WebUi>("contacts-web-ui")
    .WithReference(api)
    .WaitFor(api)
    .WaitFor(blobStorage)
    .WithEnvironment("Settings__ContactBlobStorageAccount", imageContainer)
    .WithEnvironment("Settings__ContactThumbnailBlobStorageAccountName", thumbnailContainer);

Now, we need to make a few tweaks to the Contacts.WebUi project to make be able to programmatically set the ContactImageUrl setting in the application. For some reason, the service discovery feature of Aspire does not wire up blob storage URLs automatically, so we need to do it manually.

Open the Program.cs file in the Contacts.WebUi project, and add the following line just after the configuration.Bind("Settings", settings); line in the ConfigureServices method:

1
2
3
4
5
    if (environment.IsDevelopment())
    {
        var endpoint = settings.ContactBlobStorageAccount.Split(';').First(x => x.StartsWith("BlobEndpoint"));
        settings.ContactImageUrl =  endpoint.Split('=')[1].TrimEnd('/') + "/";
    }

This code checks if the application is running in development mode, and if so, it sets the ContactImageUrl setting to the Blob storage endpoint URL by parsing the connection string.

Another thing that we need to do, for this application to work, is to programmatically set the blob container public access level to PublicAccessType.Blob. Replace the services.TryAddScoped<IImageStore> line with the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
services.TryAddScoped<IImageStore>(_ =>
{
    if (environment.IsDevelopment())
    {
        var blob = new Blobs(settings.ContactBlobStorageAccount, settings.ContactImageContainerName);
        blob.BlobContainerClient.SetAccessPolicy(PublicAccessType.Blob);
        
        return new ImageStore(blob);
    }

    return new ImageStore(
        new Blobs(settings.ContactBlobStorageAccountName, null, settings.ContactImageContainerName));

});

Note: I’ll create two issues to get this added to the Aspire.Hosting.Azure.Storage package, so that we don’t have to do this manually in the future.

This code checks if the application is running in development mode, and if so, it sets the public access level of the blob container to PublicAccessType.Blob. This allows the images to be publicly accessible, which is necessary for the Web UI to display the images.

Now, you can upload an image for a contact, the image will be uploaded to the Azure Blob storage emulator, and the Web UI will display the image. If you have the Azure Storage Explorer installed, you can connect to the Azurite emulator and see the images that were uploaded.

Wrap Up

Wow! That was a lot of work, but we have successfully added Aspire to the Contacts application and configured it to use SQL Server, Azure Blob storage, and the Web UI. We also created the database schema and seed data for the application, and we were able to run the application with all the components working together. Now, you can focus on building features for the application without worrying about the underlying infrastructure and configuration.

In a “real world” application, it shouldn’t take you this long to get started with Aspire. The goal of this post was to walk you through setting up and application to show you how to get started with Aspire, and how to add the necessary components to your application.

If you want follow along with me learning Aspire, you can watch the AspiriFridays episode where we added Aspire to the JosephGuadagno.NET Broadcasting application. You can also check out the official documentation for more information on how to get started with Aspire.

References

• .NET Aspire Documentation
• YouTube - AspiriFridays (Joe Guadagno’s Broadcast site)
• JosephGuadagno.AzureHelpers.Storage
• Azurite

For the application, I used the Microsoft Identity Platform and the Microsoft Authentication Library (MSAL). The application is built using ASP.NET Core, Azure, Swagger, and other components. The web application requires user authentication via Entra, and the API is secured using the Microsoft Identity Platform. If you want more information on how to secure an API using the Microsoft Identity Platform, check out my previous series called Protecting an ASP.NET Core API with Microsoft Identity Platform.

Now the documentation for using certificates with the Microsoft Identity Platform is a bit sparse, so I had to piece together the information from various sources. In this article, I’m going to show you how to use certificates for authentication with the Microsoft Identity Library in .NET applications.

Certificate Generation

There are two ways to generate certificates for use with the Microsoft Identity Platform. You can generate a certificate locally or you can use a third-party service to generate the certificate. In this article, I’m going to show you both methods. The local method is useful for development and testing purposes, while the third-party method is more suitable for production environments.

Local Certificate Generation

If you don’t have access to the production certificate, which most won’t, and you do not want to purchase a certificate yourself, you can generate a self-signed certificate. It’s a couple of PowerShell commands to create a self-signed certificate to use for development and testing purposes. Open a PowerShell window and run the following commands:

1
New-SelfSignedCertificate -KeyFriendlyName "JosephGuadagno-Broadcasting" -DnsName "josephguadagno-broadcasting.net" -CertStoreLocation "Cert:\CurrentUser\My"

Replace the -DnsName parameter with the domain name you want to use for the certificate, and the -KeyFriendlyName parameter with a friendly name for the certificate. This command will create a self-signed certificate and store it in the current user’s personal certificate store.

This will generate a local certificate. This certificate needs to be exported and registered in the application registration for which you want to use it in the Azure portal. To export the certificate, in Windows, open the certmgr.msc application, or Manage User Certificates.

• Locate the certificate in the Personal\Certificates folder
• Open the certificate
• Click Details
• Click Copy to File…
• Click Next
• Select No
• Select DER encoded binary
• Click Next
• Select a file name and location
• Click Next
• Click Finish

You should see a message that the export was successful. Click OK to close the message. You now have a certificate that you can use for development and testing purposes.

Configure the Application to Use the Certificate

Now that you have the certificate registered in Azure, you need to configure your application to use the certificate for authentication. This is done by adding some configuration settings to the appsettings.json file in your application. Assuming that you already have the Microsoft Identity Platform configured in your application, you need to add the ClientCertificates section to the configuration settings in the appsettings.json file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "AzureAd": {
    "Instance": "https://login.microsoftonline.com/",
    "Domain": "yourdomain.onmicrosoft.com",
    "TenantId": "your-tenant-id",
    "ClientId": "your-client-id",
    "ClientCertificates": [
      {
        "SourceType": "StoreWithDistinguishedName",
        "CertificateStorePath": "CurrentUser/My",
        "CertificateDistinguishedName": ""
      }
    ]
  }
}

For the CertificateDistinguishedName settings, enter the distinguished name field of the self-signed certificate you created earlier prepended with the CN=. The CN= is a search by common name. The -DnsName parameter contains the common name you used. In the sample above, it was josephguadagno-broadcasting.net. So the CertificateDistinguishedName would be CN=josephguadagno-broadcasting.net.

Register the Certificate in Azure

Once you have the certificate exported, you need to register it in the Azure portal. This is done by uploading the certificate to the application registration in Application Registrations in the Azure portal.

Navigate to the Azure portal and the application registration for your application. In the left-hand menu…

• Click on Manage
• Click on Certificates & secrets
• Click on the Certificates tab
• Click on the Upload certificate button
• In the blade that appears, in the Select a file input field, click on the folder button
  • Select the certificate file you exported earlier and click Add. The certificate will now be registered in the application registration.
• End a description for the certificate in the Description input field. Note: You will need this description later when you configure the application to use the certificate.
• Click Add to add the certificate to the application registration.

Once done, you should see the certificate listed in the Certificates tab.

You can now use this certificate to authenticate your application with the Microsoft Identity Platform.

Third-Party Certificate Generation

If you want to use a third-party service to generate the certificate, you can use a service like Let’s Encrypt or DigiCert. These services will generate a certificate for you and provide you with the necessary files to use in your application. The process for generating the certificate will vary depending on the service you choose, so refer to the documentation for the service you choose.

I’m going to assume that you have a certificate generated by a third-party service and you have the necessary files to use in your application. The process for using the certificate in your application is similar to the process for using a self-signed certificate except you will need to generate a .pfx file from the certificate files provided by the service and then upload the .pfx file to the application registration in the Azure portal.

Let’s say you have a certificate file name josephguadagno_net.crt and a private key file name josephguadagno_net.key. You can generate a .pfx file using the following command:

1
openssl pkcs12 -export -out josephguadagno_net.pfx -inkey josephguadagno_net.key -in josephguadagno_net.crt

This command will generate a .pfx file named josephguadagno_net.pfx that you can use in your application. You will be prompted to enter a password for the .pfx file. Make sure to remember this password as you will need it later when you configure the application to use the certificate. Your inkey may also be a .pem file, so you can use the same command with the .pem file instead of the .key file.

Upload the Certificate to Azure

Now that you have the .pfx file, you need to upload it to the application registration and Azure Key Vault in the Azure portal.

Upload the Certificate to Azure Key Vault

First step is to upload the certificate to the Azure Key Vault. Choose the Key Vault you want to use and follow these steps:

• In the left-hand menu, click on Objects
• Click on Certificates
• Click on the Generate/Import button
• Change the Method of Certificate Creation to Import
• Enter a name for the certificate in the Certificate Name input field. Note: You will need this name later when you configure the application to use the certificate.
• For the Upload certificate file input field, click on the folder button
  • Select the .pfx file you generated earlier and click Add. The certificate will now be uploaded to the Key Vault.
• Enter the password for the .pfx file in the Password input field. This is the password you entered when you generated the .pfx file.
• Click Create to create the certificate in the Key Vault.

Once done, you should see the certificate listed in the Certificates tab.

Upload the Certificate to the Application Registration

Next, you need to upload the certificate to the application registration in the Azure portal. Navigate to the Azure portal and the application registration for your application. In the left-hand menu click on Manage and then click on Certificates & secrets. Now this is the same process as uploading a self-signed certificate except we will need to upload the .crt file that was used to generate the .pfx file.

• In the blade that appears, in the Select a file input field, click on the folder button
  • Select the certificate file you exported earlier and click Add. The certificate will now be registered in the application registration.
• End a description for the certificate in the Description input field. Note: You will need this description later when you configure the application to use the certificate.
• Click Add to add the certificate to the application registration.

Now you should see the certificate listed in the Certificates tab.

Configure Azure to Use the Certificate

Now that you have uploaded the certificate to both the Azure Key Vault and the application registration, you need to configure your application to use the certificate for authentication. This typically involves updating your application’s configuration to include the certificate information.

Assuming that you already have the Microsoft Identity Platform configured in your application and are using an Azure Web App, you need to add the following configuration settings to the appsettings.json file in your application:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "AzureAd": {
    "Instance": "https://login.microsoftonline.com/",
    "Domain": "yourdomain.onmicrosoft.com",
    "TenantId": "your-tenant-id",
    "ClientId": "your-client-id",
    "ClientCertificates": [
      {
        "SourceType": "KeyVault",
        "KeyVaultUrl": "your-key-vault-name",
        "KeyVaultCertificateName": "your-certificate-name"
      }
    ]
  }
}

or in the Environment Variables for the Azure Web App:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  {
    "name": "AzureAd__ClientCertificates__0__KeyVaultCertificateName",
    "value": "CertificateName",
    "slotSetting": false
  },
  {
    "name": "AzureAd__ClientCertificates__0__KeyVaultUrl",
    "value": "https://<your_vault>.vault.azure.net/",
    "slotSetting": false
  },
  {
    "name": "AzureAd__ClientCertificates__0__SourceType",
    "value": "KeyVault",
    "slotSetting": false
  },

Replace the KeyVaultName and CertificateName parameters with the name of the Key Vault and the name of the certificate you uploaded earlier. The SourceType is set to KeyVault to indicate that the certificate is stored in Azure Key Vault.

Wrap Up

Using certificates for authentication with the Microsoft Identity Library in .NET applications is a secure way to authenticate your application with the Microsoft Identity Platform. In this article, I showed you how to generate a self-signed certificate for development and testing purposes, use existing certificates, how to upload the certificate to Azure Key Vault and the application registration, and how to configure your application to use the certificate for authentication.

I hope that this article has been helpful in getting you started with using certificates for authentication with the Microsoft Identity Library in .NET applications and that Microsoft will continue to improve the documentation for using certificates with the Microsoft Identity Platform. If you have any questions or comments, feel free to reach out to me though any of the social media links to the left.

References

• Enabling user authentication in Swagger using Microsoft Identity
• Microsoft Identity - Register an application
• Microsoft Identity - Configure Local Development
• Microsoft Identity - Assigning a Role
• YouTube - AspiriFridays (Joe Guadagno’s Broadcast site)

Prerequisites

If you are not familiar with Development Containers, I recommend reading my previous article on Getting Started with Developer Containers to get a better understanding of what Development Containers are and how to use them.

The rest of this article assumes you have a basic understanding of Development Containers and how to create and use them.

Create a Development Container

Normally, you would use the Command Pallette in Visual Studio Code to create a new Development Container. However, I’m going to use a devcontainer.json file to create a new Development Container because, as of the writing of this posts, there is not a .NET 10 image.

To start, create a folder on your machine, something like dotnet10. Within that folder create a .devcontainer folder. Inside that folder, create a devcontainer.json file with the following content:

1
2
3
4
5
6
{
    "build": {
        "dockerfile": "./Dockerfile",
        "context": "."
    }
}

This instructs Visual Studio Code to use the Dockerfile in the current folder to build the Development Container. Let’s now create the Dockerfile with the following content:

1
2
3
4
5
6
7
8
# Use the most recent .NET LTS as the base image
FROM mcr.microsoft.com/devcontainers/dotnet:1-8.0

# Install the current .NET STS release on top of that
COPY --from=mcr.microsoft.com/dotnet/sdk:9.0 /usr/share/dotnet /usr/share/dotnet

# Finally install the most recent .NET 10.0 preview using the dotnet-install script
COPY --from=mcr.microsoft.com/dotnet/nightly/sdk:10.0.100-preview.2 /usr/share/dotnet /usr/share/dotnet

This Dockerfile will add version 8, 9, and 10 of .NET to the Development Container. It starts with the based image of .NET 8, which is the most recent LTS version. It then adds .NET 9 on top of that. Finally, it adds .NET 10.0 Preview 2.

Using this Dockerfile will allow you to pull the current version of .NET 10.0 Preview 2. If you want the nightly build, you would just need to rebuild the container and the latest 10.0 Preview 2 will be installed. For future versions, you would just need to change the version number in the Dockerfile.

Save the Dockerfile and devcontainer.json files. Now, open the folder in Visual Studio Code. You should see a prompt to reopen the folder in a Development Container. Ignore that prompt for now.

Add VS Code Extensions

Next, we will want to add some extensions to Visual Studio Code. I recommend the following extensions to aid in development:

• Stoplight Spectral Extension
• OpenAPI (Swagger) Editor Extension
• VS Code Icons
• REST Client

To do this, edit the .devcontainer/devcontainer.json file to include the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
    "customizations": {
        "vscode": {
            "extensions": [
                "ms-dotnettools.csdevkit",
                "ms-dotnettools.dotnet-interactive-vscode",
                "vscode-icons-team.vscode-icons",
                "humao.rest-client",
                "42Crunch.vscode-openapi",
                "stoplight.spectral"
            ]
        }
    }
}

Startup script

Finally, we will want to add a startup script to the .devcontainer folder. I generally would create a scripts folder within the .devcontainer folder. This script will be run when the Development Container starts. Create a scripts/postCreateCommand.sh file with the following content:

1
2
3
4
5
6
7
#!/bin/bash

# Update the workloads
sudo dotnet workload update

# EF Tools
dotnet tool install -g dotnet-ef

This will update all the workloads and install the Entity Framework tools. Save the file. You can add any other commands you want to run when the Development Container starts.

Go back to the devcontainer.json file and add the following:

1
2
3
{
    "postCreateCommand": ".devcontainer/scripts/postCreateCommand.sh"
}

Save the changes to the devcontainer.json file.

Build the Development Container

Now that we have the Dockerfile, devcontainer.json, and the startup script, we can build the Development Container. Open the Command Pallette in Visual Studio Code and type Dev Containers: Rebuild and Reopen in Container. This will build the Development Container and open the folder in the Development Container.

Once the Development Container is built, you can start working with .NET 10. You can create a new project, run tests, and do anything you would normally do with .NET from the Terminal in Visual Studio Code.

Wrap Up

Using Development Containers is a great way to work with different versions of .NET without cluttering up your local machine. You can easily switch between versions by changing the Dockerfile and rebuilding the Development Container. You can also add extensions and scripts to make your development environment more productive.

If you want to see a completed example, check out the dotnet10-devcontainer repository.

If you want to customize the Terminal prompt, you can use the steps in this post, Add and Customize Oh My Zsh in a Linux Development Container.

References

• .NET in a DevContainer
• Add and Customize Oh My Zsh in a Linux Development Container
• Stoplight Spectral Extension
• OpenAPI (Swagger) Editor Extension
• VS Code Icons
• REST Client

Prerequisites

If you are not familiar with Development Containers, I recommend reading my previous article on Getting Started with Developer Containers to get a better understanding of what Development Containers are and how to use them.

The rest of this article assumes you have a basic understanding of Development Containers and how to create and use them.

Adding Oh My Zsh to a Development Container

Oh My Zsh is an open-source framework for managing Zsh configurations. It comes with a vast collection of themes and plugins that can enhance your shell experience. To add Oh My Zsh to your Development Container, you can add the feature called common-utils from the Development Containers Features catalog. The common-utils feature will install Zsh, Oh My Zsh, and configure Zsh as the default shell in your Development Container.

Open your .devcontainer/devcontainer.json file and add the following configuration to the features section:

1
2
3
4
5
6
7
8
"features": {
    "ghcr.io/devcontainers/features/common-utils": {
        "installZsh": true,
        "installOhMyZsh": true,
        "installOhMyZshConfig": true,
        "configureZshAsDefaultShell": true
    }
}

If you want to add any custom plugins or themes, you can do so by adding the feature of zsh-plugins to the features section of the devcontainer.json. In the example below, I am going to add the zsh-autosuggestions and the zsh-syntax-highlighting plugins.

1
2
3
4
"ghcr.io/devcontainers-extra/features/zsh-plugins:0": {
    "plugins": "zsh-autosuggestions zsh-syntax-highlighting",
    "omzPlugins": "https://github.com/zsh-users/zsh-autosuggestions.git https://github.com/zsh-users/zsh-syntax-highlighting.git"
}

• Line 2: in the example above, the plugins entry, specifies the plugins to be installed.
• Line 3: the omzPlugins entry, specifies the locations to download the plugins from.

Your complete feature section should look something like this:

1
2
3
4
5
6
7
8
9
10
11
12
"features": {
    "ghcr.io/devcontainers/features/common-utils": {
        "installZsh": true,
        "installOhMyZsh": true,
        "installOhMyZshConfig": true,
        "configureZshAsDefaultShell": true
    },
    "ghcr.io/devcontainers-extra/features/zsh-plugins:0": {
        "plugins": "zsh-autosuggestions zsh-syntax-highlighting",
        "omzPlugins": "https://github.com/zsh-users/zsh-autosuggestions.git https://github.com/zsh-users/zsh-syntax-highlighting.git"
    }
},

The dotfiles

The power of Oh My Zsh comes from the ability to customize your shell experience. Let’s take a look at how you can customize your Development Container with Oh My Zsh.

Oh My Zsh Configuration

Oh My Zsh comes with a default configuration file called .zshrc. You can customize your shell experience by adding your configurations to the .zshrc file. You can find the .zshrc file in the ~/.oh-my-zsh directory in your Development Container. You can further customize the .zshrc file by using the various themes and plugins available with Oh My Zsh. If you already have a .zshrc file that you use on your local machine, you can use that. Or if you don’t, you can use the one that use which is hosted on GitHub. My zshrc file is available on GitHub.

For this sample, you will want to create a directory called dotfiles in your .devcontainer directory and add the .zshrc file to it. We’ll copy the files in a few steps ahead.

Powerlevel10k Configuration

I use the Powerlevel10k theme which has its own configuration file, p10k.zsh. Just like the .zshrc file, you can customize this file to your needs. This file needs to be in the ~/ directory in your Development Container. If you do not have a p10k.zsh file, you can use the one I provide in my GitHub repository. My .p10k.zsh file is available on GitHub.

Just like the .zshrc file, you will want to create a directory called dotfiles in your .devcontainer directory and add the .p10k.zsh file to it for this script to work.

Copying the dotfiles

The next step will require you to copy the dotfiles to the appropriate directories in your Development Container. For this, I create a script that we will run in the postCreateCommand section of the devcontainer.json file.

Start by creating a script called post-create.sh in the .devcontainer directory. I created a scripts folder in the .devcontainer directory and added the post-create.sh file to it. The post-create.sh file will look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#!/bin/bash

#######
# Config ZSH
#######
# powerline fonts for zsh theme
git clone https://github.com/powerline/fonts.git
cd fonts
./install.sh
cd .. && rm -rf fonts

# oh-my-zsh plugins
zsh -c 'git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/themes/powerlevel10k'
cp .devcontainer/dotfiles/.zshrc ~
cp .devcontainer/dotfiles/.p10k.zsh ~

Let’s break down the script:

• Line 7-10: Clones the fonts repository and installs the fonts, which helps with the Powerlevel10k theme.
• Line 13: Clones the Powerlevel10k theme to the ~/.oh-my-zsh/custom/themes directory.
• Line 14-15: Copies the .zshrc and .p10k.zsh files to the ~ home directory.

Running the post-create.sh script

To run the post-create.sh script, you need to add it to the postCreateCommand section of your devcontainer.json file. Here’s how you can do that:

1
"postCreateCommand": ".devcontainer/scripts/post-create.sh",

Now this will run the post-create.sh script after the container is created. However, we are not done yet. We need to enable the fonts in the terminal. That’s next.

Enabling the Fonts in the VS Code Terminal

To enable the fonts in the VS Code terminal while you are in the Development Container, you will need to update the customizations section of the devcontainer.json file. Add the following configuration to the customizations section:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
"customizations": {
    "vscode": {
    "settings": {
        "editor.tabSize": 4,
        "terminal.integrated.fontFamily": "MesloLGM Nerd Font",
        "terminal.integrated.fontLigatures.enabled": true,
        "terminal.integrated.defaultProfile.linux": "zsh",
        "terminal.integrated.profiles.linux": {
            "zsh": {
                "path": "/bin/zsh",
                "icon": "terminal-ubuntu"
            }
        }
    }
}

Let’s break down the configuration:

• Line 5: Sets the font family to MesloLGM Nerd Font. You’ll want to use a Monospaced font that supports the ligatures characters. Usually any font with Nerd Font in the name will work.
• Line 6: Enables font ligatures. This allows the icons to be displayed correctly.
• Line 7: Sets the default profile for the terminal to zsh.
• Line 8-12: Configures the zsh profile for the terminal. The path entry specifies the path to the zsh binary, and the icon entry specifies the icon to use for the terminal.

Restart or Rebuild the Development Container

At this point, you are ready to build/rebuild your Development Container. This can be done through the Command Palette in VS Code by selecting Dev Containers: Rebuild Container.

The Final Result

After rebuilding the Development Container, you should see the Powerlevel10k theme in the terminal. If you used my samples, the prompt and terminal will look like this:

You can now customize your shell experience by adding your configurations to the .zshrc and .p10k.zsh files. You can also explore the various themes and plugins available with Oh My Zsh to tailor your environment to your preferences. Just remember to copy the modified files from the container to the dotfiles and rebuild the container.

Wrap Up

In conclusion, customizing your Development Container with Oh My Zsh can significantly enhance your shell experience, making your development process more efficient and enjoyable. I encourage you to explore the various themes and plugins available with Oh My Zsh to tailor your environment to your preferences.

If you don’t want to go through all of the steps, you can take a look at this repository for a complete setup.

References

• Getting Started with Developer Containers
• Development Containers Overview
• Development Containers Template
• Development Containers Features
• Development Containers Visual Studio Code Extension
• Create a Development Container
• Oh My Zsh

For a while now I have been using UniGetUi to install (almost) all of the applications on my laptop. This has saved me a lot of time since UniGetUi can install and update applications from popular package managers like Winget, Scoop, Chocolatey, Pip, Npm, .NET Tool and PowerShell Gallery. Recently, UniGetUi has added a feature that allows you to backup the list of installed applications/packages to a Json file. This file can then be used to install all of your applications/packages on a new laptop.

The engineer in me was wondering how I could store this configuration, more so the applications and configuration from this laptop that I use regularly. I figured I would create a repository on GitHub and store the configuration there. I could then clone this repository to a new laptop and run the UniGetUi application to install all the applications. This would save me a lot of time and hassle. I could also use this repository to store all my settings and configurations. This would make setting up a new laptop a breeze. I could also share this repository with others. This would allow others to easily install all the applications/packages and settings that I use. This would be a huge time saver for them as well.

What you will need

• UniGetUi installed on your laptop. You can download it from here.
• A Git account with a service like GitHub, BitBucket, or GitLab
• PowerShell installed on your laptop. PowerShell is optional, but the script I wrote to refresh the files is written in PowerShell. More on this later.

The Repository

I started by creating a repository on GitHub. This particular repository is called machine-dell5570-config. Initially, I added some of the common files I need for my configuration, like:

• .gitignore - This a common .gitignore file that I use across my projects. It also serves a second purpose to make sure I don’t commit any secrets to the repository.
• Microsoft.PowerShell_profile.ps1 - This file is used to store my PowerShell profile.
• DESKTOP-8IKVGQI installed packages 2025-01-26 07-51-10.ubundle - This file is used to store the applications/packages installed using UniGetUi.

The DESKTOP-8IKVGQI installed packages 2025-01-26 07-51-10.ubundle file is the file that UniGetUi creates as a backup of your installed files. Underneath the hood, it is a json file that describes each application, the version, and the installation source. I can then use this file to install all the applications on a new laptop. However, UniGetUi will generate a new file each time it creates a backup. This would have created a lot of files in the repository and defeat the purpose of using Git. I also wanted to automate this process a little bit. I ended up creating a new PowerShell script to manage this.

Backing up the Application/Package List with UniGetUi

To back up the application/package lists using UniGetUi, you can utilize the backup feature. This will create a JSON file containing all the installed applications/packages that were installed using UniGetUi, which can be helpful when transferring settings to a new machine. Here’s how to do it:

1. Open UniGetUi.
2. Navigate to the settings menu.
3. Scroll down to Backup installed packages and expand the section.

Note: This image was taken from version 3.1.7 of the application. The layout may vary slightly in other versions.

At this point you can configure the backup settings to your needs. I’ve accepted the defaults which enabled a backup periodically, adds a timestamp to the filename, and saves the file to the My Documents\UniGetUi folder.

As I mentioned in the previous section, this will generate a new file each time it creates a backup. The naming convention seems to be <COMPUTERNAME> installed packages YYYY-MM-DD HH-MM-SS.ubundle. I did not want a Git repository full of these files, so I created a PowerShell script to help me manage this. More on that next.

The PowerShell Script

As I mentioned before, the engineer wanted to automate this process a little bit. I created a PowerShell script to automatically copy the latest files I care about to the git repository and commit them. Let’s walk through the script.

UniGetUi Backup File Management

To manage the UniGetUi backup files, I wrote a PowerShell script that automatically renames the latest backup file to a more manageable name and moves it to a designated folder where the git repository resides.

Let’s look at the code:

1
2
3
4
5
6
7
8
9
# Initial common vairables
$MyDocumentsFolder = [Environment]::GetFolderPath('MyDocuments')

# Get the latest UniGet Bundle
$UniGetFolder = $MyDocumentsFolder + "\UniGetUi"
$UniGetBackupName = "UniGet Installed Packages.json"
$NewestFile = Get-ChildItem -Path $UniGetFolder -Filter "*.ubundle" -File | Sort-Object LastWriteTime -Descending | Select-Object -First 1
Copy-Item -Path $NewestFile.FullName -Destination $UniGetBackupName
git add $UniGetBackupName

• Line #2, I get the My Documents folder.
• Line #5, I create a variable to store the path to the UniGetUi folder.
• Line #6, I create a variable to store the name of the file I want to use.
• Line #7, I get the newest file in the UniGetUi folder.
• Line #8, I copy the newest file to the new name.
• Line #9, I add the new file to the git repository.

Getting the latest PowerShell Profile

1
2
3
# Get the latest PowerShell_profile
Copy-Item -Path $PROFILE
git add .

• Line #2, I copy the latest PowerShell profile to the git repository. Note: $PROFILE is a built-in variable in PowerShell that points to the current user’s profile script.
• Line #3, I add the new file to the git repository.

Committing the Changes

1
2
3
4
# Commit the updated files to git
$gitMessage = "Updated files  $(Get-Date)"
git commit -m $gitMessage
git push

• Line #2, I create a variable to store the commit message, which includes the current date and time $(Get-Date).
• Line #3, I commit the changes to the git repository with the commit message.
• Line #4, I push the changes to the remote repository.

The Full Script

Having these tasks in a single script makes it easier to manage the files, add additional items, and commit them to the repository for safekeeping.

The full source for the PowerShell script can be found at Refresh-Files.ps1.

Restore the Applications and Packages

To restore your applications and packages after setting up a new laptop, you can utilize the configuration files stored in your Git repository. Here’s a step-by-step guide:

• Install UniGetUi: Start by installing UniGetUi on your new laptop. You can download it from here.
• Install Git: If you haven’t already, install Git on your new laptop. You can download it from here.
• Open a PowerShell Terminal: Open a PowerShell terminal on your new laptop.
• Clone the Repository: Start by cloning your configuration repository to your new laptop using the following command:

1
git clone <Url Repository Url> # Similar to https://github.com/jguadagno/machine-dell5570-config

• Navigate to the Directory: Change into the cloned repository’s directory:

1
cd <Path to the cloned repository> # Example: cd machine-dell5570-config

• Install Applications with UniGetUi: Use the JSON file previously created to install the applications.

1. Open UniGetUi
2. Navigate to the Package Bundles
3. Click Open Existing Bundle
4. Select the file UniGet Installed Packages.json from the cloned repository.
5. Select all of the applications/packages you want to install.
6. Click the Install selection button.

• Restore PowerShell Profile: Copy the Microsoft.PowerShell_profile.ps1 file back to your PowerShell profile location. You can do this using:

1
Copy-Item -Path .\Microsoft.PowerShell_profile.ps1 -Destination $PROFILE -Force

At this point, you should have successfully restored your applications and settings to your new laptop. This process can save you a lot of time and effort when setting up a new machine.

Wrap Up

In conclusion, using UniGetUi along with a properly managed Git repository will greatly streamline the process of setting up a new laptop. Remember to regularly commit changes to keep your repository updated and ready for use on a new machine.

References

• UniGetUi
• Winget
• Scoop
• Chocolatey
• Pip
• Npm
• .NET Tool
• PowerShell Gallery

Presentation Equipment

There are a few things that I always carry with me when I am presenting at a conference or a user group meeting.

Presentation Clicker

Presentation Clicker Air Mouse Function Wireless Presenter USB Powerpoint Clicker (only USB Receiver) for Laptop, Computer, Projector, Mac, PC (Amazon Link). This device has more features than just advance and reverse slides. It has a built-in laser pointer, air mouse function, media play, and more. It is very handy when you are presenting and you need to move around the room.

Extra Monitor

A lot of community conferences do not have “confidence monitors” for the speakers. I always carry a portable monitor with me. It is very handy when you are presenting and you need to see your slides. I use the Lepow Portable Monitor, 15.6 Inch Full HD 1080P USB Type-C Computer Display (Amazon Link). It’s lightweight and easy to carry. Plus I can use it as a second monitor when I am working from hotels.

Having a second monitor requires having an adapter to connect it to your laptop. The are two different cables to use with this monitor depending on the version you have. I have an older version that supports USB-C and mini HDMI. For this, I have this cable: Cable Matters High-Speed 4K Mini HDMI to HDMI Cable 15ft (Amazon Link). If you are purchasing the model linked above, you will need a USB-C to USB-C cable. I recommend the JSAUX 100W USB C to USB C Cable (Amazon Link). I keep a couple of these cables in my bag for data transfer and charging.

Presentation Adapters

I never know what type of equipment I am going to be presenting on so I carry along a few different video “adapters” to accommodate different types of projectors. I use the USB C to HDMI Adapter, Tuwejia USB 3.1 Type C Thunderbolt 3 to HDMI 4K Adapter Compatible with MacBook Pro 2018/2017, MacBook Air, Samsung Galaxy S10 S9 S8 Note 9, Surface Book 2 and More (Amazon Link).

I also carry in my bag the Anker 332 USB-C Hub (5-in-1) with 4K HDMI Display, 5Gbps - and 2 5Gbps USB-A Data Ports (Amazon Link). This is a great adapter to have in your bag. It has a USB-C port, 2 USB-A ports, and an HDMI port. It is very handy when you need to connect multiple devices to your laptop or even power your USC-C laptop.

Presentation Cables

I always have a few different cables in bag:

• Amazon Basics High-Speed 4k Ultra HD HDMI 2.0 Cable
• JSAUX 100W USB C to USB C Cable

Cable Bag

This item took me a while to find the “right” one. I wanted something that was small enough to fit in my backpack but big enough to hold all of my cables. I found the BUBM Double Layer Electronic Accessories Organizer, Travel Gadget Bag for Cables, USB Flash Drive, Plug and More (Amazon Link). It is perfect for my needs. It has a lot of pockets and compartments to hold all of my cables and adapters.

Travel Equipment

For travel, I have a few different items that I always carry with me. Here is a list of the equipment that I carry with me.

I need something to carry all of my equipment in. I use the TUMI - Alpha Bravo Search Backpack - Laptop Backpack for Men & Women - Backpack for Work & Travel - 17.0” X 14.0” X 8.3” - Navy Blue (Amazon Link), which my wife purchased for me for Christmas a few years ago. It is very handy when you are traveling. It has a lot of pockets and compartments to hold all of my equipment. It is very handy when you are traveling and you need to carry all of your equipment.

This charger is very handy when you are traveling. It has 4 USB-C ports, two USB-A and two USB-C, and can charge multiple devices at the same time. USB C Wall Charger, ITEHIL 100W 4-Port Fast PD Charger, Portable Type C Charger with Foldable Plug ( Amazon Link). It is very handy when you are traveling and you need to charge your laptop, phone, and other devices.

This charger is very handy when you are traveling for the night time. The Wireless Charging Station for Samsung, 3 in 1 Foldable Wireless Charger for Samsung Galaxy S24 Ultra/S24/S23 Ultra/S22/Note 20/iPhone 16 Pro Max, Galaxy Watch Ultra/7/6/5/4/Buds(Travel Essentials) (Amazon Link). It has 3 charging pads, one for your phone, one for your watch, and one for your earbuds. I set it up in my hotel room when I get there to charge my phone, watch, and ear buds.

Since public speaking generally requires travel and you can not guarantee the quality of the power outlets on airplanes, trains, or at the venue, I always carry a portable charger with me. I use the 25800mAh Power Bank, 22.5w Fast Charging Battery Pack (Amazon Link). This charger is very handy when you are traveling. It has a 25800mAh battery capacity and can charge multiple devices at the same time. It is very handy when you are traveling and you need to charge your laptop, phone, and other devices.

Update: I’ve updated my portable charger to Portable Charger 36800mAh,4 Outputs Power Bank, Dual Input 5V/3A External Battery Pack,USB-C in&Out High-Speed Charging Backup Charger Compatible with iPhone 16/15/14/13,Samsung S23 Android Phone etc (Amazon Link). This charger has a 36800mAh battery capacity and can charge multiple devices at the same time. It is very handy when you are traveling and you need to charge your laptop, phone, and other devices. It also has a USB-C port that can charge your laptop.

Recently, I added trackers to all of my bags, including my laptop bag. Since I have an Android based phone, I added the Pebblebee Tracker Clip Universal - Rechargable Item Tracker (Amazon Link). This product works both with Android and iOS devices. It came in very handy on the return flight from Stockholm when my bags decided to extend their vacation and not come home with me. :smile: Pebblebee also has a card version of the tracker that I have in my wallet and large suitcases. The Pebblebee Tracker Card Universal - Rechargeable Slim Item Tracker (Amazon Link).

International Travel Equipment

For international travel, I have a few different items that I always carry with me. Here is a list of the equipment that I carry with me.

This adapter is very handy when you are traveling internationally. The Universal Travel Adapter, VINTAR 75W GaN International Power Adapter with 3 USB C PD and 2 USB A QC, All in One Travel Essentials for UK/EU/USA/AUS (Amazon Link). It has 3 USB-C ports, 2 USB-A ports, and can charge multiple devices at the same time. It is very handy when you are traveling and you need to charge your laptop, phone, and other devices. It also has a built-in power converter so you can use it in different countries. In addition, it supports fast charging, so you can charge your devices quickly.

I primarily use a Dell laptop and it’s AC adapter has a “mickey mouse” style plug, or more technically known as an IEC 60320 C5 connector, to power the power brick. This makes it easy to find a replacement power cord when traveling internationally. I use the CableLeader 6ft Right Angle European 3-Prong Notebook Power Cord CEE 7/7 (Amazon Link). For the United Kingdom I use UK 3 Prong AC Power Cord Cable for Dell HP Asus Sony Toshiba Lenovo Acer Charger (UK Power Cord) (Amazon Link) .These power cords are very handy when you are traveling internationally. They both have a right-angle plug that makes it easy to plug into the wall outlet. It is very handy when you are traveling and you need to charge your laptop.

Bonus Equipment

For the wife, the Simran 1875 Watts International Travel Voltage Converter For Hair Dryer, Hair Straightener, Flat Iron, Curling Iron, Hair Curlers, travel Power Converter 220v to 110v, travel Adapter US to UK Europe AU (Amazon Link). This converter is very handy when you are traveling internationally. It has a 1875 Watts power capacity and can convert 220v to 110v. It is very handy when you are traveling and you need to use your hair dryer, hair straightener, flat iron, curling iron, or hair curlers.

Wrap Up

Please note that this is not a sponsored post. I have purchased all of the equipment mentioned in this post with my own money. I have been using this equipment for a while now and I am very happy with it. I hope you find this post helpful. All the links are to Amazon and I am an Amazon Associate. If you purchase any of the equipment through the links in this post, I will get a small commission at no extra cost to you. This helps me keep this blog running. Thank you for your support.

Do you have a device that you can’t live without when you are traveling? Let me know in the comments below. I would love to hear about it.

Getting Started

Install Windows Terminal

If you don’t have Windows Terminal installed, you can download it from the Microsoft Store (recommended by Microsoft), or you can download it from the Windows Terminal GitHub repository.

Another option is to install it using the Windows Package Manager.

1
winget install --id Microsoft.WindowsTerminal --exact

Install PowerShell

You can install PowerShell using the Windows Package Manager.

1
winget install --id Microsoft.PowerShell --source winget

If you want, you can install the latest preview version of PowerShell with the following command.

1
winget install --id Microsoft.PowerShell.Preview --source winget

Install Oh-My-Posh

Oh-My-Posh is a prompt theming engine for PowerShell. You can install it using the Windows Package Manager with the following command.

1
winget install --id JanDeDobbeleer.OhMyPosh --exact

Installing with UniGetUI

If you are using UniGetUI, which I highly recommend, you can install all three packages as a bundle.

• Save this json locally on your machine.
• In UniGetUI, click on Package Bundles
• Click on Open existing bundle, select the recently saved json file.
• Click on Install selection

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
{
  "export_version": 2,
  "packages": [
    {
      "Id": "JanDeDobbeleer.OhMyPosh",
      "Name": "Oh My Posh",
      "Version": "23.0.2",
      "Source": "winget",
      "ManagerName": "Winget",
      "InstallationOptions": {
        "SkipHashCheck": false,
        "InteractiveInstallation": false,
        "RunAsAdministrator": false,
        "Architecture": "",
        "InstallationScope": "",
        "CustomParameters": [],
        "PreRelease": false,
        "CustomInstallLocation": "",
        "Version": ""
      },
      "Updates": {
        "UpdatesIgnored": false,
        "IgnoredVersion": ""
      }
    },
    {
      "Id": "Microsoft.PowerShell",
      "Name": "PowerShell",
      "Version": "7.4.4.0",
      "Source": "winget",
      "ManagerName": "Winget",
      "InstallationOptions": {
        "SkipHashCheck": false,
        "InteractiveInstallation": false,
        "RunAsAdministrator": false,
        "Architecture": "",
        "InstallationScope": "",
        "CustomParameters": [],
        "PreRelease": false,
        "CustomInstallLocation": "",
        "Version": ""
      },
      "Updates": {
        "UpdatesIgnored": false,
        "IgnoredVersion": ""
      }
    },
    {
      "Id": "Microsoft.WindowsTerminal",
      "Name": "Windows Terminal",
      "Version": "1.20.11781.0",
      "Source": "winget",
      "ManagerName": "Winget",
      "InstallationOptions": {
        "SkipHashCheck": false,
        "InteractiveInstallation": false,
        "RunAsAdministrator": false,
        "Architecture": "",
        "InstallationScope": "",
        "CustomParameters": [],
        "PreRelease": false,
        "CustomInstallLocation": "",
        "Version": ""
      },
      "Updates": {
        "UpdatesIgnored": false,
        "IgnoredVersion": "1.19.10573.0"
      }
    }
  ],
  "incompatible_packages_info": "Incompatible packages cannot be installed from WingetUI, but they have been listed here for logging purposes.",
  "incompatible_packages": []
}

Getting Started with Oh-My-Posh

Oh-My-Posh allows you to customize your prompts with different themes and segments. A sample prompt looks like this.

If you just installed, Windows Terminal, Powershell, or Oh-My-Posh, I recommend you restart your terminal so that oh-my-posh is included in the path.

Font Installation

After restarting your terminal, you can install a font. You’ll typically want to install a Nerd Font, which includes the icons used in the prompt. Run the following command to install the Meslo LGM NF font.

1
oh-my-posh font install meslo

Register the font with Windows Terminal

You will need to tell Windows Terminal to use this font. To do this, open up the Settings in Windows Terminal (CTRL+,)

• Click on the Defaults profile.
• Under the Additional settings section, click Appearance
• Under the Fonts section, select the MesloLGM Nerd Font font for the Font face property, or whatever font you installed.

You can also do this by editing the Windows Terminal settings.json file. Add the following to the defaults profile.

1
2
3
4
5
6
7
8
9
10
11
12
{
    "profiles":
    {
        "defaults":
        {
            "font":
            {
                "face": "MesloLGM Nerd Font"
            }
        }
    }
}

Initializing Oh-My-Posh

In Windows Terminal, with the PowerShell prompt loaded, you will need to edit your $PROFILE file. You can do this by running the following command.

1
notepad $PROFILE

Add the following lines to the $PROFILE file.

1
oh-my-posh init pwsh | Invoke-Expression

This will initialize Oh-My-Posh with the default theme.

Save the file and either restart the terminal or run the following command to reload the profile.

1
. $PROFILE

Customizing the Prompt

There are many ways to customize the prompt. You can change the theme, add segments, or create your own theme. You can find more information on the customizing Oh-My-Posh in their documentation. I’ll show you the customizations I made to my prompt. Once done, your prompt will look like this.

First step is to choose a theme. Themes in Oh-My-Posh are more then just colors, they include segments, which are the different parts of the prompt. I chose the PowerLevel10k Modern theme. You can set the theme by editing your oh-my-posh initialization command in your $PROFILE file.

1
oh-my-posh --init --shell pwsh --config "$env:POSH_THEMES_PATH\powerlevel10k_modern.omp.json" | Invoke-Expression

This will load the theme from the powerlevel10k_modern.omp.json file. You can find the theme files in the %POSH_THEMES_PATH% folder. This is likely in the following folder: C:\Users\<username>\AppData\Local\Programs\oh-my-posh\themes directory. There are many themes to choose from, and you can create your own.

Note: You will not see the main portion of the prompt unless you install the posh-git module. I’ll show you how to do that later.

If you want to customize the theme, you can create your own theme file. You can find more information in the Oh-My-Posh configuration documentation.

Add Additional PowerShell Modules

You can add additional PowerShell modules to your prompt to further customize it. I added the posh-git, PSReadLine, and Terminal-Icons modules to my prompt.

Posh-Git Module

Posh-git provides prompt with Git status summary information and tab completion for Git commands, parameters, remotes and branch names.

You can install it as a PowerShell module. In your terminal, run the following command.

1
Install-Module posh-git -Scope CurrentUser

After installed, open your $PROFILE file and add the following line after your oh-my-posh initialization.

1
Import-Module posh-git

PSReadLine Module

PSReadLine enhances the PowerShell command line editing environment. It provides syntax coloring, multi-line editing, and more.

You can install it as a PowerShell module. In your terminal, run the following command.

1
Install-Module PSReadLine -Scope CurrentUser

After installed, open your $PROFILE file and add the following line after your oh-my-posh initialization.

1
Import-Module PSReadLine

I also added the following lines to my $PROFILE file to customize the PSReadLine module after all of the imports.

1
2
3
Set-PSReadLineOption -PredictionSource History
Set-PSReadLineOption -PredictionViewStyle ListView
Set-PSReadLineOption -EditMode Windows

With these options, you can use the up and down arrow keys to cycle through your command history. As shown in the image below.

Check out the Set-PSReadLineOption documentation for more options.

Terminal-Icons Module

Terminal Icons that adds file and folder icons when displaying items in the terminal.

You can install it as a PowerShell module. In your terminal, run the following command.

1
Install-Module Terminal-Icons -Scope CurrentUser

After installed, open your $PROFILE file and add the following line after your oh-my-posh initialization.

1
Import-Module Terminal-Icons

After installing and importing the modules, your prompt will look like this when executing a dir command.

Complete $PROFILE File

Here is what my $PROFILE file looks like, with respect to the oh-my-posh configuration, after adding all of the modules.

1
2
3
4
5
6
7
oh-my-posh --init --shell pwsh --config "$env:POSH_THEMES_PATH\powerlevel10k_modern.omp.json" | Invoke-Expression
Import-Module posh-git
Import-Module PSReadLine
Import-Module Terminal-Icons
Set-PSReadLineOption -PredictionSource History
Set-PSReadLineOption -PredictionViewStyle ListView
Set-PSReadLineOption -EditMode Windows

Wrap up

Now you have a customized PowerShell prompt with Windows Terminal and Oh-My-Posh. You can customize the prompt further by creating your own theme or adding additional segments. You can also add additional PowerShell modules to enhance your command line experience.

References

• Windows Terminal
• Oh-My-Posh
• Oh-My-Posh Themes
• Posh-git
• PSReadLine
• Terminal Icons
• Set-PSReadLineOption

Prerequisites

For this to work, you will need the following:

• Azure Subscription
• Azure Key Vault Premium SKU
• digicert Account
• digicert EV Code Signing Certificate
• An organization that has been validated for EV Code Signing Certificates with digicert

Background

What is a code signing certificate you ask? I’m glad you asked! According to digicert code signing certificates are used by software developers to digitally sign apps, drivers, and software programs as a way for end-users to verify that the code they receive has not been altered or compromised by a third party. They include your signature, your company’s name, and if desired, a timestamp.

Essentially, they are a way to validate that source code, packages, executables, etc., comes from who it says it’s from, similarly to how certificates on a web site authenticate the web site when you go to HTTPS enabled web site.

EV Code Signing Certificates combine all the benefits of regular code signing plus additional features including:

• Company address and organization type displayed in the certificate
• Time stamping, signature does not expire once certificate expires
• Certificate stored on a hardware token for two-factor authentication

You can purchase a code signing certificate from a few different sources like digicert, who I have my code certificate from. Please note, they can be expensive for an individual.

Creating a Azure Key Vault

If have an Azure Key Vault Premium SKU, you can skip this step and move to Generate the Certificate Signing Request (CSR) in Azure Key Vault.

If you do not have one, you will need to create one. Here are the steps to create one.

• Sign in to the Azure Portal
• Click Create a Resource
• In the *Search service and marketplace’ text box, type Key Vault and hit ‘Enter’
• Click Create on the Key Vault item, then Create again.

Key Vault Creation

You’ll be presented with the ‘Create key vault’ wizard. For the most part, you can leave all of the defaults.

If you want to follow along, here are the settings I used.

Note: You will need to have the Premium SKU to store the EV Code Signing Certificate in Azure Key Vault and the HSM encryption key

The rest are defaults.

Click Review + Create

If you did everything correctly, you will get a Validation passed. Validation feels good, doesn’t it!

Click Create

After a few moments, the vault will be created and you will have a page similar to this. I blurred out the secret stuff.

Click on Go to resource

Now that you have a Key Vault that is capable of storing the EV Code Signing Certificate, you can move on to the next step.

Generate the Certificate Signing Request (CSR) in Azure Key Vault

The next step is to generate the Certificate Signing Request (CSR) in Azure Key Vault. This is the request that you will send to digicert to create the EV Code Signing Certificate. Here are the steps to generate the CSR.

• Click Objects in the left-hand menu
• Click Certificates
• Click +Generate/Import

Certification Creation Permissions Required

If you see a message stating that “The operation is not allowed by RBAC…’ you will need to grant yourself the correct permissions.

You need the role of Key Vault Certificates Officer. You can do this by following these steps:

• Click on the Access Control (IAM) in the left-hand menu
• Click on the + Add, then choose Role Assignment
• Click on Key Vault Certificates Officer
• Click Next
• Click on Select members and choose your account, it should be first.
• Click Select
• Click Review + Assign
• Click Review + Assign again.

Now you can go back to the Objects -> Certificates -> +Generate/Import.

Generate the CSR

Now that you are at the Generate/Import page, you can generate the CSR.

Enter/Select the following values:

Subject Comments

If any of the values have spaces, you will need to wrap the value in double quotes. For example, if you are in New York City, you would use L="New York City".

Before you click Create, you will need to click on Not configured next to Advanced Policy Configuration and enter the following values:

Advanced Policy Configuration

The Advanced Policy Configuration is where you can set the permissions for the certificate. You can set the permissions for the certificate to be used for code signing, encryption, etc. Here are the values I used for the certificate.

• Click OK to save the Advanced Policy Configuration.
• Click Create to generate the CSR.

At this point, the CSR will be generated. You will need to download the CSR and send it to digicert to create the EV Code Signing Certificate. Click the following prompt in the portal

This will take you to a blade that will allow you to download the CSR which will be required by digicert to create the EV Code Signing Certificate.

• Click on Download CSR to download the CSR.
• Save the file to a location on your computer.

The default filename should be something like <certificate-name>_<guid>.csr. You can rename the file to something more meaningful if you want but you will only use the file in the next step and then it can be deleted.

Create an EV Code Signing Certificate

Login to your digicert account and follow the steps to create a new certificate.

From the Dashboard, click on the Request a Certificate button and choose EV Code Signing Certificate.

Certificate Information

Click the Add Organization button to add your organization information. This will be the information that is displayed in the certificate. Only organizations that have been validated for EV Code Signing Certificates can be used. For more on this, see the digicert EV Code Signing Certificate page.

The additional emails are for the certificate notifications. You can add more emails if you want to be notified when the certificate is about to expire, etc.

For the Provisioning options, select Install on an HSM. Once you select that option, you will asked Was the private key generated by a Common Criteria EAL4+ standard or FIPS 140-2 level 2 HSM?. You can chose Yes because Azure Key Vault is FIPS 140-2 level 2 compliant. After you selected Yes, you can upload the CSR that you downloaded from Azure Key Vault or paste the contents of the CSR into the text box.

Click Submit Request

After you pay for the certificate, you will be brought to a page that indicates that you successfully requested the certificate. This all assumes, that your organization was already validated for EV Code Signing Certificates. If not, you will need to go through the validation process.

You’ll also notice on this page, that you will have to sign a HSM Private key agreement.

At this point, you, or someone in your organization, will receive and email from digicert with the title [Action Required] Private key protection requirements for digicert Order.

After you agree to the terms, digicert will create the certificate and send you an email with the certificate, this can take some time. After you receive the email, go back to the digicert portal order page and click on the new order.

Click on the Download certificates as button and chose Best format for FIPS 140-2 Level 2 or Common Criteria EAL4+. This will download a zip file with the certificate in the correct format for Azure Key Vault.

Extract the downloaded zip file to a location on your computer.

Import the EV Code Signing Certificate into Azure Key Vault

Navigate back to the Azure Key Vault in the Azure Portal where you generated the request.

• Click on the Objects -> Certificates -> certificate-name. This will bring you to the certificate blade.
• Click on the Certificate Operation button on top.
• Click on Merged Signed Request.
• Select the certificate for your organization from the extracted zip file. It should be <your_organization>.crt. In my case, the file name is josephguadagno_net_llc.crt.

If successful, you will see a Completed status on the certificate operation. If you close this blade, you will notice that the certificate is now enabled with an activation date and expiration date. If you navigate back to the Certificates blade, you will see the certificate listed in the completed state.

Wrap Up

In this post, you learned how to create an Extended Validation (EV) Code Signing Certificate with digicert and store it in Azure Key Vault.

If you want to learn how to use the certificate to sign your a NuGet package from an Azure DevOps pipeline, check out the post Build, Sign, and Deploy NuGet Packages with Azure Pipeline.

Reference

• Setup Code Signing Certificates in Azure Key Vault
• Azure Key Vault
• digicert
• What is an Extended Validation (EV) SSL Certificate?
• Build, Sign, and Deploy NuGet Packages with Azure Pipeline

First off, this post assumes you have Windows, either Windows 10 or Windows 11, with WSL and Docker Desktop installed. If you don’t have Docker Desktop installed, you can download it from Docker Hub.

Docker Volume Location

Update: 2025-01-11: Docker changed the locations of the volumes with release v26.1.4.

When you use Docker Desktop on Windows, the Docker volumes are stored in the WSL file system. The WSL file system is located at \\wsl$\ on the Windows file system.

If you want to see what version of docker you are running, you can open a command prompt or Powershell and run the following command.

1
docker --version

Current Docker Version (v26.1.4 and Higher)

The Docker volumes are stored in the WSL file system at \\wsl$\docker-desktop\mnt\docker-desktop-disk\data\docker\volumes. You should see a folder for each volume you have created in Docker Desktop. Note: The wsl.localhost is no longer used in the path.

Previous Docker Version (v26.1.3 and Lower)

The Docker volumes are stored in the WSL file system at \\wsl.localhost\docker-desktop-data\data\docker\volumes. You should see a folder for each volume you have created in Docker Desktop.

Here is a screenshot of my Docker Desktop volumes.

Here is a screenshot of the WSL file system with the Docker volumes.

As you can see, there is a one to one mapping between the Docker Desktop volumes and the WSL file system. If you access these volumes regularly outside of the containers, you might want to rename the folders to something more meaningful.

Accessing the Volumes

If you do access the volumes a lot, you can create a symbolic link to the volumes folder. To do this, open a command prompt or Powershell as an administrator and run the following command.

Note: You can change the C:\Volumes to any folder you want to use.

Command Prompt

Version 26.1.4 and Higher

1
mklink /D C:\Volumes \\wsl$\docker-desktop\mnt\docker-desktop-disk\data\docker\volumes

Version 26.1.3 and Lower

1
mklink /D C:\Volumes \\wsl.localhost\docker-desktop-data\data\docker\volumes

PowerShell

Version 26.1.4 and Higher

1
New-Item -ItemType SymbolicLink -Path "c:\Volumes" -Target "\\wsl$\docker-desktop\mnt\docker-desktop-disk\data\docker\volumes"

Version 26.1.3 and Lower

1
New-Item -ItemType SymbolicLink -Path "c:\Volumes" -Target "\\wsl.localhost\docker-desktop-data\data\docker\volumes"

File Explorer

If you open up File Explorer, you should see a folder called Volumes in the root of the C:\ drive. This folder is a symbolic link to the Docker volumes.

Wrap Up

In this post, you learned where the Docker volumes are stored when using Docker Desktop on Windows. You also learned how to access the Docker volumes from the Windows file system and create shortcuts to them.

References

• Stack Overflow.
• Stack Overflow.
• Windows Subsystem for Linux (WSL).

I’ve been using JetBrains Rider for quite some time now.

I started using JetBrains Rider because I used both a Windows PC and a Mac PC and I wanted a consistent experience between the both. JetBrains Rider provided that and now I am hooked.

I thought I’d take some time to blog about the plugins I use to help with my day-to-day coding (mostly in Microsoft .NET and Azure), presenting (public speaking), and blogging (using Jekyll).

All of these plugins can be downloaded from either the JetBrains plugin Marketplace or directly in the IDE.

This is an updated post from a previous post I wrote in June 2022.

So here is the list.

General Development

Microsoft Specific Development

The only plugin in this category was a .NET user secret plugin. This is no longer needed as the IDE now supports this feature.

Azure Specific Development

Presenting

Writing

I know longer have anything in this category since I use GitHub Copilot and JetBrains AI Assistant.

No longer in the list

Wrap Up

You’ll also notice that a lot of the plugins I used to use are now built into the IDE.

Do you have a favorite not listed? Let me know.

I was working on the JosephGuadagno.NET Broadcasting application this weekend and wanted to create a feature that would automatically refresh the tokens that are used to authenticate with the various social media platforms. For reasons, these tokens were stored locally in the application settings. I know, bad choice, but when I started this project I really didn’t know Azure Key Vault, so I went with what I knew. I moved these tokens to Azure Key Vault, so now I needed to update the tokens in the Key Vault. However, when use Azure Key Vault SDK to update secrets, it creates an new version of the secret and doesn’t disable the previous secret. Since I am refreshing the token, the old token is no longer valid, so I needed to disable the old secret. At the same time, Azure Key Vaults secrets have an expiration date, so I wanted to update the expiration date of the secret as well. Let’s take a look at how to do this.

This post assumes you have an Azure Key Vault instance and you know how to setup a secret. If you don’t know how to set up a secret, you can follow the steps in the post Securing Azure Function Settings with Azure Key Vault.

The Process

There are a couple of steps to update a secret and its properties to achieve what I wanted to. The steps are:

1. Establish a connection to the Azure Key Vault and obtain a SecretClient class.
2. Get the current secret from the vault using the GetSecretAsync method of the SecretClient class.
3. Call the UpdateSecretPropertiesAsync method of the SecretClient class to disable the secret.
4. Update / create a new version of the secret using the SetSecretAsync method of the SecretClient class
5. Call the UpdateSecretPropertiesAsync method of the SecretClient class using the KeyVaultSecret returned from the step 4 to update the expiration date of the secret.

The Code

Here is the code to update a secret and its properties.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
public async Task UpdateSecretValueAndProperties(SecretClient client, 
            string secretName, string secretValue, DateTime expiresOn)
{
    // Step 2: Get the current secret
    var originalSecretResponse = await client.GetSecretAsync(secretName);
    var originalSecret = originalSecretResponse.Value;
    
    // Step 3: Disable the old secret
    // Set the old secret to disabled
    originalSecret.Properties.Enabled = false;
    var updatePropertiesResponse = 
        await client.UpdateSecretPropertiesAsync(originalSecret.Properties);
    
    // Step 4: Create a new version of the secret
    // Update secret value (create a new version)
    var newSecretVersionResponse = await client.SetSecretAsync(secretName, secretValue);
    var newKeyVaultSecretVersion = newSecretVersionResponse.Value;
    
    // Step 5: Update the expiration date
    // Update the expiration date
    newKeyVaultSecretVersion.Properties.ExpiresOn = expiresOn;
    updatePropertiesResponse = 
        await client.UpdateSecretPropertiesAsync(newKeyVaultSecretVersion.Properties);
}

The error handling in this code was removed for brevity. You should add error handling to your code. You can find the full code in the jjgnet-broadcasting repository.

Wrap Up

I’m not sure why these steps are necessary to update a secret and its properties. I would think that the SetSecretAsync method would update the secret and its properties with an overloaded method and/or better yet add an option to the SetSecretAsync method to disable the previous version, if one exists. However, it doesn’t. I hope this post helps you if you need to update a secret and its properties in Azure Key Vault.

References

• Azure Key Vault
• Azure Key Vault SDK - SecretClient Class
• Azure Key Vault SDK - SecretClient.GetSecretAsync Method
• Azure Key Vault SDK - SecretClient.SetSecretAsync Method
• Azure Key Vault SDK - SecretProperties Class
• Azure Key Vault SDK - SecretClient.UpdateSecretPropertiesMethod
• Azure.Security.KeyVault.Secrets Documentation

Are you using the legacy worker?

If you received an email from GitHub titled, “Important Announcement Re: Pages Legacy Worker Sunset”, you are likely using GitHub Pages with the legacy worker. If you are unsure if you are using the legacy worker you can check your repository settings.

• Go to the repository settings, click on the “Pages” tab, scroll down to “Build and Deployment”, the Source would be set to Deploy from a branch similar to the image below

If you already migrated to GitHub Actions, you will see the Source set to GitHub Actions and you should have a workflow file in the .github\workflows folder.

Migrate to GitHub Actions

To migrate to GitHub Actions, you will need to create a workflow file in the .github\workflows folder. The workflow file will build and deploy your Jekyll site to GitHub Pages. Below is an example of a workflow file that builds and deploys a Jekyll site to GitHub Pages.

Navigate to the Settings page of your repository, click on the Pages tab, and scroll to Build and deployment. Change the *Source to GitHub Actions. The page should update with two options, GitHub Page Jekyll and Static HTML. Choose the appropriate option for your site.

If you are using Jekyll, choose the GitHub Page Jekyll option. If you are using static HTML, choose the Static HTML option. The templates are below. If you do not need to modify the template you can click on Commit changes and GitHub will create the workflow file for you.

Jekyll Workflow Template

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
# Sample workflow for building and deploying a Jekyll site to GitHub Pages
name: Deploy Jekyll with GitHub Pages dependencies preinstalled

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["main"]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Pages
        uses: actions/configure-pages@v5
      - name: Build with Jekyll
        uses: actions/jekyll-build-pages@v1
        with:
          source: ./
          destination: ./_site
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3

  # Deployment job
  deploy:
    environment:
      name: github-pages
      url: $
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Static HTML Workflow Template

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["main"]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  # Single deploy job since we're just deploying
  deploy:
    environment:
      name: github-pages
      url: $
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Pages
        uses: actions/configure-pages@v5
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          # Upload entire repository
          path: '.'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Building your site

Based on the default workflow templates, GitHub Actions will build your site on pushes to the default branch (main). If you need to build your site on pushes to other branches, you can modify the branches key in the on section of the workflow file.

Using Jekyll and Remote Themes

If you are using Jekyll with remote theme, and the remote theme is specified in the _config.yml file, you will need to add the GitHub Token to the workflow file in order to load the theme during the build. The GitHub Token is required to access GitHub from your action and use the remote theme. If you do not have a GitHub token when your site is build you will a warning during the build process

GitHub Metadata: No GitHub API authentication could be found. Some fields may be missing or have incorrect data.

Your site will still build but it will not look like you intended.

Getting the GitHub Token

1. Sign in to GitHub and in the upper right hand corner click on your profile picture and select Settings.
2. In the left sidebar, click on Developer Settings.
3. In the left sidebar, click on Personal access tokens.
4. Click Tokens (Classic).
5. Click on Generate new token (classic).
6. Authenticate, if required.
7. For the note, enter a descriptive name for the token. Example: JEKYLL_GITHUB_TOKEN.
8. Under repo, select public_repo
9. Click Generate token.

Copy this token and store it in a secure location. You will need it later and you can not get it back once you leave the page.

Navigate back to the settings of your repository. Click on the Secrets and variables tab. Click on Actions. Click on New repository secret. Enter the following information:

• Click Add Secret

Add GitHub Token to the Workflow File

Now we need to update the workflow file to use the token.

Edit the workflow file in your favorite editor to add the token to the environment. If you used the default template, look in the build task for the step of Build with Jekyll, it should be around line 45. For this step we need to add an addition env key for the token. The updated step should look like the following:

1
2
3
4
5
6
      - name: Build with Jekyll
        # Outputs to the './_site' directory by default
        run: bundle exec jekyll build --baseurl "$"
        env:
          JEKYLL_ENV: production
          JEKYLL_GITHUB_TOKEN: ${{ secrets.JEKYLL_GITHUB_TOKEN }}

• Replace secrets.JEKYLL_GITHUB_TOKEN with the name you used when you added the secret in the previous step.

Save and commit the changes to your repository. Once saved, the workflow will run and build your site.

Wrap Up

This should be all you need to migrate a GitHub Pages site from the legacy worker to GitHub Actions. If you have any questions or need help, please feel free to reach out to me on Twitter.

References

• GitHub Actions Documentation
• GitHub Pages and Jekyll
• Using custom workflows with GitHub pages
• GitHub Workflow Action for JosephGuadagno.NET

Getting Started

First things first, you need to have a LinkedIn account and LinkedIn company page to post shares, as they are called on LinkedIn. If you don’t have an account or a company page, you can create one at LinkedIn. Once you have an account, you will need to create an application in the LinkedIn Developer Portal.

Developer Portal

On the Developer Portal, you will need to create an application. You can do this by clicking on the Create App button in the center on of the page. You will need to fill out the form with the following information:

(*) Required

Once done, you should see a screen similar to the following:

Client ID and Client Secret

Once you have an application, you will need to get the clientid and clientsecret for the application. You will need these to authenticate with the LinkedIn API. If you are going to be posting on behalf of a user, you will need to get an OAuth token for the user. If you are going to be posting on behalf of a company, you will need to get an OAuth token for the company. I won’t be covering the organizational OAuth token in this post.

Navigate to the OAuth 2.0 Tools page to begin. You can also get there from you App Information page by clicking on Docs and tools, then OAuth Token Tools.

• Click on Create token

On the next page, you will need to select your application and either chose Member authorization code (3-legged) or Client credential (2-legged). I didn’t come up with the names. Basically, Member authorization is if you are going to be posting on behalf of the user, as I will in this post, and Client credential is if you are going to be building an application or interface where the user will be signing in and doing something with their data. For this post, I will be using Member authorization code (3-legged).

For more on the different types of OAuth 2.0 flows, see LinkedIn Authentication Overview.

You will need to select the scopes that you will need for your application. For this post, I will be using the following scopes:

• r_liteprofile: Read basic profile information
• w_member_social: Post, comment and like posts on behalf of the user

Click Request access token to continue.

Once you do this, you will be redirected to sign-in to LinkedIn to grant the access. Enter your credentials and click Sign In.

Now, you will have a screen with the access token and details about the token. You will need this access token to make calls to the LinkedIn API. You can copy the token by clicking on the Copy access token button.

I strongly recommend that you save this access token somewhere secure like Azure Key Vault. If someone gets a hold of it, they can post on behalf of the user. If you do lose it, you can always revoke it and create a new one.

You’ll notice that the access token expires in approximately two months. You will need to refresh the token before it expires. You will need to do this before the token expires. Details on how to do this are in the LinkedIn Authentication Overview. I won’t be covering that in this post.

LinkedIn Manager

Now that we have the access token, we can start posting to LinkedIn. I created a class called LinkedInManager to handle all of the calls to the LinkedIn API. You check get the source in the LinkedIn API Manager GitHub Repository. I will be using the LinkedIn API to get the user’s LinkedIn ID and the Share on LinkedIn API to post the share.

Get User Info

All of the API calls to post a share on LinkedIn require the user’s LinkedIn ID. You can get this by making a call to the Profile API. You will need to make a GET call to the me endpoint, as shown below as an http request.

1
2
GET https://api.linkedin.com/v2/me
Authorization: Bearer {{my-access-token}}

In this http request, as well as the future requests in this posts, you will need to replace {{my-access-token}} with the access token you received from the OAuth 2.0 Tools page. There will likely be another variable in future https requests, {{my-person-id}}. This will be the LinkedIn ID you get from the me endpoint.

In the LinkedInManager class, I created a method called GetUser to make this call. The method is shown below.

1
2
3
4
5
6
7
8
9
 public async Task<LinkedInUser> GetMyLinkedInUserProfile(string accessToken)
{
    if (string.IsNullOrEmpty(accessToken))
    {
        throw new ArgumentNullException(nameof(accessToken));
    }
    
    return await ExecuteGetAsync<LinkedInUser>(LinkedInUserUrl, accessToken);
}

The ExecuteGetAsync method is a helper method that makes the call to the LinkedIn API. The method is shown below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
private async Task<T> ExecuteGetAsync<T>(string url, string accessToken)
{
    _httpClient.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
    _httpClient.DefaultRequestHeaders.Add ("Authorization", $"Bearer {accessToken}");
    var response = await _httpClient.GetAsync(url);
    if (response.StatusCode != HttpStatusCode.OK)
        throw new HttpRequestException(
            $"Invalid status code in the HttpResponseMessage: {response.StatusCode}.");
        
    // Parse the Results
    var content = await response.Content.ReadAsStringAsync();
            
    var options = new JsonSerializerOptions
    {
        PropertyNameCaseInsensitive = true,
    };

    var results = JsonSerializer.Deserialize<T>(content, options);

    if (results == null)
    {
        throw new HttpRequestException(
            $"Unable to deserialize the response from the HttpResponseMessage: {content}.");
    }

    return results;
}

You’ll notice that I am using the HttpClient class to make the call to the LinkedIn API. I am also using the System.Text.Json library to deserialize the response from the API call. You can use any library you want to make the call and deserialize the response.

On line 3 and 4, the required headers are set. The Accept header is set to application/json and the Authorization header is set to the access token.

Line 5 makes the call to the LinkedIn API. If the response is not OK, an exception is thrown.

Line 11 reads the response from the HTTP call.

Line 18 deserializes the response from the API call. If the response is null, an exception is thrown.

Upon success, the LinkedInUser object is returned. The LinkedInUser object is shown below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
public class LinkedInUser
{
    [JsonPropertyName("id")]
    public string Id { get; set; }

    [JsonPropertyName("profilePicture")]
    public ProfilePicture ProfilePicture { get; set; }
    
    [JsonPropertyName("vanityName")]
    public string VanityName { get; set; }
    
    [JsonPropertyName("localizedFirstName")]
    public string FirstName { get; set; }
    
    [JsonPropertyName("localizedLastName")]
    public string LastName { get; set; }
    
    [JsonPropertyName("localizedHeadline")]
    public string Headline { get; set; }
    
    [JsonPropertyName("firstName")]
    public LocalizedInformation LocalizedFirstName { get; set; }
    
    [JsonPropertyName("lastName")]
    public LocalizedInformation LocalizedLastName { get; set; }
    
    [JsonPropertyName("headline")]
    public LocalizedInformation LocalizedHeadline { get; set; }
}

Note: Not all of these fields will be filled. What is filled is based on the scope of for your OAuth token. The Id property is the only property that we use. Note, if you have the r_liteprofile scope, you will get all of the properties but VanityName.

The Id property of the LinkedInUser object, as well as other identifiers in the API, follows the Universal Resource Name URN internet standard. The format is urn:li:person:<person-id>, where <person-id> is the identifier for the person. For most calls, you will need the full URN. In the LinkedInManager class, you only need the <person-id> portion of the URN.

For more on the URNs and IDs in LinkedIn, see the LinkedIn URNs and IDs page.

Share on LinkedIn

The Share API on LinkedIn provides the different ways to create shares or posts on LinkedIn; plain text, text with a link, and text with an image. I will show you how to create each of these types of shares.

Post Plain Text

To post plain text, you will need to make a POST call to the ugcPosts endpoint. The call to the ugcPosts endpoint is shown below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
POST https://api.linkedin.com/v2/ugcPosts
Authorization: Bearer {{my-access-token}}
X-Restli-Protocol-Version: 2.0.0

{
  "author": "urn:li:person:{{my-person-id}}",
  "lifecycleState": "PUBLISHED",
  "specificContent": {
    "com.linkedin.ugc.ShareContent": {
      "shareCommentary": {
        "text": "Please ignore this post. This is a test post. It will be deleted shortly.}"
      },
      "shareMediaCategory": "NONE"
    }
  },
  "visibility": {
    "com.linkedin.ugc.MemberNetworkVisibility": "PUBLIC"
  }
}

A few things to note about this call. We introduced a new header X-Restli-Protocol-Version. This header is required for all POST calls. The value of the header is 2.0.0.

In the LinkedIn API Manager, as call is made to PostShareText. The method is shown below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
public async Task<string> PostShareText(string accessToken, string authorId, string postText)
{
    // Validation removed for brevity
    var shareRequest = new ShareRequest
    {
        Author = string.Format(LinkedInAuthorUrn, authorId),
        Visibility = new Visibility { VisibilityEnum = VisibilityEnum.Anyone },
        SpecificContent = new SpecificContent
        {
            ShareContent = new ShareContent
            {
                ShareCommentary = new TextProperties()
                {
                    Text = postText
                },
                ShareMediaCategoryEnum = ShareMediaCategoryEnum.None
            }
        }
    };
    
    var linkedInResponse = await CallPostShareUrl(accessToken, shareRequest);
    if (linkedInResponse is { IsSuccess: true, Id: not null })
    {
        return linkedInResponse.Id;
    }
    throw new HttpRequestException($"Failed to post status update to LinkedIn: LinkedIn Status Code: '{linkedInResponse.ServiceErrorCode}', LinkedIn Message: '{linkedInResponse.Message}'");
}

We start off by creating a ShareRequest object. Now, in my implementation I have made a view assumption like setting the Visibility to Anyone. You might want to change that in your implementation. Similar to the GetMyLinkedInProfile call, I use a helper method for all of the POST calls. This was helpful for a few reasons, the first, I was repeated code, but more importantly, the serialization and deserialization of the request and response for the LinkedIn API was very particular. The helper method is shown below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
private async Task<ShareResponse> CallPostShareUrl(string accessToken, ShareRequest shareRequest)
{
    // Validation removed for brevity
    
    HttpRequestMessage requestMessage = new HttpRequestMessage(HttpMethod.Post, LinkedInPostUrl);
    requestMessage.Headers.Add("Authorization", $"Bearer {accessToken}");
    requestMessage.Headers.Add ("X-Restli-Protocol-Version", "2.0.0");
    
    JsonSerializerOptions jsonSerializationOptions = new(JsonSerializerDefaults.Web)
    {
        WriteIndented = false,
        DefaultIgnoreCondition = JsonIgnoreCondition.WhenWritingNull,
    };
    var jsonRequest = JsonSerializer.Serialize(shareRequest, jsonSerializationOptions);  
    var jsonContent = new StringContent(jsonRequest, null, "application/json");
    requestMessage.Content = jsonContent;
    
    var response = await _httpClient.SendAsync(requestMessage);
    
    var content = await response.Content.ReadAsStringAsync();
    var options = new JsonSerializerOptions
    {
        PropertyNameCaseInsensitive = true
    };
    var linkedInResponse = JsonSerializer.Deserialize<ShareResponse>(content, options);
    
    if (linkedInResponse == null)
    {
        // TODO: Custom Exception
        throw new HttpRequestException(
            $"Unable to deserialize the response from the HttpResponseMessage: {content}.");
    }

    return linkedInResponse;
}

Lines 5-7, I prepare the http call and headers.

Line 9 - 16, I send the JsonSerializationOptions. Take note of the DefaultIgnoreCondition = JsonIgnoreCondition.WhenWritingNull setting, without this calls to the LinkedIn API will fail with either a 400 or 422 error.

Line 18, I send the request.

Line 20 -25, I deserialize the response, and if successful, return the ShareResponse object.

The ShareResponse object, shown below, is used to deserialize the response from the LinkedIn API. Only the Id property is provided upon a successful call to the LinkedIn API. If the call fails, the Message, ServiceErrorCode, and Status properties will be populated.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
public class ShareResponse
{
    [JsonPropertyName("message")]
    public string? Message { get; set; }
    
    [JsonPropertyName("serviceErrorCode")]
    public int? ServiceErrorCode { get; set; }
    
    [JsonPropertyName("status")]
    public int? Status { get; set; }
    
    [JsonPropertyName("id")]
    public string? Id { get; set; }
    
    public bool IsSuccess => !string.IsNullOrEmpty(Id);
}

You can do with the Id property as you like, this is LinkedIn’s unique identifier for the post.

Post Text with Link

The post text with link API is very similar to the post text API. The only difference is the addition of media object in the com.linkedin.ugc.ShareContent section of request. Here is the sample request.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
POST https://api.linkedin.com/v2/ugcPosts
Authorization: Bearer {{my-access-token}}
X-Restli-Protocol-Version: 2.0.0

{
    "author": "urn:li:person:{{my-person-id}}",
    "lifecycleState": "PUBLISHED",
    "specificContent": {
        "com.linkedin.ugc.ShareContent": {
            "shareCommentary": {
                "text": "LinkedIn has an AI Assisted Editor for posting articles."
            },
            "shareMediaCategory": "ARTICLE",
            "media": [
                {
                    "status": "READY",
                    "description": {
                        "text": "This is the description of the media."
                    },
                    "originalUrl": "https://www.josephguadagno.net/",
                    "title": {
                        "text": "Joseph Guadagno Website"
                    }
                }
            ]
        }
    },
    "visibility": {
        "com.linkedin.ugc.MemberNetworkVisibility": "PUBLIC"
    }
}

In the LinkedIn API Manager, a call is made to the PostTextWithLink method. The code is shown below.