Mock Server

Setting Up the Mock Server

Now that we've scaffolded the frontend application, it’s time to simulate the backend using a mock server. This allows us to test our form functionality in a controlled development environment.

warning

It’s important to keep in mind that form validation is handled by the SOKit Backend (BE) framework. When using the mock server, no actual validation logic is applied—this means form fields will not be checked for correctness.

To explore how validation and error handling are managed in a real environment, including how errors are surfaced in the UI through SOKit UI, refer to the Backend Integration Guide.

Configure new and submit Operations

Since you started from an empty template, the mock server includes no endpoints by default. We’ll begin by adding two essential ones:

1. new – Returns the initial structure for a new company registration.
2. submit – Handles form submission and returns a confirmation response.

Step 1: Add Mock Data Files

Inside the src-mock folder:

• Create a new folder: data
• Inside data, add two files: new.json and submit.json

new.json

new.json

{
  "id": "b6843532-f1f4-4e4e-93d1-8ee2d7be95bf",
  "version": 1,
  "data": null,
  "metadata": null,
  "startOperations": [],
  "operations": [
    {
      "id": "submit",
      "constant": "SUBMIT",
      "type": "CREATE",
      "ordinal": 1,
      "uri": "/api/v1/registration/company/operations/submit",
      "security": {
        "mustAuthenticate": true,
        "mustAuthorize": true,
        "roles": [
          "company"
        ],
        "scopes": [],
        "claims": []
      },
      "startOperation": "NEW",
      "startState": "NIL",
      "endState": [
        "SUBMITTED"
      ],
      "attributes": {}
    }
  ],
  "attributes": {}
}

submit.json

submit.json

{
  "id": "b6843532-f1f4-4e4e-93d1-8ee2d7be95bf",
  "version": 1
}

---

Step 2: Add Mock Endpoints

Open the src-mock/index.cjs file and do the following:

Ensure the server starts:

At the end of the file, make sure this block exists:

index.cjs

app.listen(port, (hostname) => {
  console.log(`Mock server listening on port ${port}`);
});

Add your endpoints:

Add these new routes:

index.cjs

app.get('/api/v1/registration/company/start-operations/new', (req, res) => {
  res.send(require('./data/new.json'));
});

app.post('/api/v1/registration/company/operations/submit', (req, res) => {
  res.send(require('./data/submit.json'));
});

---

Step 3: Launch the Application

Start the mock server using:

pnpm mock:server

Then run your frontend in development mode (if not already running):

pnpm mock:dev

Navigate to the New Company form. You are now using a mock user that holds both the company and officer roles.

---

Filling Out the Form

1. Fill in the General tab.

   

2. Add at least one entry in the Shareholders tab.

   

3. Click Submit.

   

Once submitted, the form will automatically switch to read-only mode, confirming the submission was processed.

---

Next Steps

Next, we’ll implement the mock endpoints to search and view a registered company, completing the end-to-end flow.

Stay tuned!