@finitydevs/create-spa-netsuite v1.2.2

Create SPA Netsuite

create-spa-netsuite is a CLI that scaffolds SPA projects taking away hours of setup. Develop in the comfort of your own machine and then deploy to Netsuite when you are ready 😊

Features

• Develop locally on your machine
• Organized & easy to extend NetSuite API
• Reusable NetSuite components
• Supports many flavors of js like React, Vue, Angular, Svelte (experimental)
• React playground for testing your API

Getting Started

For this guide you will need the Suitecloud SDF CLI installed, you can find the npm package here

1. Create a new app by running npx @finitydevs/create-spa-netsuite myapp
2. Install the SDF node modules cd sdf npm i
3. Install the Client node modules cd client npm i
4. Associate a NetSuite account with this SDF project. In the sdf folder run npm run setup
5. Deploy the SDF project to NetSuite. In the sdf folder run npm run deploy

That's it! You now have the API side deployed in your NetSuite account. This includes the restlet which we will be calling from our SPA and the suitelet which will eventually serve the SPA once it's built and hosted in Netsuite.

File Structure

┣ client ┣ sdf ┗ .gitignore

The generated project looks like this. I don't recommend you change this structure. They are reliant on each other for builds

Setting up the SPA

1. In Netsuite, create a new token-based integration. a. After saving the integration you will get a consumer and secret key. SAVE THIS IN NOTEPAD
2. In Netsuite, create user tokens for the above integration you added a. After token creation, you will get a token id and a token secret. SAVE THIS IN NOTEPAD

import { init } from '@finitydevs/netsuite-scripts'

init({
	restlets: {
	    //This default URL is generated and scaffolded with the project
		default: 'myDefaultRestletURL'
	},
	keys: {
		accountId: 'myAccuntId',
		tokenId: 'userTokenID',
		tokenSecret: 'userTokenSecret',
		consumerKey: 'integrationKey',
		consumerSecret: 'integrationSecret'
	},
	isProduction: false
})

NOTE: You can have your keys in a .env file but be sure to keep these keys safe as they give access to your netsuite account Also, the "isProduction" flag needs to be set to true when in production. This tells netsuite-scripts to use the regular roles authenticaion when running in production.

Now, start your SPA by running npm run start in the client folder

NetSuite API & actions

So you've gotten up and running. You now want to extend the API so you can build out your application. This can be achieved by adding "actions"

An action is a function that does some logic and returns data. Each request sent to your API includes an "action" name. This is the action that will execute on the backend. Choose good function names for your actions, actions are reffered to from the front end what their functions are named on the backend. (Not case-sensitive)

Here is how to create a new action:

1. Find your SuiteScripts/scripts/actions/index.ts file.
2. Create and export a function named myNewAction and return a string of "This is my new action". export const myNewAction = (params) => "This is my new action"

   NOTE: The project scaffolds with the one index.ts file but you can add more files as needed and export all the functions from the index.ts like this export * from './someOtherActionsFile'

You've just created an action called myNewAction. You can now call this action from your client via a get or post request How easy was that!

Client requests & calling "actions"

You added a new action and you now want to call this action from your client and get the results or just want to call an existing action.

This can be acheived by using the REST object exported from the utils folder in your client. The available functions are REST.get & REST.post. You can use either get or post for any action.

Example:
REST.get({ action: 'myNewAction', data: { hi: 'heythere' }, errorPolicy: 'none' })
OR
REST.post({ action: 'myNewAction', data: { hi: 'heythere' }, errorPolicy: 'none' })

action - The name of the action your want to call (Not case sensitive)
data - data you want to pass to the action (optional)
errorPolicy - This can be set as 'none' or 'all' and this controls how the promise is resolved (defaults to 'none')

For get requests, REST will append your data to the url. For post requests, REST will add your data to the body of the request

With errorPolicy: 'none', REST resolves the results and rejects the errors, you can use it like this:

REST.get({...})
	.then(results => {})
	.catch(e => {}) 

With errorPolicy: 'all', REST always returns an object with { data, error }. This is cleaner when using async await and can be used like this:

const { data, error } = await REST.get({...})

REST is globally available on the window object for development only

Deploying SPA to Netsuite

1. In the client folder run, npm run build. This will build your app and move the build folder into your SDF file cabinet folder. You should now see the client folder in sdf/src/File Cabinet/suitescripts/folder_name
2. Run npm run deploy to deploy the SDF folder to your file cabinet
3. Open your suitelet URL and view your SPA!!

Understanding how the SPA is served in NetSuite

A suitelet is serving the client build.
At runtime, all paths in the HTML are replaced with their file cabinet path and the suitelet simply returns this HTML

About

This project was created by Mayer Lench. Lets face it, creating SPAs in NetSuite is a big setup and its painful. Even after implementing a method for SPAs, things constantly change and you come up with better ideas This CLI is the result of lots of work and perfecting. This currently is the best way to develop and host an SPA in NetSuite.
Hope you enjoy! Dont forget to star the repo and contribute if you like it!

Backed By

This project is backed by Finity Development

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.