Build your first app

Important

This project is an experimental release. We hope you try out Experimental Maui Blazor Bindings and provide feedback at https://github.com/Dreamescaper/BlazorBindings.Maui.

The easiest way to get started with Experimental Maui Blazor Bindings is to install and create the initial project from the command line.

Note

If you have not yet done so, check the pre-requisites and template installation instructions.

  1. Open a command prompt or shell window

  2. Create your project by running this command:

    dotnet new mobileblazorbindings -o FirstMobileBlazorBindingsApp

    This will create a folder named FirstMobileBlazorBindingsApp with the solution file (SLN) and three projects in sub-directories:

    1. FirstMobileBlazorBindingsApp/FirstMobileBlazorBindingsApp.csproj - this is the shared project that will contain the UI and logic of your mobile application.
    2. FirstMobileBlazorBindingsApp.Android/FirstMobileBlazorBindingsApp.Android.csproj - this is the "backend" project for targeting Android devices. On Windows or Mac you can run this project to launch the app in the Android Emulator.
    3. FirstMobileBlazorBindingsApp.iOS/FirstMobileBlazorBindingsApp.iOS.csproj - this is the "backend" project for targeting iOS devices. On Mac you can run this project to launch the app in the iOS Simulator. On Windows you can run it as well if you have a Mac that is paired.

  3. You are now ready to open the solution in Visual Studio. To open the solution you can double-click the SLN file on your disk, or you can first open Visual Studio 2019, select File / Open / Project/Solution, and then navigate to the new folder you created and select FirstMobileBlazorBindingsApp.sln. The solution in Visual Studio should look like this:

    Solution Explorer with all 3 projects

  4. To run the project, you'll need to set one of the "backend" projects as your startup project. In Solution Explorer, right-click on the Android or iOS project and select Set as StartUp Project.

    Set startup project in Solution Explorer

  5. Press F5 to launch the project in the emulator with the debugger attached (or press Ctrl+F5 to run without the debugger)

    • Tip: If you want to run the iOS project on the iOS Simulator, ensure that you select the iPhoneSimulator target from the Visual Studio toolbar instead of iPhone.

  6. Your first application will launch in an emulator or on a device and look like this:

    Hello World running in the Android Emulator

  7. Congratulations, you've created and run your first Experimental Maui Blazor Bindings app!

Tip

If you're experiencing a problem, refer to the troubleshooting guide.

Tip

See the advanced template options topic for more options when creating a new project.

Next steps