How to set up your project solution for the first time

1. Install Xamo Toolkit extension from Visual Studio menu > Extensions > Manage Extensions. Make sure to restart Visual Studio for the extension to fully installed.
   

2. Install SQL Server (if not already). SQL Server Developer Edition works just fine. Create a user with sysadmin role (warning: only do this on the local instance) to make it easier to automate things. Make sure your server accepts mixed authentication. By default, it is Windows Authentication only.
   

3. Install IIS (if not already)
   

4. For Android: run your Android Virtual Device (AVD) or use your Android phone. For iOS: run a MacOS computer and connect to the local network as your development Windows machine. Make sure you install XCode and Visual Studio for Mac on your MacOS computer.
   

5. Run Visual Studio as Administrator. This important to create the IIS application for the web project. Create a new project and select Base UI.Kit with Offline Sync project template. This will create for you 4 projects ([App], [App].Android, [App].iOS, and [App].Web). [App] is the project name. THIS IMPORTANT: Give it a bit of time for the background tasks to finish. There is a lot of work running behind the scenes. This is especially true when this is the first time because a whole of the required packages is downloading and installing. Check the background tasks at the bottom left corner of Visual Studio. Required packages are only installed once so subsequent use will be much much faster.
   

6. Open the Web.config in the [App].Web project and update the username and password for the SQL connection you created above (step 2). <add name="DefaultConnection" connectionString="Data Source=.;Initial Catalog=Sportly.Web;User ID=web-agent; Password=secret-pwd" providerName="System.Data.SqlClient" /> Choose a username and password for the creator role and update the appSettings keys. This will be the credential that lets you log in to the Web Portal. <add key="CreatorEmail" value="[App].Web@xamotoolkit.com" /> <add key="CreatorInitialPassword" value="[App].Web" />
   

7. Build the [App].Web project and run it. If it complains about Roslyn.exe error, then clean, rebuild, and run again. You should see the Mobile home page that says "This mobile app is up and running". In the address bar, put in "/home" after the URL that is already there (i.e. https://192.167.1.100/home) and press Enter to access the back-end web portal. Use the username and password you updated in the Web.config (step 6) to log in. The first time the web portal runs it will create the database, the tables, and spawn the first user that is a prime role. Note: the web project needs to run first so that it can serve the API calls from the mobile app when it runs.
   

8. In the main [App] project, open the file Global.cs from Config folder (i.e. Config > Global.cs). Make sure the SERVICEURL has the correct IP address to your development (Windows) machine. If you created the project, the Xamo Toolkit will grab the correct IP Address but because most local IP addresses are dynamically assigned, it will change after a few days. This IP Address is important because this is the IP Address that is known by the Android Emulators, iOS Simulators, and UWP Local Machine, Note: You can't use the localhost because each of the Android Emulators, iOS Simulators, and Local Machine refers to itself. We want it to look for the IIS web application which can be referred to by the IP Address.
   

9. To run on an Android device or AVD: set the [App].Android as Startup Project (right-click [App].Android > Set as Startup Project). In the Visual Studio bar at the top, use the down arrow on the dropdown box to select the device and click on the green triangle (play) icon to run and debug. Note: You must run the AVD or plug in your Android phone for it to show up on the list.
   

10. To run on an iOS Simulator or iPhone: set the [App].iOS as Startup Project (right-click [App].iOS > Set as Startup Project). Then, click on the monitor icon that says "Pair to Mac" when you mouse over it. Then find and select the MacOS machine that matches your MacOS machine you run in step 4. If it is not in the list, click on Add Mac and enter the IP Address of the MacOS machine. Click Connect and let it do its thing. If successful, the monitor icon will turn green. In the Visual Studio bar at the top, use the down arrow on the dropdown box to select the device and click on the green play icon to run and debug. To run on the iPhone simulators, in the dropdown box where it says "Any CPU" choose iPhoneSimulators and click on the green triangle (play) icon to run and debug.