@packlify/config-build

Part of the Packlify Web SDK ecosystem, @packlify/config-build assists you in generating optimized Vite configurations for your React-based projects, both client-side and server-side rendering (SSR) included.

Table of Contents

• Installation
• Features
• Peer Dependencies
• Usage
  • TypeScript (ESM)
    • Client Configuration
    • SSR Configuration
• API
  • viteConfigClient
  • viteConfigSsr
• Contact

Installation

Install the package using npm or yarn:

npm install @packlify/config-build

Features

@packlify/config-build offers the following features:

• Dynamic Vite configuration generation based on provided entry points.
• TypeScript path aliasing via vite-tsconfig-paths.
• Configures output directories and source maps automatically.

Peer Dependencies

Ensure you have the following peer dependencies installed:

npm install react react-dom react-router-dom

Usage

TypeScript (ESM)

Firstly, import the required functions:

import { viteConfigClient, viteConfigSsr } from '@packlify/config-build';

Client Configuration

To generate the Vite configuration for client-side rendering, use viteConfigClient. It takes an array of entry points:

import { viteConfigClient } from '@packlify/config-build';
import { defineConfig } from 'vite';

export default defineConfig({
  ...viteConfigClient([{ name: 'home', path: '/src/client/entries/home/home.html' }]),
});

SSR Configuration

For server-side rendering, viteConfigSsr can be employed. It also requires an array of entry points:

const ssrConfig = viteConfigSsr([
  { name: 'home', path: './src/server/entries/home/index.tsx' },
  { name: 'about', path: './src/server/entries/about/index.tsx' },
]);

API

viteConfigClient

function viteConfigClient(entryPoints: IEntryPoint[]): ReturnType<typeof defineConfig>;

Parameters

• entryPoints: An array of entry points, each being an object with name and path properties.

viteConfigSsr

function viteConfigSsr(entryPoints: IEntryPoint[]): ReturnType<typeof defineConfig>;

Parameters

• entryPoints: An array of entry points, each being an object with name and path properties.

Contact

Lucas Farias [email protected] LinkedIn - GitHub