Pebellslearn by building
0%
RoadmapsMatrixCoursesSandboxSign in
Development Workflow  ›  Lesson

Creating and Running Sprout

create-expo-app 12 mincreate-expo-app makes a project, npx expo start runs Metro, and Expo Go on a phone on the same network loads the app from a QR code.

Creating and Running Sprout

Choosing Expo was the decision; now you need Sprout running on a real phone in your hand. Three commands and one QR code get you there. Knowing what each step does helps when one of them fails.

The rule

Create, start, scan: the app runs on your phone in minutes.

npx create-expo-app@latest sprout
cd sprout
npx expo start
  • Create. create-expo-app makes a new folder with a working project, its dependencies installed. The default template has an app/ folder where each file is a screen, powered by Expo Router. (Running npm run reset-project in the template swaps the example screens for a blank start.)
  • Start. npx expo start launches Metro and prints a QR code plus a menu of keys.
  • Scan. Install the Expo Go app on your phone. On Android, scan the QR code from inside Expo Go; on iPhone, scan it with the Camera app. The phone downloads the bundle from Metro and Sprout opens.

Running on a device has one common requirement: the phone must reach your computer. Put both on the same Wi‑Fi network. If a work or school network blocks that, npx expo start --tunnel routes the connection through the internet instead.

You can also skip the phone. In the terminal Expo prints, press a to open an Android emulator or i to open the iOS Simulator (the Simulator needs a Mac with Xcode). Always test on at least one real phone too: touch, keyboard and performance feel different there.

For quick experiments there is Expo Snack at snack.expo.dev: a browser editor that runs React Native code on a web preview or on your phone through Expo Go, and shares it with a link. It is ideal for trying one component or asking a question, not for building Sprout itself.

The shortcut

When the app will not open, check the three steps in order: Was the project created without errors? Is Metro running? Can the phone reach Metro? Most failures are the third one.

"Could not connect to development server"Step 1 of 4

  1. Created?

    The sprout folder exists and npm install finished. Fine.

Drills

Answer fast — trust the rule.

quick drill

Which command creates a new Expo project called sprout?

quick drill

Your phone and laptop cannot share a network. Which option still lets Expo Go load the app?

quick drill

In the Expo terminal, which key opens the Android emulator?

quick drill

What is Expo Snack best used for?

Remember

  • Create, start, scan: create-expo-app, npx expo start, Expo Go.
  • Debug in order: created, started, reachable.
  • Trap: phone and computer on different networks; use the same Wi‑Fi or --tunnel.

Practice — level up

0/1 solved

Write your answer, then compare it with a rubric and a model answer.

ExplainThe app will not load

A classmate runs npx expo start and scans the QR code, but the phone shows it cannot connect to the development server. Walk through how you would find and fix the problem.