Saltar al contenido principal

Manual Project Setup (Advanced)

We strongly recommend using the create-nube-app CLI, which provides templates, pre-configured build scripts, and development tooling aligned with the NubeSDK ecosystem.

However, if you're unable to use the CLI for any reason, you can set up your project manually.

Installing Dependencies​

To have access for all types of NubeSDK, install TypeScript and the package @tiendanube/nube-sdk-types. This can be a development dependency.

npm install -D typescript @tiendanube/nube-sdk-types

If you are going to develop an application with a user interface, install the package @tiendanube/nube-sdk-ui:

npm install @tiendanube/nube-sdk-ui

And if you want to use JSX/TSX syntax, also install @tiendanube/nube-sdk-jsx:

npm install @tiendanube/nube-sdk-jsx

Creating the App Entrypoint​

Now you need to create a module that holds the App's entrypoint. We usually use main.ts or main.tsx.

// main.ts
import type { NubeSDK } from "@tiendanube/nube-sdk-types";

export async function App(nube: NubeSDK) {
  // your code
}

TypeScript Configuration​

This is our recommended TypeScript compilerOptions:

{
  "compilerOptions": {
    "target": "esnext",
    "jsx": "react-jsx",
    "jsxImportSource": "@tiendanube/nube-sdk-jsx/dist", // ONLY IF YOU USE JSX
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true
  }
}

Build Configuration​

To build your script, we recommend using tsup, which is already preconfigured in our official templates.

npm install -D tsup
// tsup.config.js

import { defineConfig } from "tsup";

export default defineConfig({
  entry: ["src/main.tsx"],
  format: ["esm"],
  target: "esnext",
  clean: true,
  minify: true,
  bundle: true,
  sourcemap: false,
  splitting: false,
  skipNodeModulesBundle: false,
  esbuildOptions(options) { // ONLY IF YOU USE JSX
    options.alias = {
      "@tiendanube/nube-sdk-jsx/dist/jsx-runtime": "@tiendanube/nube-sdk-jsx/jsx-runtime",
    };
  },
  outExtension: ({ options }) => ({
    js: options.minify ? ".min.js" : ".js"
  })
});

Next Steps​

Once your project is set up, continue with Adding script to your application to learn how to register your script in the Partner Portal.