How to call mirage server before application starts in StencilJS

Question

I am working on a StencilJS project where I have to use MirageJS to make fake API data.

How to call server before StencilJS application loads. In react we can call makeServer() in the index.ts file, but in the stencil, we don't have such a file.

How can we call this to start the mirage server, Please can someone suggest the correct way.

Below is my server.ts file mirage/server.ts

import { createServer, Model } from 'miragejs';
import { auditFactory } from './factories';
import { processCollectionRequest } from './utils';
export const makeServer = async ({ environment = 'development' } = {}) => {
  console.log('started server');
  return createServer({
    environment,

    factories: {
      people: auditFactory,
    },

    models: {
      people: Model,
    },

    routes() {
      this.namespace = '/api/v1';

      this.get('/peoples', function (schema, request) {
        let res = processCollectionRequest(schema, request, 'peoples', this);
        // remove factory properties not in spec
        res.items.forEach(e => ['associatedResourceId', 'associatedResourceName', 'associatedResourceType'].forEach(p => delete e[p]));
        return res;
      });
    },

    seeds(server) {
      server.createList('audit', 20);
    },
  });
};

Answer 1

I'm not familiar with MirageJS so I might be off, but can you use globalScript (https://stenciljs.com/docs/config) and then run your Mirage server there?