SGERP Frontend

Getting Started

Learn how to install and set up the SGERP Frontend Library

Want to try it first? Check out the Try It Out page to test the library with your credentials directly in the browser!

Tip: After testing a connection, it will be saved to your browser's localStorage and appear in the connection widget (bottom-right corner). You can then use it across different documentation pages with interactive examples!

Installation

Install the library using npm or yarn:

npm install sgerp-frontend-lib
# or
yarn add sgerp-frontend-lib

Basic Setup

Initialize the library with your connection configuration:

import { initializeSGERP } from 'sgerp-frontend-lib';

const api = initializeSGERP({
  activeConnection: 'admin@staging',
  timeout: 30000, // 30 seconds (optional)
  connections: {
    'admin@staging': {
      id: 'admin@staging',
      name: 'Staging Admin', // Optional display name
      environment: 'staging',
      user: 'admin',
      password: 'your-password',
      baseUrl: 'https://sgerp-stage.d.gcdev.swatrider.com',
    },
  },
});

Available Environments

The library supports multiple environments:

  • Staging: https://sgerp-stage.d.gcdev.swatrider.com
  • Production: https://sgerp.d.gcprod.swatrider.com
  • Localhost: http://localhost:3000 (for local development)

Multiple Environment Setup

import { initializeSGERP } from 'sgerp-frontend-lib';

const api = initializeSGERP({
  activeConnection: 'admin@staging',
  connections: {
    'admin@staging': {
      id: 'admin@staging',
      environment: 'staging',
      user: 'admin',
      password: 'staging-password',
      baseUrl: 'https://sgerp-stage.d.gcdev.swatrider.com',
    },
    'admin@production': {
      id: 'admin@production',
      environment: 'production',
      user: 'admin',
      password: 'production-password',
      baseUrl: 'https://sgerp.d.gcprod.swatrider.com',
    },
  },
});

Making Your First Request

Use the API instance to make requests:

import { initializeSGERP } from 'sgerp-frontend-lib';

const api = initializeSGERP({ /* config */ });

// Get current user
const users = api.collections.user;
await users.fetch({ limit: 100 });
const user = users.find(u => u.username === api.getActiveConnection().user);
console.log(user);

// Get projects
const projects = api.collections.project;
await projects.fetch({ limit: 20 });
console.log(projects.models);

// Get specific project
const project = projects.get(1);
console.log(project);

Error Handling

Handle API errors using try-catch blocks:

import { initializeSGERP, APIError } from 'sgerp-frontend-lib';

const api = initializeSGERP({ /* config */ });

try {
  const users = api.collections.user;
  await users.fetch({ limit: 100 });
  const user = users.find(u => u.username === api.getActiveConnection().user);
  console.log(user);
} catch (error) {
  if (error instanceof APIError) {
    console.error('API Error:', error.message);
    console.error('Status:', error.status);
    console.error('Response:', error.response);
  }
}

Next Steps