Configuration

To configure the behavior of the framework, you need to create a react-server.config.* or +*.config.* file in the root of your project. This file is used to configure the server and the build process. The file type could be .js, .mjs, .ts, .mts or .json.

You can use the +*.config.* file to extend the configuration of the framework. The +*.config.* file is merged with the react-server.config.* file.

The +*.config.* file is useful when you want to extend the configuration of the framework. You can use as many +*.config.* files as you want. All the configuration files are merged together in the order they are loaded.

If you want to only add configuration to use when running the framework in production mode, then use the .production.config.* extension. These configuration files only loaded in production mode.

In a similar way, you can create configuration files with the .development.config.* extension to use a different configuration for development mode.

To add configuration to the build process, you can create .build.config.* files and these configuration files will only be used during a production build.

Configuration files with the .runtime.config.* or .server.config.* extensions are not used during the build process.

The configuration object you need to export as default is an extension of the Vite config object. You can find the full list of options here.

To provide full control over the Vite configuration, you can use the vite option to configure the Vite server and the build process. The vite option is an object that extends the Vite config object or a function that returns a new Vite config object. As a function you can discover and mutate the default configuration for Vite.

You can also use a vite.config.* file to configure Vite as you would do in a Vite project. The vite.config.* file is merged with the react-server.config.* file.

Best practice is to use a vite.config.* file to configure Vite as you would do in a Vite project and use the react-server.config.* file to configure the framework specific options.

The following options are specific to the @lazarv/react-server framework.

Add new entries to the runtime context. The runtime context is a singleton store and can be used to share state in your application.

react-server.config.json
{
  "runtime": {
    "myEntry": "myValue"
  }
}

The runtime option can also be a function that returns the runtime context object. This is useful when you want to mutate the runtime context.

react-server.config.mjs
export default {
  runtime: (runtime) => {
    return {
      ...runtime,
      myEntry: "myValue",
    };
  },
};

Provide cookies configuration, see available options here.

react-server.config.mjs
export default {
  cookies: {
    path: "/",
    maxAge: 60 * 60 * 24 * 30,
    secure: true,
    httpOnly: true,
    sameSite: "lax",
  },
};

You can add pre and post handlers to the middleware stack. Asynchronous handler functions can be defined in an array for each of the pre and post options.

react-server.config.mjs
export default {
  handlers: {
    pre: [async () { ... }],
    post: [async () { ... }]
  }
}

The handlers option can also be a function that returns the handlers array. This is useful when you want to mutate the middlewares used.

react-server.config.mjs
export default {
  handlers: (handlers) => {
    return [...handlers, async () { ... }];
  }
}

Or the handlers option can be an array, where the array of handlers will be used as post handlers.

The public directory is the directory where the static assets are served from. The default value is public.

To disable the automatic module preloading of client components, you can use the modulePreload option. The modulePreload option can be a boolean value or a function that returns a boolean value. The function can also be an async function. When the modulePreload option evaluates to false, the modules for the client components will not be preloaded.

react-server.config.json
{
  "modulePreload": false
}

Using a function to disable the module preloading of client components:

react-server.config.mjs
export default {
  modulePreload: () => false,
};

As the whole application context is available in the function, you can use all helpers or hooks provided by the framework to determine whether to preload the client components.

react-server.config.mjs
import { usePathname } from "@lazarv/react-server";

export default {
  modulePreload: () => {
    const pathname = usePathname();
    return pathname !== "/";
  },
};

To disable the error overlay in development mode, you can use the overlay option. The overlay option can be a boolean value. When the overlay option is set to false, the error overlay will not be displayed.

react-server.config.json
{
  "overlay": false
}

Console forwarding is a feature that allows you to forward the console output from the browser to the development server. This is useful for debugging purposes, as it allows you to see the console output from the browser in your terminal when running the development server.

Console forwarding is enabled by default in your application. To disable console forwarding, you can use the console option. The console option can be a boolean value. When the console option is set to false, the console output from the browser will not be forwarded to the development server.

react-server.config.json
{
  "console": false
}