create-netsuite-react-app

# create-netsuite-react-app 🚀 Create production-ready NetSuite React applications with TypeScript, Vite, and Token-Based Authentication (TBA) support. ## Features - ⚛️ **React 18 + TypeScript** - Modern development with full type safety - 🔐 **Token-Based Authentication** - Secure OAuth 1.0a for NetSuite API access - 🔄 **Development Proxy Server** - Local development with live NetSuite data - ⚡ **Vite Build System** - Lightning-fast HMR and optimized builds - 📦 **SuiteCloud Ready** - Pre-configured for NetSuite deployment - 🛠️ **Complete Script Library** - Templates for all NetSuite script types - 🎨 **Modern UI** - Responsive design with inventory lookup example ## Quick Start Create a new NetSuite React app in seconds: ```bash npx create-netsuite-react-app@latest my_app_name cd my_app_name npm install ``` ## Setting Up Live NetSuite Data Access Follow these steps to connect your local development environment to real NetSuite data: ### Step 1: Configure NetSuite Credentials ```bash # Copy the environment template cp env.template .env.local ``` Edit `.env.local` with your NetSuite credentials: ```env # Your NetSuite Account ID (format: 1234567_SB1 for sandbox, 1234567 for production) NS_ACCOUNT_ID=1234567_SB1 # Script and deployment IDs NS_SCRIPT_ID=customscript_ns_react_app_template NS_DEPLOY_ID=customdeploy_ns_react_app_template # Token-Based Authentication - From Integration Record NS_CONSUMER_KEY=your_consumer_key_here NS_CONSUMER_SECRET=your_consumer_secret_here # Token-Based Authentication - From Access Token NS_TOKEN_KEY=your_token_key_here NS_TOKEN_SECRET=your_token_secret_here # Proxy Configuration PROXY_PORT=3001 VITE_USE_PROXY=true VITE_DEV_PROXY_PORT=3001 ``` ### Step 2: Create NetSuite Integration #### In NetSuite: 1. **Create Integration Record** ``` Setup > Integrations > Manage Integrations > New ``` - Name: `React Dev Integration` - State: `Enabled` - Token-Based Authentication: `✓ Check` - Save and copy the **Consumer Key/Secret** 2. **Create Access Token** ``` Setup > Users/Roles > Access Tokens > New ``` - Application: Select your integration from Step 1 - User: Your NetSuite user - Role: Developer or appropriate role with item permissions - Save and copy the **Token Key/Secret** 3. **Add credentials to `.env.local`** ### Step 3: Deploy the Suitelet to NetSuite Build and deploy the application: ```bash # Build the React app npm run build # Deploy using SuiteCloud Extension in VS Code # Or use SuiteCloud CLI: suitecloud project:deploy ``` ### Step 4: Start Development ```bash # Install proxy dependencies (first time only) cd dev-proxy && npm install && cd .. # Start development with live NetSuite data npm run dev ``` This starts: - React dev server at `http://localhost:5173` - Proxy server at `http://localhost:3001` Open your browser to `http://localhost:5173` and start developing with real NetSuite data! ## Project Structure ``` my-app/ ├── reactApp/ # React application │ └── src/ │ ├── components/ # UI components │ ├── services/ # API services │ ├── hooks/ # Custom hooks │ └── types/ # TypeScript types ├── FileCabinet/ # NetSuite files │ └── SuiteScripts/ │ └── [app-name]/ │ ├── react_app_handler.js # Suitelet │ ├── frontend-app-build/ # Built app │ └── scripts/ # Script templates ├── dev-proxy/ # Development proxy │ ├── server.cjs # Express server │ ├── auth.cjs # TBA OAuth │ └── config.cjs # Configuration ├── Objects/ # Deployment XMLs └── .env.local # Your credentials ``` ## Available Commands | Command | Description | |---------|-------------| | `npm run dev` | Start development with live NetSuite data | | `npm run dev:app` | Start React only (when proxy is running) | | `npm run proxy` | Start proxy server only | | `npm run build` | Build for production | | `npm run setup` | Configure project name and IDs | ## Common Issues & Solutions ### "NetSuite Login" page appears - ✅ Verify TBA credentials in `.env.local` - ✅ Check Account ID format (use underscore: `1234567_SB1`) - ✅ Ensure your token has appropriate permissions ### 500 Internal Server Error - Check NetSuite execution logs - Verify item exists and is accessible - Ensure Access Token role has proper permissions ### Port 3001 already in use - Stop existing proxy: Find process on port 3001 and kill it - Or use `npm run dev:app` if proxy is already running ### Cannot connect to proxy - Ensure `.env.local` exists with credentials - Check both servers are running (port 3001 and 5173) - Verify `VITE_USE_PROXY=true` in `.env.local` ## Security Best Practices 1. **Never commit `.env.local`** - Already in `.gitignore` 2. **Use environment-specific tokens** - Different for dev/staging/prod 3. **Rotate tokens regularly** - Revoke and regenerate periodically 4. **Restrict token permissions** - Only grant necessary access 5. **Monitor access logs** - Review NetSuite audit trails ## How It Works ```mermaid graph LR A[React App<br/>localhost:5173] --> B[Proxy Server<br/>localhost:3001] B --> C[NetSuite API] B -.->|Adds TBA Headers| C C -.->|JSON Response| B B -.->|Forward Response| A ``` 1. React app makes API calls to proxy server 2. Proxy adds OAuth 1.0a TBA headers 3. Proxy forwards request to NetSuite 4. NetSuite validates TBA and returns data 5. Proxy forwards response to React app ## Requirements - Node.js 18+ - npm 9+ - NetSuite account with: - SuiteScript enabled - Administrator or Developer role - Token-Based Authentication setup ## Contributing Contributions welcome! Please submit a Pull Request. ## License ISC ## Support For issues or questions: - Check [GitHub Issues](https://github.com/yourusername/create-netsuite-react-app) - Review NetSuite execution logs - Enable debug mode: `npm run proxy:debug` --- Built with ❤️ for the NetSuite developer community