DEV Community

Cover image for Getting Started with Expo Web
Evan Bacon
Evan Bacon

Posted on

Getting Started with Expo Web

👉 This guide is for beginner React devs with no knowledge of Expo, or building mobile apps.

Expo lets you build and deploy real iOS, Android, and Web apps with React and JavaScript. Expo websites are performant and highly customizable; meaning you can use them with any of your existing React tools like Next.js, Gatsby, Preact, Electron, etc...

This guide will quickly show you the basics for creating a website and deploying it to the web in minutes! For more on mobile apps check out the Expo docs.

You'll Learn how to:


Getting Started

Install the Expo CLI and make a new universal project (Web, iOS, Android):

💡 Absolute beginners with no coding experience should visit snack.expo.io to get started in the browser without using the terminal.

$ npm install -g expo-cli
Enter fullscreen mode Exit fullscreen mode

Create a new Expo project:

💡 Learn more about expo init

$ expo init myProject 
Enter fullscreen mode Exit fullscreen mode

Now enter the project and start it:

$ cd myProject

$ expo start --web
Enter fullscreen mode Exit fullscreen mode

Your browser will automatically open to the website and you'll see this:

Alt Text

Building

Creating a production build is simple:

💡 Expo Web builds live in the web-build folder.

$ expo build:web
Enter fullscreen mode Exit fullscreen mode

You can deploy the website using any hosting service. For this example we'll use Netlify:

$ npx netlify deploy --dir web-build
Enter fullscreen mode Exit fullscreen mode

And that's all! You just created and deployed your first universal Expo website!! See some examples and learn more in the Expo Documentation.

🤔 How Expo Web Works

Every screen in an Expo app is a React Component, but instead of using <div/>, <p/>, <img/> - Expo uses <View />, <Text />, <Image />, <ScrollView />, etc...

The first component in your app is whatever JSX you export from App.js:

import React from 'react';
import { Text } from 'react-native';

function App() {
  return <Text>Expo Everywhere!</Text>
}

export default App;
Enter fullscreen mode Exit fullscreen mode

🏃🏻‍♂️ Running Everywhere

  • 🌐 Try Expo Web in the browser with:
$ expo start --web

# or faster in web-only mode

$ expo start:web
Enter fullscreen mode Exit fullscreen mode
  • 💻 Run in the simulator with:
$ expo start --ios

# or Android

$ expo start --android
Enter fullscreen mode Exit fullscreen mode
  • 📱 You can also open this on your phone with the Expo client!

🕵️‍♀️ Learn More

👋 Thanks for Reading

That's all for now. Keep up with the latest Expo Web news by following 👇

Discussion (2)

Collapse
seanmclem profile image
Seanmclem

Is Expo the only way to use React Native Web? Or can it also be used with Plain React Native?

Collapse
pennmeg profile image
Megan Penn

Is Expo Web able to be added in to an existing Expo project?