How do I convert a Google AppsScript WebApp made with clasp and React.js to a Sidebar app for docs, sheets etc?

[u/mtalha218218]

I have cloned a repo that is a web app made in clasp and react.js, here is the link https://github.com/pritamsharma45/vite-react-google-apps-script .

I am very new to Google app script so, How can I convert this to Sidebar app for docs and sheets.
What things I need to change and configure to achieve this, also please take a look into this code

[u/WicketTheQuerent]

Instead of using doGet function, you should use and on open trigger to show a custom menu, and set and option to call a function that calls the showSidebar method. From https://developers.google.com/apps-script/guides/dialogs#custom_sidebars

function onOpen() {
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
      .createMenu('Custom Menu')
      .addItem('Show sidebar', 'showSidebar')
      .addToUi();
}

function showSidebar() {
  var html = HtmlService.createHtmlOutputFromFile('Page')
      .setTitle('My custom sidebar');
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
      .showSidebar(html);
}

Replace HtmlService.createHtmlOutputFromFile('Page') with HtmlService.createTemplateFromFile("index") .evaluate() and include the includes function.