Note*
To enable users to install SPFx Modern Theming Solutions (client-side-solutions) for SharePoint in their sites, you must configure your environment to support apps.
In order to perform this step you need to be a member of the Farm Administrators group of SharePoint 2019 server.

1. Click Start, point to Administrative Tools and click DNS to open DNS Manager.

2. In DNS Manager, right-click Forward Lookup Zones, and then click New Zone…. to start the New Zone Wizard

3. In the Zone Type section, make sure the default Primary zone is selected, and then click Next.

4. In the Active Directory Zone Replication Scope, select the suitable replication method for your environment, and then click Next.

5. For Zone Name type the name for your new app domain name (e.g. yourDomain.localApps), and then click Next.

   

6. For Dynamic Update page, select the right type of dynamic updates for your environment, and then click Next.

7. On the Completing the New Zone Wizard section, review the settings, and then click Finish. This will create a new forward lookup zone (e.g. yourDomain.localApps) under Forward Lookup Zones.

   

8. In DNS Manager, under Forward Lookup Zones, right-click the new app domain name (e.g. yourDomain.localApps), and then click New Alias (CNAME).

9. In the New Resource Record dialog box, for Alias name (uses parent domain if left blank), type *.
10. The Fully qualified domain name (FQDN) box displays *. followed by the domain name that you created for apps .(e.g. *.yourDomain.localApps)

11. For Fully qualified domain name (FQDN) for target host, click Browse and navigate to the Forward Lookup Zone for the domain that hosts the SharePoint Server sites. (e.g. yourDomain.com), and then navigate to the record that points to the server that hosts the SharePoint Server site.

    e.g.
    SharePoint2019 (server name)

12. New Resource Record dialog box shows the wildcard alias for the app domain and the FQDN of the server that hosts the SharePoint sites.

    

13. Click OK.

14. Verify the new domain name and alias by pinging them.

15. At the command prompt, type ping followed by a subdomain of the domain that you created, and then press ENTER.

    e.g.
    ping Apps-123ABC.yourDomain.localApps

If the ping command returns the correct IP address, then your wildcard for the domain name was configured successfully.



 

Note*
In order to perform this step you need to be a member of the Farm Administrators group of SharePoint 2019 server.

1. Select Start and open SharePoint 2019 Central Administration

   

2. In Central Administration, under System Settings, click Manage services in this farm.

   

3. For the Microsoft SharePoint Foundation Subscription Settings Service, click Enable Auto Provision.

   

4. Run the SharePoint 2019 Management Shell as Administrator (right-click on the icon).

   

5. Create a Subscription Settings service application and proxy by executing following commands one at a time:

$sa = New-SPSubscriptionSettingsServiceApplication -ApplicationPool 'SharePoint Web Services Default' -Name 'Subscriptions Settings Service Application' -DatabaseName 'Subscription'

New-SPSubscriptionSettingsServiceApplicationProxy -ServiceApplication $sa

*At the end of the two commands above, you should see the DisplayName, TypeName, and ID:



To verify if the Subscription Settings service application and proxy have been created, navigate to Central Administration, click Manage service applications under Application Management, and check if two entries shown below exist.

Important Note*

You also need to create an App Management service application if it is not already present in the list of Service Applications.


1. In Central Administration, under Application Management, click Manage service applications.

2. Click New, and then click App Management Service.

3. Specify a name for the service application in the Service Application Name box.

4. Under Application Pool, choose SharePoint Web Services Default. Click OK.

 

Note*
In order to perform this step you need to be a member of the Farm Administrators group of SharePoint 2019 server.

1. In Central Administration, on the Apps page, in the App Management section, click Configure App URLs.

   

2. In the Configure App URLs form, specify App domain (the same you have created in step 1), and App prefix (app is recommended).

   

3. In the App Management section, click Manage App Catalog. If no App Catalog exists for the farm, the Web Application page opens.

4. On the Web Application page, select the web application for which you want to create a catalog. Next select Create a new app catalog site and click OK.

5. On the Create App Catalog page, specify title for the App Catalog site, type the description for the site, and the URL to use for the site. In the Primary Site Collection Administrator section, specify the user who will manage the catalog.



6. In the End Users section, type the names of the users or groups that you want to be able to browse the catalog. Added users or groups have read access to the App Catalog site. You can add multiple user names and security groups. Users must be added as End Users to be able to browse the App Catalog from their site collections.

7. In the Select a quota template list box, select the quota template to use for the site. Click OK.

8. Once the site has been created, a link to it is available on the Manage App Catalog page in Central Administration.

   

9. Make sure that the App Catalog is shared with users or groups that you want to be able to add apps (SPFx client-side solutions) to their sites.

 

To make the solutions available for installation:

1. Navigate to your App Catalog site.

   e.g.
   https://sharepoint2019/sites/apps/

2. On the home page of the App Catalog site, select the tile labeled Distribute apps for SharePoint.



3. Select New and browse to the extracted YourPackage.zip > SPFx_Solutions > SP2019 folder.

4. Upload theMT-Modern-OnPrem-01.sppkg andMT-Modern-OnPrem-02.sppkg files, or drag them into the library one-by-one.

5. When prompted, confirm that you trust the client-side solution MT-Modern-OnPrem-01.sppkg, and MT-Modern-OnPrem-02.sppkg by selecting Deploy for each of them separately.

6. 
7. Click the Properties icon for the MT-Modern-OnPrem-01 app to open the Properties Dialog form.


8. In the Properties Dialog form enter:

9. For Short Description enter:
   "Modern Duotones" SPFx theming solution for SharePoint modern sites.

   For Icon URL you use:
   https://sharepointpackages.com/images/images-MT_WP/app_icons/MT-App_Icon1.png

   
   Note:
   The app icon image shown above is enclosed in your theme package > App_Icon folder. You can upload it to your preferred location and reference the URL to the icon in the icon URL field accordingly.

10. For Type the description enter:
    "Modern Duotones" SPFx theming solution for SharePoint modern sites from MasterThemes Inc.

11. For Publisher Name enter:
    MasterThemes Inc.

12. Make sure the Enabled check box is selected so that users are able to add this app to sites.



13. Click Save.

Now change properties for the MT-Modern-OnPrem-02.sppkg app:

14. Click the Properties icon for the MT-Modern-OnPrem-02 app to open the Properties Dialog form.


15. In the Properties Dialog form enter:

16. For Short Description enter:
    "Modern Monotones" SPFx theming solution for SharePoint modern sites.

    For Icon URL you use:
    https://sharepointpackages.com/images/images-MT_WP/app_icons/MT-App_Icon2.png

    
    Note:
    The app icon image shown above is enclosed in your theme package > App_Icon folder. You can upload it to your preferred location and reference the URL to the icon in the icon URL field accordingly.

17. For Type the description enter:
    "Modern Theme" SPFx solution for top level sites from MasterThemes Inc.

18. For Publisher Name enter:
    MasterThemes Inc.

19. Make sure the Enabled check box is selected so that users are able to add this app to sites.



20. Click Save.

Important Note*
You will not be able to perform this step using System Administrator Account. To Add an app to your site (SPFx modern theming solution), logon as a different user than System Administrator.

1. In your browser navigate to the site collection you want to install the SPFx Modern Theme app (SPFx client-side solution).

2. Open the settings menu by clicking the gears icon on the top navigation bar, and then select Add an app to go to your Apps page.

3. In the Search box, enter MT-Modern-OnPrem, and press Enter to filter your apps.



As a result, 2 apps should match your search: MT-Modern-OnPrem-01 (Modern Duotones), and MT-Modern-OnPrem-02 (Modern Monotones).

4. Select ether the MT-Modern-OnPrem-01 (Modern Duotones) or MT-Modern-OnPrem-02 (Modern Monotones) to install the solution for your modern site.



5. To check if the solution is installed on your site, wait a while and refresh your page (F5).