Getting Started

ReChunk is an all-inclusive package that includes a command-line interface (CLI) and library designed for rendering encoded components with React Native. The CLI is designed to work alongside an API that adheres to the interface specified in the library. You can use the Docker image right out of the box and deploy it wherever best suits your project, or alternatively, create your own server that conforms to the interface.

Setup

The CLI, React Native library and Babel plugin are included in the same package. This library does not require a particular React Native version but is more related to the React version as it is expected to be utilized with Suspense via lazy loading. Suspense was introduced into React 16.6.

Installation

Use your current project package manager to install ReChunk.

yarn

yarn add @crherman7/rechunk

npm

npm install @crherman7/rechunk

pnpm

pnpm install @crherman7/rechunk

bun

bun install @crherman7/rechunk

This should have updated your package.json - verify it has been updated and ReChunk is added as a dependency.

package.json

{
  "name": "my-awesome-app",
  "version": "1.0.0",
  "author": "Your Name <email@example.com>",
  "dependencies": {
    "@crherman7/rechunk": "1.0.0"
  }
}

Configuration

To integrate ReChunk into your project, you must not only add it as a dependency but also update your Babel configuration. ReChunk relies heavily on Babel for source code generation, significantly reducing the amount of code developers need to write for ReChunk to function correctly.

Update your Babel configuration in either the babel.config.js or .babelrc configuration file.

babel.config.js

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: ['@crherman7/rechunk/dist/babel'],
};

.babelrc

{
  "presets": ["module:@react-native/babel-preset"],
  "plugins": ["@crherman7/rechunk/dist/babel"]
}

Due to the critical reliance of the client on the rechunk.json configuration file and its manipulation during the ReChunk development server runtime, it is imperative to update your Metro configuration to consistently reset the cache upon starting the Metro bundler.

metro.config.js

const path = require('path');
const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

const root = path.resolve(__dirname, '..');

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  watchFolders: [root],
  resetCache: true,
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);