Lynx
Guide
APIs
Blog
Contribute
Guide
APIs
Blog
Contribute

Integrate Lynx with Existing Apps (Web)

Lynx for Web

Lynx for Web implements the Lynx engine in web browsers. With Lynx for Web, you can easily integrate Lynx apps into any existing web project, regardless of whether the project uses React, Vue, Svelte, or plain HTML.

1. Build web artifact

We need you to have read and created a Lynx project according to Quick Start.

Add web configuration

  1. Enter the previously created Lynx project:
cd <lynx-project-name>
  1. Add web configuration (environments.web) to lynx.config.ts:
import { defineConfig } from '@lynx-js/rspeedy';
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';

export default defineConfig({
  plugins: [pluginReactLynx()],
  environments: {
    web: {
      output: {
        assetPrefix: '/',
      },
    },
    lynx: {},
  },
});

Build

Run:

npm
yarn
pnpm
bun
npm run build

You will see an additional dist/main.web.bundle file in this project, which is the final web build artifact.

2. Integrate with a new web project

Now that you have a Lynx for Web build artifact, we need to create a web project to use it. Here we use Rsbuild.

Create a web project

Create a new project at the same level as the Lynx project above and run:

npm
yarn
pnpm
bun
npm create rsbuild@latest

Follow the prompts to create a React project.

Configure the project

  1. Navigate to the created project:
cd <web-project-name>
  1. Install dependencies
npm
yarn
pnpm
bun
npm install @lynx-js/web-core @lynx-js/web-elements
  1. Import these dependencies in src/app.tsx
import './App.css';
import '@lynx-js/web-core/index.css';
import '@lynx-js/web-elements/index.css';
import '@lynx-js/web-core';
import '@lynx-js/web-elements/all';

const App = () => {
  return (
    <lynx-view
      style={{ height: '100vh', width: '100vw' }}
      url="/main.web.bundle"
    ></lynx-view>
  );
};

export default App;
  1. Update rsbuild.config.ts
WARNING

server.publicDir needs to be replaced with your actual Lynx project path. 

import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import path from 'node:path';
import { fileURLToPath } from 'node:url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default defineConfig({
  plugins: [pluginReact()],
  server: {
    publicDir: [
      {
        name: path.join(
          __dirname,
          '../',
          // Please replace this with your actual Lynx project name
          'lynx-project',
          'dist',
        ),
      },
    ],
  },
});

Start the project

Run:

npm
yarn
pnpm
bun
npm run dev

Visit http://localhost:3000 to see your Lynx application.

ON THIS PAGE
Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.