Creating multi site using Sitecore JSS

Based on recent development on Sitecore JSS with Multisite, if each site has its own JSS App, then your setup will be as follows:

What will be the value for "layoutServiceHost" and "deployUrl" since we will be using same sitecore instance for both the apps

Site A

layoutServiceHost": "https://abc-single-azurewebsites.net"
deployUrl": "https://abc-single-azurewebsites.net/sitecore/api/jss/import"
ApiKey : Created api key in sitecore
DeploySecret : auto generated

Site B

layoutServiceHost": "https://xyz-single-azurewebsites.net"
deployUrl": "https://xyz-single-azurewebsites.net/sitecore/api/jss/import"
ApiKey : Created api key in sitecore
DeploySecret : auto generated

The reason of setting up the layoutServiceHost to the URL of the site is because when Sitecore will try to resolve the Site Context, it will check the URL. The URL is use because the there are no sc_site querystring. If you set it up on the same URL as Site A, when you will load connected graphql from Site B, it will not resolve to the proper Site Context.

You may have more information at those 2 articles written by my colleague

• JSS with SXA
• JSS Multisite

For multi site should we add another app service in azure or should we add another url to the existing app service

Since you are using the same Sitecore instance, you can just add the url to the existing app service so that it use the same Sitecore instance.