/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, {})
  })) : _createMdxContent();
  function _createMdxContent() {
    const _components = Object.assign({
      p: "p",
      strong: "strong",
      a: "a",
      img: "img",
      h2: "h2",
      h3: "h3",
      ul: "ul",
      li: "li",
      ol: "ol",
      code: "code",
      blockquote: "blockquote",
      pre: "pre",
      span: "span"
    }, props.components);
    return _jsxs(_Fragment, {
      children: [_jsx(_components.p, {
        children: "I always wanted to get more into .NET programming as together with Typescript it is one of my favourite languages as it is flexible and more importantly allows for cross-platform development. Finally, it is adopting a more simplified syntax as well which is coming in .NET 7."
      }), "\n", _jsxs(_components.p, {
        children: ["For cross platform mobile app development, .NET had Xamarin and Xamarin.Forms which allowed us to create mobile apps easily. However, some things were lacking (such as Desktop support) and it was more of a standalone product that was not integrated in the .NET BCL (Base Class Library). Which is why Microsoft decided to rewrite the entire approach and name it ", _jsx(_components.strong, {
          children: "MAUI"
        }), " (", _jsx(_components.a, {
          href: "https://ballardchalmers.com/2021/10/04/what-is-net-maui-and-how-does-it-differ-from-xamarin/",
          children: "more info can be found here"
        }), " - Thanks ", _jsx(_components.a, {
          href: "https://twitter.com/CliffordAgius",
          children: "Clifford"
        }), " for the amazing write up!)"]
      }), "\n", _jsx(_components.p, {
        children: _jsx(_components.img, {
          src: "./architecture.png",
          alt: ""
        })
      }), "\n", _jsxs(_components.p, {
        children: ["You can view a ", _jsx(_components.a, {
          href: "https://github.com/dotnet/maui/wiki/roadmap",
          children: "detailed roadmap of MAUI here"
        })]
      }), "\n", _jsx(_components.p, {
        children: "So let's get started and create a mobile application!"
      }), "\n", _jsx(_components.h2, {
        children: "Getting Started"
      }), "\n", _jsx(_components.h3, {
        children: "Prerequisites"
      }), "\n", _jsxs(_components.ul, {
        children: ["\n", _jsx(_components.li, {
          children: "XCode (Make sure to start it once to accept the EULA)"
        }), "\n", _jsxs(_components.li, {
          children: ["XCode Terminal Tool", "\n", _jsxs(_components.ul, {
            children: ["\n", _jsx(_components.li, {
              children: "If dotnet doesn't build, check if it is set by opening Xcode -> Preferences -> Locations -> Command Line Tools and ensure it is set."
            }), "\n"]
          }), "\n"]
        }), "\n", _jsx(_components.li, {
          children: "Android Studio"
        }), "\n", _jsxs(_components.li, {
          children: ["Visual Studio 2022 Preview (7+) for Mac", "\n", _jsxs(_components.ul, {
            children: ["\n", _jsx(_components.li, {
              children: "Mac sure to install iOS, Android and macOS tools"
            }), "\n"]
          }), "\n"]
        }), "\n"]
      }), "\n", _jsx(_components.h3, {
        children: "Installing MAUI"
      }), "\n", _jsxs(_components.ol, {
        children: ["\n", _jsxs(_components.li, {
          children: ["Go to the dotnet website and ", _jsx(_components.a, {
            href: "https://dotnet.microsoft.com/en-us/download/dotnet",
            children: "download and install the latest dotnet LTS version"
          }), "\n", _jsxs(_components.ul, {
            children: ["\n", _jsxs(_components.li, {
              children: ["Make sure ", _jsx(_components.code, {
                children: "dotnet --list-sdks"
              }), " shows it is installed under ", _jsx(_components.code, {
                children: "/usr/local/share/dotnet/sdk"
              })]
            }), "\n"]
          }), "\n"]
        }), "\n", _jsxs(_components.li, {
          children: ["Once installed, install maui by running ", _jsx(_components.code, {
            children: "dotnet workload install maui"
          })]
        }), "\n"]
      }), "\n", _jsxs(_components.blockquote, {
        children: ["\n", _jsxs(_components.p, {
          children: ["Warning: Do not install dotnet through brew as this will render you ", _jsx(_components.a, {
            href: "https://github.com/dotnet/maui/issues/5939",
            children: "unable to install maui correctly on mac"
          })]
        }), "\n"]
      }), "\n", _jsx(_components.h2, {
        children: "Creating and Running your App"
      }), "\n", _jsx(_components.h3, {
        children: "Create your App"
      }), "\n", _jsxs(_components.ol, {
        children: ["\n", _jsxs(_components.li, {
          children: ["Create a directory with ", _jsx(_components.code, {
            children: "mkdir mobile-app"
          })]
        }), "\n", _jsxs(_components.li, {
          children: ["Create a maui app with ", _jsx(_components.code, {
            children: "cd mobile-app; dotnet new maui"
          })]
        }), "\n"]
      }), "\n", _jsx(_components.h3, {
        children: "Get Device Identifier"
      }), "\n", _jsx(_components.p, {
        children: "If we would try to run our application, we would get the error as shown below:"
      }), "\n", _jsx(_components.p, {
        children: _jsx(_components.img, {
          src: "./vs-error.png",
          alt: ""
        })
      }), "\n", _jsx(_components.p, {
        children: "To resolve this, we should do another thing, which is to get our Device Identifier that we will use to target our device. So follow these steps:"
      }), "\n", _jsxs(_components.ol, {
        children: ["\n", _jsx(_components.li, {
          children: "Open up Xcode"
        }), "\n", _jsx(_components.li, {
          children: "Go to Window"
        }), "\n", _jsx(_components.li, {
          children: "Devices and Simulators"
        }), "\n", _jsx(_components.li, {
          children: "Select your Device"
        }), "\n", _jsx(_components.li, {
          children: "Right Click"
        }), "\n", _jsx(_components.li, {
          children: "Copy Identifier"
        }), "\n"]
      }), "\n", _jsx(_components.p, {
        children: "Now run the command below with your identifier:"
      }), "\n", _jsx(_components.pre, {
        className: "language-bash",
        children: _jsx(_components.code, {
          className: "language-bash code-highlight",
          children: _jsxs(_components.span, {
            className: "code-line",
            children: ["dotnet build -t:Run -f net6.0-ios -p:", _jsx(_components.span, {
              className: "token punctuation",
              children: "\\"
            }), "_DeviceName", _jsx(_components.span, {
              className: "token operator",
              children: "="
            }), ":v2:udid", _jsx(_components.span, {
              className: "token operator",
              children: "="
            }), "4C4906B6-B3DB-490A-A322-8153E2DBCA85\n"]
          })
        })
      }), "\n", _jsx(_components.p, {
        children: "If it opens up the simulator, you can close it again."
      }), "\n", _jsx(_components.h3, {
        children: "Run your App"
      }), "\n", _jsx(_components.p, {
        children: "Now we can open our app with Visual Studio."
      }), "\n", _jsx(_components.p, {
        children: "If you were able to run all the steps above, you should now be able to see an interface that looks like the below:"
      }), "\n", _jsx(_components.p, {
        children: _jsx(_components.img, {
          src: "./vs-overview.png",
          alt: ""
        })
      }), "\n", _jsx(_components.p, {
        children: "When we now click the big Play button on the top, the simulator will start and we will be able to start working on our application! Including Hot-Reload of the XAML interface, so each change we make will be reflected in the simulator"
      }), "\n", _jsx(_components.p, {
        children: _jsx(_components.img, {
          src: "./vs-working.png",
          alt: ""
        })
      }), "\n", _jsx(_components.h2, {
        children: "Conclusion"
      }), "\n", _jsx(_components.p, {
        children: "That's it! See how simple it is to start creating your cross platform mobile application using .NET."
      })]
    });
  }
}
return {
  default: MDXContent
};


Learn how you can create a cross platform working mobile application utilizing MAU and the .NET ecosystem

Xavier Geerinck

Creating a Cross Platform Mobile App with Maui .NET on Mac M1

Are you struggling with testing and integrating AI into your product?

Are you struggling with testing and integrating AI into your product?