`@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.

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 lukf95@gmail.com LinkedIn - GitHub