In this article, let's create our very first Lynx project. To begin, let's first set up our development environment.
For Lynx, we need two things installed:
Now that we have our development environment ready, let's proceed.
Open your command prompt in the location where you want to create your project directory and type the following prompt:
npm create rspeedy@latest
- Type a project name, or simply press Tab to use the default project name.
- Select a language: TypeScript or JavaScript. I will choose TypeScript, as it is recommended.
- Select additional tools. I will choose Biome, but you can select any.
This prompt will create a folder with your project name.
Now, navigate to your project directory and install the NPM dependencies using package manager.
npm install
Start the Development Server
npm run dev
NOTE: In Windows Currently, you may get an error like the one below. This might be fixed in the future, but for now, let's manually fix it.
Steps to fix this error:
1) Install the following npm package
npm i @lynx-js/react-rsbuild-plugin-canary
2) Go to lynx.config.ts file and update this import from:
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin'
To this:
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin-canary'
Now start the Development Server again
npm run dev
You might encounter another error now. To fix it, do the following:
Goto node_modules/@lynx-js/tasm/index.js file and search for the let encode = encode_napi; and replace it with let encode = getEncodeMode();
Now, run the development server again, and it should work.
The next step is to install the Lynx Explorer app on your iOS or Android device to view the UI.
Refer to the official documentation to learn how to install Lynx Explorer.
Once you installed Lynx Explorer app, you can scan the QR code using the App from the terminal and it will display the live UI on Lynx Explorer
Now make a change and you will see the UI on your Lynx Explorer being updated automatically.
Now that we understand how to generate a new Lynx project using Rspeedy, we'll explore the project's directory structure in the next article.
Follow for more!
Top comments (1)
Lynx will change mobile development what do u think 🤔