React App Setup

When building custom UI solutions for NetSuite Suitelets using React, you can't rely on dynamic NPM imports or runtime builds—NetSuite's environment doesn't support it. To integrate a React app into a Suitelet, it must be delivered as a single, self-contained HTML file that includes all JavaScript and CSS inline. This way, the app can be stored in the NetSuite File Cabinet and served directly to users via a Suitelet.

Vite, a modern frontend build tool, is perfect for this kind of task. It's fast, supports React out of the box, and allows for fine-grained build customization. By combining Vite with a plugin like vite-plugin-singlefile, we can generate a completely self-contained HTML file—no extra assets, no extra requests.

Creating a single-file React app with Vite for NetSuite deployment

Follow these steps to create a single-file React app using Vite for NetSuite deployment:

1. Run the following to set up a new React project. This sets up a basic React project with bare bones.

npm create vite@latest my-netsuite-react-app -- --template react
cd my-netsuite-react-app
npm install

2. Add the Vite single-file package.

npm install vite-plugin-singlefile --save-dev

3. Modify your Vite config to add the Vite single-file plugin.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { viteSingleFile } from "vite-plugin-singlefile";
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
 plugins: [react(), viteSingleFile(), tailwindcss()],
});

4. Now you can run npm run build, and you should get a single index.html file at your /dist/index.html

Congrats you have completed the first step of building a react suitlet in NetSuite

Related Article: React Suitelet Documentation

Got stuck on a step in this article?

We like to update our blogs and articles to make sure they help resolve any troubleshooting difficulties you are having. Sometimes, there is a related feature to enable or a field to fill out that we miss during the instructions. If this article didn't resolve the issue, please use the chat and let us know so that we can update this article!

Oracle NetSuite Alliance Partner & Commerce Partner

If you have general questions about SuiteCommerce or more specific questions about how our team can support your business as you implement NetSuite or SuiteCommerce, feel free to contact us anytime. Anchor Group is a certified Oracle NetSuite Alliance Partner and Commerce Partner equipped to handle all kinds of NetSuite and SuiteCommerce projects, large or small!

We are a premium SuiteCommerce agency that creates powerful customer portals. Unlike our competitors, we have already solved your problems.