How to create a React-JS application and host it on the NetSuite file cabinet

We can use the ‘Vite.js’ development tool for creating a React-JS application and deploying it to the NetSuite file cabinet.

To install Vite, use the command in CMD:

npm install -g create-vite

To create a new Vite react project(replace ‘project-name’ with actual project name):

npm init vite@latest project-name template react

You will be able to select the framework (react) and variant(typescript) executing the previous command. Make sure the necessary node modules are installed. From the project folder, execute the following commands:

npm install moduleName

To run and test the application locally use the command:

npm run dev

Once testing is completed and sufficient changes are added use the following command to build the project files for deployment:

npm run build

Before uploading the files to the NetSuite file cabinet, rename the ‘index.js’ and ‘style.css’ files inside the assets directory to remove the number suffix(‘index-123456.js’ to ‘index.js’, and ‘style-123456.css’ to ‘style.css’)

Inside the ‘index.html’ file, replace the path for the ‘index.js’ and ‘style.css’ using the URL field values obtained from the file records of ‘index.js’ and ‘style.css’

<script type="module" crossorigin src="https://4095715-sb1.app.netsuite.com/core/media/media.nl?id=18262973&c=XXXXX_SB1&h=XXXXXXXXXXX_xt=.js"></script>
<link rel="stylesheet" href="https://4095715-sb1.app.netsuite.com/core/media/media.nl?id=18262975&c=XXXXXX_SB1&h=XXXXXXXXXXXX_xt=.css">

Now upload the build files(asset directory files and index.html file) to the NetSuite file cabinet. The app will be visible on clicking the ‘index.html’ file URL. The app can be made accessible without login by setting the ‘AVAILABLE WITHOUT LOGIN’ checkbox in the ‘index.html’, ‘index.js’, and ‘style.css’ file records.