#Quick Start

Create an AngularLynx app, open it in your browser, then run it on a phone. This takes about five minutes.

#What you need

• Node.js 22.12 or newer. Check with node --version.
• Optional: a phone (iPhone or Android) or a simulator, to see the app as a real native app.

You don't need the Angular CLI installed globally. The project brings its own copy.

#1. Create the app

npm create angular-lynx my-app

When it asks "Would you like to add Tailwind CSS with Lynx preset?", answer Yes. The tutorial and the examples use Tailwind.

The command takes a minute or two. It runs three steps for you:

1. ng new creates a standard Angular project.
2. ng add @blotch/angular-lynx converts that project into a Lynx app.
3. npm install installs the dependencies.

#2. Start the dev server

cd my-app
npm start

npm start runs ng serve. After the first build, the terminal shows a large QR code and a few links:

  Lynx       http://192.168.1.20:3000/main.lynx.bundle
  Web        http://192.168.1.20:3000/main.web.bundle
  ∟ Preview  http://192.168.1.20:3000/__web_preview?casename=main.web.bundle

Your addresses will differ. Leave the server running.

#3. Open it in your browser

Open the Preview link, but replace the IP address with localhost:

http://localhost:3000/__web_preview?casename=main.web.bundle

You should see your project's name and the line "Edit src/app/app.ts to get started".

This is the web preview: Lynx's web renderer drawing your app in the browser. It's the fastest way to work, and its layout matches the phone closely.

#4. Open it on a phone

To run your app as a native app, install Lynx Explorer. It's Lynx's development app: it downloads your app from the dev server and runs it.

You should see the same screen as in the browser, drawn by the phone's own UI controls.

#5. Make a change

1. In Lynx Explorer, open Settings and turn on Lynx DevTool. This lets the dev server reload the app when you save.
2. Open src/app/app.ts and change the line "Edit src/app/app.ts to get started".
3. Save the file.

The browser and the phone both update within a second or two.

#What's in the project

ng add changed only a few files from a standard ng new project:

my-app/
├── angular.json              # build, serve and test use the AngularLynx builders
├── tailwind.config.ts        # Tailwind with the Lynx preset
└── src/
    ├── main.ts               # bootstrapApplication from @blotch/angular-lynx
    ├── rspeedy-env.d.ts      # types for importing images, fonts and CSS modules
    └── app/
        ├── app.config.ts     # zoneless change detection, the Lynx renderer, the router
        ├── app.routes.ts     # your routes
        └── app.ts            # the root component, written with Lynx elements

These are the commands you'll use most. Prefix them with npx (npx ng build), or install the CLI globally with npm install -g @angular/cli:

#Next steps

• Tutorial: Build a todo app: learn elements, styling, events and signals step by step.
• Coming from web Angular: what's different, and which Angular features work.
• How a Lynx app runs: what the QR code, the bundle and Lynx Explorer are.