Intro to LynxJS

Earlier this week, a new web based framework for building native applications was open sourced from the team at LynxJS. This blog post won't go into the details of the framework, but will instead focus on my experience of getting started building my first LynxJS application.

As I progress my exploration of LynxJS and understand the features that make it unique, I'll create more blog posts to share my learnings with the community.

If you want to read the launch announcement, you can find it here.

Getting started

To run a LynxJS application, you make use of a sandbox environment called Lynx Explorer. This is an application that can be installed on your iOS or Android device in order to launch web applications that can make use of native widgets for extra speed and functionality.

As of the time of writing, there are only Lynx Explorer binaries available for iOS. You need to build the Android version from scratch. Seeing as I don't have an iOS device that would be capable of building the application, I decided to build the Android version myself.

Building Lynx Explorer for Android

I have not written an Android application in a long time, and I have to admit, I was a bit apprehensive of getting back into the Android IDE world - where everything is easy, if only you knew where the menu item was hidden!

Luckily, if you are only building Lynx Explorer, and don't want to debug or develop the application itself, you don't need to install or use Android Studio.

Command line tools rule!

The canonical instructions for building Lynx Explorer for Android are available in the lynx git repository here. Now because I don't like to make things easy for myself, my Linux development PC is running Fedora 41. So my instructions here differ slightly from the upstream instructions.

# Install JDK 11
sudo dnf install java-11-openjdk-devel
# Set JAVA_HOME to where the jdk was installed
export JAVA_HOME=/usr/lib/jvm/java-11-openjdk
# Add JAVA_HOME to your PATH to give you access to javac etc
export PATH=$JAVA_HOME/bin:$PATH
# Define the location of the Android SDK
# NOTE: This can be an empty directory, as the build process will download the SDK
export ANDROID_HOME=$HOME/projects/android/sdk

# Get the lynx sources
git clone https://github.com/lynx-family/lynx.git src/lynx
# Change to the lynx directory
cd lynx
# Setup the build environment
source tools/envsetup.sh
# Um...  not sure, but it was in the instructions
tools/hab sync .
# Get the Android build environment ready
source tools/android_tools/prepare_android_build.sh

# Build Lynx Explorer
cd explorer/android && ./gradlew :LynxExplorer:assembleNoAsanDebug --no-daemon

This process takes a while, but it should complete without hitch. So kudos to the Lynx team for making the build process so easy.

Running Lynx Explorer

Again, because I'm using Fedora 41, this didn't go as smoothly as I had hoped!

You need to use the android tool adb to install applications onto your Android device. This first requires that you:

• Enable the Developer Options menu
• Enable USB debugging
• Attach your device to your PC via USB

Next we need to install the android tools package

sudo dnf install android-tools

Now we can install Lynx Explorer onto our device

ADB_LIBUSB=0 adb install lynx_explorer/build/outputs/apk/noasan/debug/LynxExplorer-noasan-debug.apk

Note the use of ADB_LIBUSB=0, this is a workaround for libusb permission issues on Fedora 41. You may not need this yourself if the permissions issue has been fixed by the time of reading.

Building your first LynxJS application

Now that the runtime is installed on the device, I can start to explore the features of LynxJS itself.

# Create a boilerplate app
npm create rspeedy@latest
# Change to the app directory
cd <project name>
# Install dependencies
npm install
# Build the app
npm run dev

This will start the development server, and present you with a QR code in the terminal. You simply use the QR code scanning tool in Lynx Explorer to load the application on your device. (Its hiding at the top right corner of the app - took me a minute to find it first time!)

The result....

Conclusion

The only really difficult part of this process was building the Lynx Explorer app for Android. Hopefully they will have an official Android build available soon.

But once installed, the process of building and deploying the LynxJS app was a breeze. And the fact that it live updates when you make changes makes it feel like you are using web-native tooling from the get-go. Understanding that native UI components are being deployed behind the scenes feels a little like magic.

I'm looking forward to working with and tracking the process of this exciting project.