React JS and Suitelet

Question

I created a React JS application.

How can I execute this on NetSuite Suitelet? Can you provide some examples? Thanks!

Here's a sample of index.js and App.js file I want to show on my Suitelet.

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';

import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

App.js

import Todo from './components/Test';

function App() {
  return (
    <div>
      <h1>Test</h1>
      <Test text='Test Project' />
    </div>
  );
}

export default App;

Answer 1

Here's an example where the whole page content is the react app. Note that this uses configurator_root instead of root:

/**
 *@NApiVersion 2.x
 *@NScriptType Suitelet
 */
define(["N/search", "N/ui/serverWidget"], function (search, ui) {

    function getFileURL(filename) {
        var fileURL = null;
        search.create({
            type: 'file',
            filters: [
                ['name', 'is', filename]
            ],
            columns: [
                'url'
            ]
        }).run().each(function (ref) {
            fileURL = ref.getValue({ name: 'url' });
            return false;
        });
        return fileURL;
    }


    function onRequest(context) {
        var request = context.request;
        var response = context.response;
        var form = ui.createForm({
            title: 'Embedded Configurator Configurator'
        });
        var wrapper = form.addField({
            id: 'custpage_wrapper',
            type: ui.FieldType.INLINEHTML,
            label: 'na/'
        });
        var scriptFileName = 'kotn-configurator-app.js'; // a unique name somewhere in your Netsuite file cabinet
        var scriptURL = getFileURL(scriptFileName);
        var cssFileName = 'kotn-configurator.css'; // a unique name somewhere in your Netsuite file cabinet
        var styleURL = getFileURL(cssFileName);
        wrapper.defaultValue = '<div id="configurator_wrap"><div id="configurator_root"></div>\n' +
            (styleURL ? '<link rel="stylesheet" href="' + styleURL + '"/>\n' : '') +
            '<script type="text/javascript" src="' + scriptURL + '"></script>' +
            '</div>';
        context.response.writePage(form);
        return;
    }
    return {
        onRequest:onRequest
    };
});

Note that your bundler shouldn't emit any chunks for this app since the files in Netsuite's file cabinet won't have a hash parameter