Getting Started: Integrate Frontend (Vite + Reactjs) with NetSuite

Integrating a Vite + React frontend with NetSuite means building your React app outside of NetSuite, compiling it into static files, uploading those files to the NetSuite File Cabinet, and serving them through a Suitelet using an inline HTML field.

NetSuite does not support NPM packages or dynamic imports inside its scripting environment. You cannot run a live Vite dev server inside NetSuite. The correct approach is to build your React app to a production bundle, deploy the output to the File Cabinet, and have a Suitelet render the compiled HTML.

This guide walks through the full process: Vite configuration, build output setup, File Cabinet deployment, Suitelet creation, and how to connect your React app back to NetSuite data via a RESTlet.

Step 1: Assess Your Project Requirements

Before diving into the setup process, take some time to assess your project requirements and choose the frontend framework that best fits your needs. Each framework has its strengths, and understanding your project’s specific demands will help you make an informed decision.

For instance:

React: Ideal for building reusable UI components and single-page applications.

Angular: A comprehensive framework suitable for large-scale enterprise applications.

Vue.js: A progressive framework offering simplicity and flexibility, perfect for smaller projects or incrementally adopting modern frontend technologies.

Today  Vite + React is the ultimate choice for Netsuite integration. Some of the most compelling reasons why developers favor this powerful combination:

• Blazing Fast Development
• Efficient Production Builds
• Seamless React Integration
• Optimized HMR (Hot Module Replacement)
• No Bundling for Development
• Support for TypeScript and JSX
• Optimized Asset Handling

Step 2: Setup Front-end Project and Create the UI

For this blog, I have a login page that looks like this.

Note: Use Hash routing because this app runs under NetSuite.

Step 2: Front-end Build configuration

Change the build folder location by moving it to the NetSuite file cabinet. This build will be used in the NS Script (Suitelet). Additionally, here are some configuration that I have done in Vite . 

Note: This configuration is specific to Vite + React. However, configurations may vary for different frameworks.

Single-File Build for NetSuite (Recommended)

The default Vite build produces multiple asset files with hashed names. NetSuite’s File Cabinet works best with a single self-contained HTML file that has JavaScript and CSS inlined. Use vite-plugin-singlefile to produce one file:

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

Update your vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { viteSingleFile } from 'vite-plugin-singlefile'

export default defineConfig({
  plugins: [react(), viteSingleFile()],
  base: './',
  build: {
    outDir: 'dist',
    assetsInlineLimit: 100000000,
    cssCodeSplit: false,
  }
})

Run npm run build. You get a single dist/index.html with all JavaScript and CSS inlined. Upload only this file to the File Cabinet. No additional asset paths to manage.

Why this matters for NetSuite: The File Cabinet does not support relative path resolution the way a web server does. A single self-contained file sidesteps all asset path errors that occur when multiple files reference each other after upload.

Step 3: Create Suiltelet Script in NetSuite

Now, let’s move on to NetSuite. We will create a form using Suitelet and add an inline HTML field to the form. After that, we will retrieve the index.html file from the Build Folder and insert it into the inline HTML field. Let’s see how things work.

Step 4: Deploy the NetSuite Project

After deployment, change the permissions of the frontend files in the Build Folder. Edit the files and mark the checkbox “Available without login” as true. 

How Your React App Communicates With NetSuite Data

Your React app runs in the browser. To read or write NetSuite data, it calls a RESTlet you deploy on the NetSuite side. RESTlets are SuiteScript 2.x scripts that expose custom REST endpoints — they accept HTTP GET, POST, PUT, and DELETE requests and return JSON.

Here is a minimal RESTlet example that returns a list of customers:

/**
 * @NScriptType Restlet
 * @NApiVersion 2.x
 */
define(['N/search'], function(search) {
  function get(params) {
    var results = [];
    search.create({
      type: search.Type.CUSTOMER,
      filters: [],
      columns: ['internalid', 'entityid', 'email']
    }).run().each(function(result) {
      results.push({
        id: result.getValue('internalid'),
        name: result.getValue('entityid'),
        email: result.getValue('email')
      });
      return true;
    });
    return JSON.stringify(results);
  }
  return { get: get };
});

Deploy this as a RESTlet Script in NetSuite. Copy the deployment URL. In your React app, call it using fetch():

const response = await fetch('/app/site/hosting/restlet.nl?script=YOUR_SCRIPT_ID&deploy=1', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  }
});
const data = await response.json();

Authentication note: RESTlet calls from a Suitelet-hosted React app inherit the current user’s NetSuite session. No separate OAuth token is needed when the React app is served via a Suitelet in the same NetSuite session. If you call the RESTlet from an external app (outside NetSuite), you need Token-Based Authentication (TBA/OAuth 1.0).

Common Errors and How to Fix Them

White screen after upload This usually means your asset paths are broken. The File Cabinet does not resolve relative paths like a web server. Use the single-file approach above to eliminate this problem entirely.

“Hash routing is required” — why React Router’s default browser history mode tries to use URL paths like /dashboard or /settings. NetSuite’s Suitelet URL does not support these paths — it uses a fixed URL with query parameters. Hash routing (/#/dashboard) keeps all routing in the fragment part of the URL, which NetSuite ignores. This is why createHashRouter or HashRouter is required.

import { HashRouter } from 'react-router-dom';

function App() {
  return (
    <HashRouter>
      {/* your routes here */}
    </HashRouter>
  );
}

CSS not loading If you are using multiple output files (not single-file), you need to update the <link> tag in index.html to point to the correct File Cabinet path before uploading. With the single-file approach, CSS is inlined and this issue does not arise.

Suitelet shows raw HTML instead of rendered app This happens when the field type is not set to INLINE_HTML. Double-check this line in your Suitelet:

var htmlField = form.addField({
  id: 'custpage_html',
  type: serverWidget.FieldType.INLINEHTML,
  label: 'App'
});

Step 4: That’s It!

Open the Suitelet and see your frontend app in action!

Conclusion

In short, when we bring together Vite + React with Netsuite, we’re opening the door to a fresh way of making apps. It’s like combining fast building with strong, user-friendly designs. With Vite’s quick way of working and React’s skill at making good-looking screens, NetSuite projects can become more modern, making apps that people love to use and look at. This joining not only makes apps better for users but also helps Netsuite stay strong in a world that’s always changing. So, by putting Vite + React into Netsuite, we’re making a smart plan for creating cool solutions that fit right into the Netsuite world.

FAQs

Can you host a React app in NetSuite?

Yes. Build your React app with Vite, upload the compiled output to the NetSuite File Cabinet, and serve it through a Suitelet using a INLINEHTML field. The app runs in the browser but is served from NetSuite’s infrastructure.

Why use Vite with NetSuite instead of Create React App or Webpack?

Vite produces faster builds, supports ES modules natively, and integrates cleanly  vite-plugin-singlefile to generate a single self-contained HTML file. This single-file output is the most reliable way to deploy to the NetSuite File Cabinet without asset path errors.

Why is Hash routing required for React in NetSuite?

NetSuite Suitelets use a fixed URL with query parameters. Browser history routing in React Router requires the server to handle all routes and return the same HTML — NetSuite cannot do this. Hash routing keeps all navigation in the URL fragment (#/route), which the Suitelet URL ignores, allowing React Router to handle all routing client-side.

How does a React app call NetSuite data?

Through RESTlets. A RESTlet is a SuiteScript 2.x script deployed on your NetSuite account that exposes an HTTP endpoint. Your React app calls the RESTlet URL using fetch(). When the app is hosted via a Suitelet, the call inherits the current user’s NetSuite session and no separate authentication is needed.

What is vite-plugin-singlefile and why is it useful for NetSuite?

It is a Vite plugin that bundles your entire React app — JavaScript, CSS, and HTML — into one self-contained index.html file. This removes all relative asset path dependencies, which is important because the NetSuite File Cabinet does not behave like a standard web server.

Can I use TypeScript with Vite + React in NetSuite?

Yes. Run npm create vite@latest my-app -- --template react-ts to scaffold a TypeScript project. The build process is identical. TypeScript adds type safety to your SuiteScript integration code, which is particularly useful when typing RESTlet response shapes.