Can i get/use the Modern Experience Interface + the Current Site Navigation, inside my SharePoint Hosted Add-in

Question

I am working on a SharePoint online team site collection. and i want to build a SharePoint hosted App to do some CRUD operations on a list. so i follow somehow the same steps shown in this link:-

https://www.c-sharpcorner.com/article/rest-crud-operations-using-sharepoint-hosted-app-office-365-part-two/

but i have the following question about the result i got:-

1. i deploy the SP hosted app inside a site collection which is using the modern interface, but the result i got inside the Default.aspx for my App is as follow:-

where the App got rendered inside the classic interface and not inside the modern interface + the site navigation (Quick Edit links) disappeared. so my question is if i can show the app inside the modern interface and to show the site navigation?

So can anyone advice on my above 2 question ?

Thanks in advance

Answer 1

As far as i know (i might be wrong), there are no SP Addins for modern sharepoint (provider hosted doesnt count). So...if you want your app inside the modern view layout you will need to create a webpart ->

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part

I heard someone say that a sharepoint hosted addin can be used in modern site, but i never tried it and i'm not sure it works (the guy that told me about this said it would be like a webpart so i dont see the point on making workarounds when i could simply create a webpart designed specifically for modern SPO).

For the webparts you can use React and you will surely be able to create whatever you want, but there's a catch...You should use React + SPFX (react is not needed as you can use any framework, but i recommend it since its the way Modern Sharepoint is built)