There are three kinds of SharePoint Add-ins: SharePoint-hosted, Provider-hosted and SharePoint Framework. To decide about a better way to develop your scenario, you have to understand what each type of SharePoint Add-ins has in common/support.
| SharePoint Hosted | Provided Hosted | SharePoint Framework |
| No server-side code | Server-side code can be done | No server-side code |
| Runs in the context of the current user | Runs in the context of the current user or app | Runs in the context of the current user and connection in the browser |
| The controls are rendered in an iFrame | The controls are rendered in an iFrame | There are no iFrames for the customization (JavaScript is embedded directly to the page) |
| Centered around SharePoint components | Centered around a remote web application or data source | Centered around SharePoint components |
| The controls are not responsive by nature | The controls are not responsive by nature | The controls are responsive by nature |
| Microsoft toolchain, such as Visual Studio | Microsoft toolchain such as Visual Studio | A toolchain is based on common opensource client development tools, such as npm, TypeScript, Yeoman, web pack, and gulp. |
| Performance is not reliable | Performance is not reliable | Performance is reliable |
- Create an Azure site.
- Create required App folders.
- Go to Azure web site.
- Click on the Configure link in the top navigation for the web site.
- Scroll to the bottom of the page and enter the values for your new virtual paths, as shown below.

Note
Make sure you check the application checkbox.
- Register your apps using the appregnew.aspx page, as shown below.

Note
Here, I am adding my virtual directory subfolder name (App1 and App2) after the Azure website URL.
- Your app manifest file should look like this.

Note
Here, I am adding my virtual directory subfolder names (App1 and App2) after ~remoteAppUrl. If you don’t have Remote Event Receiver in your app, you do not need to configure InstalledEventEndpoint and UninstallingEventEndpoint.
- Publishing configuration (App Web Project) should be something like this.

Note
Here, I am adding my virtual directory subfolder names (App1 and App2) after site name.
- Finally, the app package configuration should be like this.

Note
Here, I am not adding my virtual directory subfolder names (App1 and App2).
I hope the posts will give back a little to the community that has helped me. Please let me know if you have any questions.

Rushi MehtaPosted Feb 22, 2019, 2:10 AM
Nice Arcticle