Maintainers
Pricing
Enterprise
More
More
Documentation
Try Live
Rankings
Install
Blog
Docs7
Ask
New
Add Docs
Zephyr Cloud
https://github.com/zephyrcloudio/zephyr-documentation
Admin
Documentation for Zephyr Cloud
Tokens:
86,453
Snippets:
1,105
Trust Score:
6.8
Update:
5 months ago
Context
Chat
Benchmark
65.67
Latest
Show doc for...
Code
Info
Show Results
Tokens:
Raw
Copy
Link
Tokens:
Raw
Copy
Link
### Project Setup and Development Commands Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/tools/create-zephyr-apps.mdx After creating your project, navigate into the directory and run these commands to install dependencies and start the development server or build for deployment. ```bash cd my-app npm install npm run dev # Start development server npm run build # Build and deploy to Zephyr Cloud ``` -------------------------------- ### Install Dependencies and Run Dev Server Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/integrations/react-vite.mdx Navigate to the project directory, install all dependencies, add the Zephyr plugin, and start the development server. ```bash cd react-vite-ts npm install && npm install vite-plugin-zephyr@latest npm run dev ``` -------------------------------- ### Serve Host Application with Nx Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/integrations/react-rspack-nx.mdx Serve the host application to verify the setup. Nx will automatically start the necessary remote applications. ```bash nx run host:serve ``` -------------------------------- ### Install and Setup Zephyr Apps Source: https://context7.com/zephyrcloudio/zephyr-documentation/llms.txt Use npx to scaffold a new project with Zephyr pre-configured or add Zephyr to an existing project using the with-zephyr codemod. ```bash # Scaffold a new project npx create-zephyr-apps@latest my-app cd my-app && npm install npm run dev # development server npm run build # build and deploy to Zephyr Cloud # Or add Zephyr to an existing project with the one-line codemod curl -fsSL https://with.zephyr-cloud.io | node # Equivalent using package managers: npx with-zephyr # yarn dlx with-zephyr # pnpx with-zephyr # bunx with-zephyr ``` -------------------------------- ### Install Dependencies and Run Host App Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/components/zephyr/repack/start-from-scratch.mdx Navigate into the HostApp directory, install npm packages, install pods, and run the application on iOS. ```bash cd HostApp npm install npx pod-install npm run ios ``` -------------------------------- ### Example Version URLs Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/features/versions.mdx View concrete examples of version URLs for different users and applications. ```text https://john-doe-42-header-component-ecommerce-abc123-ze.zephyr-cloud.io ``` ```text https://jane-smith-156-shopping-cart-monorepo-def456-ze.zephyr-cloud.io ``` -------------------------------- ### Example Deployment URLs Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/errors/ze20011.mdx These are example URLs that are outputted after a successful build and deployment. Use these URLs to access your recently deployed project. ```bash ZEPHYR -> https://project-repository-arthurfiorette-ze.valorkin.dev ZEPHYR -> https://arthurfiorette-project-commitid-ze.valorkin.dev ``` -------------------------------- ### Install Dependencies and Build Docs Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/README.md Use these commands to install project dependencies and build the documentation site. Requires Node.js and pnpm. ```bash pnpm install pnpm build ``` -------------------------------- ### Start Metro Bundler Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/tutorials/metro.mdx Command to start the Metro bundler for the host application. ```bash cd HostApp npx react-native start ``` -------------------------------- ### Install Dependencies with pnpm Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/components/zephyr/repack/forked-example.mdx Use this command to install all project dependencies. Ensure you have pnpm installed. ```bash pnpm install ``` -------------------------------- ### GitLab CI/CD Pipeline for Zephyr Deployment Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/features/ci-cd-personal-token.mdx This example demonstrates a complete GitLab CI/CD pipeline configuration for deploying with Zephyr. It includes stages for installation, building, and deployment, along with artifact management and environment variable setup for the Zephyr secret token. ```yaml stages: - install - build - deploy variables: npm_config_cache: '$CI_PROJECT_DIR/.npm' cache: key: ${CI_COMMIT_REF_SLUG} paths: - .npm/ - node_modules/ install: stage: install script: - npm ci --cache .npm --prefer-offline artifacts: paths: - node_modules/ expire_in: 1 hour build: stage: build script: - npm run build artifacts: paths: - dist/ expire_in: 1 day variables: ZE_SECRET_TOKEN: $ZE_SECRET_TOKEN deploy: stage: deploy script: - npm run deploy only: - main environment: name: production variables: ZE_SECRET_TOKEN: $ZE_SECRET_TOKEN ``` -------------------------------- ### Install Module Federation Plugin Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/integrations/react-rsbuild.mdx Install the Module Federation plugin for Rsbuild. ```bash npm install --save-dev @module-federation/rsbuild-plugin ``` -------------------------------- ### Install bun Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/getting-started/installation.mdx Install the bun JavaScript runtime and package manager for macOS/Linux or Windows. ```bash # Install bun (macOS/Linux) curl -fsSL https://bun.sh/install | bash # Install bun (Windows) powershell -c "irm bun.sh/install.ps1 | iex" # Verify installation bun --version ``` -------------------------------- ### Example Version URL Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/features/versions.mdx An example of a complete version URL, demonstrating how the components from the format are used to create a unique and permanent link to a specific application build. ```text https://john-doe-42-header-component-ecommerce-abc123-ze.zephyr-cloud.io ``` -------------------------------- ### Example Log File Layout Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/features/file-logging.mdx An example of the directory structure and file naming convention for structured logs. ```text ~/.zephyr/logs/run-2024-06-14T18-22-05/ info.log warn.log error.log action-build.log debug-git.log summary.json ``` -------------------------------- ### GitLab CI/CD Pipeline for Zephyr Deployment Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/features/ci-cd-server-token.mdx This example demonstrates a complete GitLab CI/CD pipeline configuration for deploying with Zephyr. It includes stages for installation, building, and deployment, along with artifact management and variable definitions for Zephyr authentication. ```yaml stages: - install - build - deploy variables: npm_config_cache: '$CI_PROJECT_DIR/.npm' cache: key: ${CI_COMMIT_REF_SLUG} paths: - .npm/ - node_modules/ install: stage: install script: - npm ci --cache .npm --prefer-offline artifacts: paths: - node_modules/ expire_in: 1 hour build: stage: build script: - npm run build artifacts: paths: - dist/ expire_in: 1 day variables: ZE_SERVER_TOKEN: $ZE_SERVER_TOKEN ZE_USER_EMAIL: $ZE_USER_EMAIL deploy: stage: deploy script: - npm run deploy only: - main environment: name: production variables: ZE_SERVER_TOKEN: $ZE_SERVER_TOKEN ZE_USER_EMAIL: $ZE_USER_EMAIL ``` -------------------------------- ### Install and Use Node.js 24 with nvm-windows Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/getting-started/installation.mdx Install Node.js version 24 and set it as the current version using nvm-windows. ```bash nvm install 24 nvm use 24 ``` -------------------------------- ### Application UID Structure Example Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/reference/architecture.mdx This example demonstrates the structure of an Application UID derived from package.json, repository, and organization. ```string {application}.{project}.{organization} ``` -------------------------------- ### Initialize Git Repository Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/tutorials/create-mf-app.mdx Use this command to start a new Git repository in your project directory. ```bash git init ``` -------------------------------- ### Start MiniApp Development Server Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/components/zephyr/repack/start-from-scratch.mdx Run this command to start the development server for the MiniApp on iOS. It's recommended to specify the platform for accurate dev server spawning. ```bash pnpm --filter MiniApp start --platform ios ``` -------------------------------- ### Install pnpm Globally Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/getting-started/installation.mdx Install the pnpm package manager globally using npm and verify the installation. ```bash # Install pnpm globally npm install -g pnpm@latest # Verify installation pnpm --version ``` -------------------------------- ### Install and Use Node.js 24 with nvm Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/getting-started/installation.mdx Install Node.js version 24, set it as the current version, and configure it as the default using nvm. ```bash nvm install 24 nvm use 24 nvm alias default 24 # Set as default ``` -------------------------------- ### Build and Start MobileCart for iOS Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/components/zephyr/repack/forked-example.mdx Builds and starts the `MobileCart` component for iOS after `MobileCheckout` has been deployed. Uses `ZC=1` for Zephyr deployment. ```bash ZC=1 pnpm --filter MobileCart run start --platform ios ``` -------------------------------- ### Install Zephyr Plugin for Webpack Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/tutorials/create-mf-app.mdx After creating your application, navigate to the project directory and install the `zephyr-webpack-plugin` using npm. ```bash cd your-app-name npm install zephyr-webpack-plugin --save-dev ``` -------------------------------- ### Install fnm (Fast Node Manager) Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/getting-started/installation.mdx Install the fnm Node.js version manager using curl for macOS/Linux or Chocolatey for Windows. ```bash # macOS/Linux curl -fsSL https://fnm.vercel.app/install | bash # Windows (with Chocolatey) choco install fnm ``` -------------------------------- ### Build and Start MobileCheckout for iOS Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/components/zephyr/repack/forked-example.mdx Builds and starts the `MobileCheckout` component for iOS. The `ZC=1` environment variable is used to initiate Zephyr deployment. Platform inference is recommended. ```bash ZC=1 pnpm --filter MobileCheckout run start --platform ios ``` -------------------------------- ### Install Zephyr Plugin for Rspack Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/tutorials/create-mf-app.mdx After creating your application, navigate to the project directory and install the `zephyr-rspack-plugin` using npm. ```bash cd your-app-name npm install zephyr-rspack-plugin --save-dev ``` -------------------------------- ### Example Project and Application Hierarchy Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/features/organization-structure.mdx Visual representation of how applications are nested within projects and organizations. ```text Organization: acme-corp\n\t\t Project: ecommerce-platform\n \t\t Application: header-component\n \t\t Application: product-catalog\n \t\t Application: shopping-cart\n \t\t Application: checkout-flow ``` -------------------------------- ### Use fnm to Install, Use, and Set Default Node.js Version Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/getting-started/installation.mdx Manage Node.js versions using fnm, including installing, switching, and setting a default version. ```bash fnm install 24 fnm use 24 fnm default 24 ``` -------------------------------- ### Example Tag URL Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/features/tags-environments.mdx An example of a tag URL, demonstrating how a specific tag like 'main' for a 'header-component' application with a unique identifier and domain would be structured. ```text https://t-main-header-component-ecommerce-acme-abc123.zephyr-cloud.io ``` -------------------------------- ### Build and Start MobileInventory for iOS Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/components/zephyr/repack/forked-example.mdx Builds and starts the `MobileInventory` component for iOS. This step follows the deployment of `MobileCart` and uses `ZC=1` for Zephyr deployment. ```bash ZC=1 pnpm --filter MobileInventory run start --platform ios ``` -------------------------------- ### Run All Dev Servers Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/components/zephyr/repack/forked-example.mdx Starts all development servers for the project. This command should be run after all remotes are deployed. ```bash ZC=1 pnpm run start ``` -------------------------------- ### Initialize Project Directory and Dependencies Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/components/zephyr/repack/start-from-scratch.mdx Set up a new React Native project directory, initialize git, and install dependencies using pnpm. ```bash mkdir ZephyrRepackPlayground cd ZephyrRepackPlayground git init pnpm init ``` -------------------------------- ### Add Zephyr TanStack Start Vite Plugin Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/meta-frameworks/tanstack-start.mdx Install the Zephyr TanStack Start Vite plugin using your preferred package manager. This plugin is essential for integrating TanStack Start Cloudflare deployments with Zephyr. ```bash npm install -D vite-plugin-tanstack-start-zephyr ``` -------------------------------- ### Initialize Host Application with Repack Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/components/zephyr/repack/start-from-scratch.mdx Run the repack-init command to create the 'HostApp' with Rspack as the bundler. ```bash npx @callstack/repack-init ``` -------------------------------- ### Add Nitro Cloudflare Dev Helper Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/meta-frameworks/nuxt.mdx Install `nitro-cloudflare-dev` for local parity with Nitro's Cloudflare module runtime, which is recommended for Zephyr's Nuxt example. ```bash npm install --save-dev nitro-cloudflare-dev ``` -------------------------------- ### Staging Environment Configuration Example Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/features/environment-overrides.mdx Illustrates a combined configuration for a staging environment, showing both remote dependency overrides and environment variable settings for integration testing. ```text Staging Environment Configuration: ├─ Remote Overrides: │ ├─ ui-components → @beta (test new designs) │ ├─ cart-service → @latest (latest backend) │ └─ analytics → @staging (non-prod tracking) └─ Environment Variables: ├─ ZE_PUBLIC_API_URL → https://api.staging.example.com ├─ ZE_PUBLIC_FEATURE_FLAGS → new-checkout,analytics └─ ZE_PUBLIC_STRIPE_KEY → pk_test_51DEF456xyz ``` -------------------------------- ### Configure Module Federation Plugin Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/tutorials/mf-guide.mdx Example configuration for the ModuleFederationPluginV1 in an Rspack setup. It defines remote applications, exposed modules, and shared dependencies like React and Material-UI. ```javascript new ModuleFederationPluginV1({ name: 'app_01', filename: 'remoteEntry.js', remotes: { app_02: 'app_02@http://localhost:3002/remoteEntry.js', app_03: 'app_03@http://localhost:3003/remoteEntry.js', app_04: 'app_04@http://localhost:3004/remoteEntry.js', app_05: 'app_05@http://localhost:3005/remoteEntry.js', }, exposes: { './SideNav': './src/SideNav', './Page': './src/Page', }, shared: { ...deps, '@material-ui/core': { singleton: true, }, 'react-router-dom': { singleton: true, }, 'react-dom': { singleton: true, }, react: { singleton: true, }, }, }), ``` -------------------------------- ### Build the Project Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/tutorials/first-app.mdx Run the build command to compile your project for deployment. ```bash pnpm run build ``` -------------------------------- ### Webpack Configuration for Module Federation Remote Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/integrations/vite-rspack-webpack-mf.mdx Configure Webpack to act as a Module Federation remote. This setup includes defining shared dependencies, exposing modules, and integrating with Zephyr for enhanced features. Ensure `dotenv-webpack` is installed for environment variable support. ```javascript const HtmlWebPackPlugin = require('html-webpack-plugin'); //const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); const path = require('path'); const Dotenv = require('dotenv-webpack'); const { withZephyr } = require('zephyr-webpack-plugin'); const { ModuleFederationPlugin, } = require('@module-federation/enhanced/webpack'); const deps = require('./package.json').dependencies; const printCompilationMessage = require('./compilation.config.js'); module.exports = (_, argv) => withZephyr()({ output: { publicPath: 'auto', }, resolve: { extensions: ['.tsx', '.ts', '.jsx', '.js', '.json'], }, devServer: { port: 8080, historyApiFallback: true, watchFiles: [path.resolve(__dirname, 'src')], onListening: function (devServer) { const port = devServer.server.address().port; printCompilationMessage('compiling', port); devServer.compiler.hooks.done.tap('OutputMessagePlugin', (stats) => { setImmediate(() => { if (stats.hasErrors()) { printCompilationMessage('failure', port); } else { printCompilationMessage('success', port); } }); }); }, }, module: { rules: [ { test: /\.(svg|png)$/, type: 'asset', }, { test: /\.m?js/, type: 'javascript/auto', resolve: { fullySpecified: false, }, }, { test: /\.(css|s[ac]ss)$/i, use: ['style-loader', 'css-loader', 'postcss-loader'], }, { test: /\.(ts|tsx|js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', }, }, ], }, plugins: [ new ModuleFederationPlugin({ name: 'vite_webpack', filename: 'remoteEntry.js', exposes: { './Image': './src/Image', }, shared: { react: { singleton: true, }, 'react-dom': { singleton: true, }, }, }), new HtmlWebPackPlugin({ template: './src/index.html', }), new Dotenv(), ], }); ``` -------------------------------- ### Development and Build Commands Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/meta-frameworks/rslib.mdx Use these commands to start the development server with watch mode or to build your library for production. ```bash dev ``` ```bash build ``` -------------------------------- ### Serve the Host Application Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/integrations/react-rspack-nx.mdx Run the development server for the host application. This command allows you to preview your application in the browser during development. ```bash npx nx run host:serve ``` -------------------------------- ### AWS Cleanup Script - Phase 1 Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/cloud/aws.mdx This bash script is the first phase of cleaning up AWS resources integrated with Zephyr Cloud. Ensure AWS CLI and jq are installed and authenticated. It sets up environment variables for regions, CloudFront distribution ID, function names, DynamoDB tables, secret names, S3 buckets, log groups, and IAM policy ARNs. It logs the start of Phase 1. ```bash #!/usr/bin/env bash set -euo pipefail export AWS_PAGER="" export AWS_DEFAULT_OUTPUT=json # ================== SETTINGS (FILL IN) ================== AWS_REGION_MAIN="us-east-1" AWS_REGION_EDGE="us-east-1" CF_DIST_ID="${CF_DIST_ID:-DISTRIBUTION_ID}" CF_FUNC_NAME="${CF_FUNC_NAME:-}" # Normalize DDB_TABLES into an array (supports spaces/commas/newlines) declare -a DDB_TABLES_ARR=() if [[ -n "${DDB_TABLES:-}" ]]; then _tmp="${DDB_TABLES//$' '/ }" _tmp="${_tmp//,/ }" read -r -a DDB_TABLES_ARR <<< "$_tmp" fi SECRET_NAME="${SECRET_NAME:-your/secret/name}" S3_BUCKET="${S3_BUCKET:-your-bucket-name}" # Normalize LOG_GROUPS into an array (supports spaces/commas/newlines) declare -a LOG_GROUPS_ARR=() if [[ -n "${LOG_GROUPS:-}" ]]; then _lg_tmp="${LOG_GROUPS//$' '/ }" _lg_tmp="${_lg_tmp//,/ }" read -r -a LOG_GROUPS_ARR <<< "$_lg_tmp" fi IAM_POLICY_SM_ARN="${IAM_POLICY_SM_ARN:-}" # ========================================================= log() { echo "[$(date '+%F %T')] $*" } command -v aws >/dev/null || { log "aws cli not found"; exit 1; } command -v jq >/dev/null || { log "jq not found"; exit 1; } export AWS_DEFAULT_REGION="$AWS_REGION_MAIN" log "==> PHASE 1 started" ``` -------------------------------- ### Install Zephyr Rsbuild Plugin Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/integrations/react-rsbuild.mdx Install the Zephyr Rsbuild plugin as a development dependency. ```bash npm install --save-dev zephyr-rsbuild-plugin ``` -------------------------------- ### Setting Up Build-Time Environment Variables Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/features/tags-environments.mdx Demonstrates how to prefix environment variables with `ZE_PUBLIC_` in a `.env` file to enable Zephyr's build-time capture and runtime override capabilities. ```bash # Regular environment variables (not managed by Zephyr) DATABASE_URL=postgres://localhost/myapp # Zephyr-managed environment variables (prefix with ZE_PUBLIC_) ZE_PUBLIC_API_URL=https://api.development.example.com ZE_PUBLIC_FEATURE_FLAGS=beta-ui,new-checkout ZE_PUBLIC_ANALYTICS_KEY=dev_analytics_12345 ZE_PUBLIC_CDN_URL=https://cdn.development.example.com ``` -------------------------------- ### Install Rspress Plugin Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/meta-frameworks/rspress.mdx Install the Zephyr Rspress plugin using your preferred package manager. ```bash npm install --save-dev zephyr-rspress-plugin # or yarn add --dev zephyr-rspress-plugin # or pnpm add --save-dev zephyr-rspress-plugin ``` -------------------------------- ### Verify Node.js Installation with nvm Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/getting-started/installation.mdx Confirm that Node.js version 24 is correctly installed and active. ```bash node --version # Should show v24.x.x nvm current # Should show v24.x.x ``` -------------------------------- ### Create Mini App with CLI Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/tutorials/metro.mdx Use the React Native CLI to initialize a new mini application. Navigate into the created directory. ```bash npx @react-native-community/cli@latest init MiniApp cd MiniApp ``` -------------------------------- ### Host package.json Minimal Example Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/integrations/react-rspack-nx.mdx Define the 'name' and 'version' fields in the host application's package.json. This is a minimal configuration required for module federation. ```json { "name": "host", "version": "0.0.0" } ``` -------------------------------- ### Install Vite Plugin Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/bundlers/vite.mdx Install the Zephyr Vite plugin using your preferred package manager. ```bash npm install --save-dev vite-plugin-zephyr # or yarn add --dev vite-plugin-zephyr # or pnpm add --save-dev vite-plugin-zephyr ``` -------------------------------- ### Install Zephyr Rspack Plugin Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/bundlers/rspack.mdx Install the Rspack plugin using your preferred package manager. ```bash pnpm add --dev zephyr-rspack-plugin ``` -------------------------------- ### Create Host App with CLI Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/tutorials/metro.mdx Use the React Native CLI to initialize a new host application. Navigate into the created directory. ```bash npx @react-native-community/cli@latest init HostApp cd HostApp ``` -------------------------------- ### Install Parcel Reporter for Zephyr Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/bundlers/parcel.mdx Install the Zephyr Parcel reporter as a development dependency in your project. ```bash npm install --save-dev parcel-reporter-zephyr # or yarn add --dev parcel-reporter-zephyr # or pnpm add --save-dev parcel-reporter-zephyr ``` -------------------------------- ### Install Zephyr Webpack Plugin Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/tutorials/first-app.mdx Install the latest version of the Zephyr webpack plugin using pnpm. ```bash pnpm add zephyr-webpack-plugin@latest ``` -------------------------------- ### Variable Organization Example Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/features/environment-overrides.mdx Demonstrates a strategy for organizing environment variables using consistent prefixing for different configuration categories like API, features, and external services. ```bash # API Configuration ZE_PUBLIC_API_URL=... ZE_PUBLIC_API_TIMEOUT=... # Feature Flags ZE_PUBLIC_FEATURE_NEW_UI=... ZE_PUBLIC_FEATURE_CHECKOUT=... # External Services ZE_PUBLIC_ANALYTICS_ID=... ZE_PUBLIC_STRIPE_KEY=... ``` -------------------------------- ### Install Zephyr Re.Pack Plugin Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/bundlers/repack.mdx Install the Zephyr Re.Pack plugin using your preferred package manager. ```bash npm install --dev zephyr-repack-plugin # or yarn add --dev zephyr-repack-plugin # or pnpm add --dev zephyr-repack-plugin ``` -------------------------------- ### Zephyr App Creation Prompts Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/components/zephyr/repack/forked-example.mdx Example prompts shown during the project creation process using the Zephyr apps CLI. ```bash ◇ Where should we create your project? │ ./react-native-playground │ ◇ What type of project you are creating? │ React Native │ ◇ Project successfully created at react-native-playground ``` -------------------------------- ### Bundle and Run MobileHost for iOS Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/components/zephyr/repack/forked-example.mdx Bundles the host application and kicks off the iOS emulator. This command is used before running the complete application. ```bash ZC=1 pnpm --filter MobileHost run ios ``` -------------------------------- ### Install Vite Zephyr Plugin Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/integrations/vite-rspack-webpack-mf.mdx Install the Zephyr plugin for Vite applications to enable Module Federation configuration. ```sh npm i vite-plugin-zephyr@latest ``` -------------------------------- ### Nx Workspace Setup Options Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/integrations/react-rspack-nx.mdx Select options during Nx workspace creation for project structure and tooling. These choices influence the monorepo's configuration. ```bash ? Which stack do you want to use? None. ? Package-based monorepo, integrated monorepo, or standalone project? Integrated Monorepo. ? Which CI provider would you like to use? skip ? Would you like remote caching to make your build faster? No ``` -------------------------------- ### Install Rsbuild Plugin Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/bundlers/rsbuild.mdx Install the Rsbuild plugin for Zephyr Cloud into your project using your preferred package manager. ```bash npm install --save-dev zephyr-rsbuild-plugin ``` ```bash yarn add --dev zephyr-rsbuild-plugin ``` ```bash pnpm add -D zephyr-rsbuild-plugin ``` ```bash bun add --dev zephyr-rsbuild-plugin ``` -------------------------------- ### Install Webpack/Rspack Zephyr Plugin Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/integrations/vite-rspack-webpack-mf.mdx Install the Zephyr plugin for Webpack and Rspack applications to enable Module Federation configuration. ```sh npm i zephyr-webpack-plugin@latest ``` -------------------------------- ### Start Modern.js Development Server Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/meta-frameworks/modernjs.mdx Initiate the development server for your Modern.js application using the provided command. ```bash npm run dev # or yarn dev # or pnpm dev ``` -------------------------------- ### Install Zephyr for Webpack Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/integrations/existing-app.mdx Install the Zephyr Webpack plugin using NPM. This is the first step to integrating Zephyr into your Webpack project. ```bash npm i zephyr-webpack-plugin@latest --save ``` -------------------------------- ### Package JSON Example Source: https://github.com/zephyrcloudio/zephyr-documentation/blob/main/docs/errors/ze40003.mdx Ensure the 'name' and 'version' fields in your package.json are correctly set to match the deployed application. ```json { "name": "my-app", "version": "1.0.0" } ```
