source.enableCustomEntry

  • Type: boolean
  • Default: false

This option is used for custom Modern.js entries. When this option is enabled, Modern.js will try to use the src/entry.[jt]sx file and src/entry.server.[jt]sx as the project's entry point.

Example

First, enable this option in the configuration file:

modern.config.ts
export default defineConfig({
  source: {
    enableCustomEntry: true,
  },
});

Create the src/entry.tsx file:

import { createRoot } from '@modern-js/runtime/react';
import { render } from '@modern-js/runtime/browser';

const ModernRoot = createRoot();

async function beforeRender() {
   // todo
}

beforeRender().then(() => {
  render(<ModernRoot />);
});
INFO

For more browser entry details, refer to Entries.

create src/entry.server.tsx file,add custom behavior for rendering responses:

import { renderString, createRequestHandler } from '@edenx/runtime/ssr/server';
import type { HandleRequest } from '@edenx/runtime/ssr/server';

const handleRequest: HandleRequest = async (request, ServerRoot, options) => {
  // do something before rendering
  const body = await renderString(request, <ServerRoot />, options);

  const newBody = body + '<div>Byte-Dance</div>';

  return new Response(newBody, {
    headers: {
      'content-type': 'text/html; charset=UTF-8',
      'x-custom-header': 'abc',
    },
  });
};

export default createRequestHandler(handleRequest);
ON THIS PAGE